How to Implement Client-Side User Initiated Account Linking

Knowledge Articles
, , , ,
1

Last Updated: Oct 29, 2024

Overview

Auth0 supports linking user accounts from various identity providers. This allows users to authenticate from any of their accounts and still be recognized by the app and associated with the same user profile. Users can initiate account linking.

Applies To

  • Client-Side
  • Account Linking

Solution

Follow the steps or video below.

  1. Create a Single Page Web Application.
    a. Navigate to Applications and Applications.
    b. Click Create Application.
    c. Click Single Page Web Applications and click Create.
    d. Click on the Settings tab.
    e. Add http://localhost:3000 to Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins fields and click Save Changes.
  2. Go to GitHub - auth0-samples/auth0-link-accounts-sample: Examples of how to implement account linking 59 to download the sample application.
  3. Open the Terminal window and download the application locally, and open the project.
$git clone https://github.com/auth0-samples/auth0-link-accounts-sample.git
$cd auth0-link-accounts-sample/
$cd SPA
$code .
  1. Update the domain and client_id in the auth_config.json file.
  2. Open Terminal window in VS Code and run:
$npm install
$npm start
  1. Go to http://localhost:3000 1 to open the Account Linking Sample Application and click on the Log in button.
  2. Login with a Google Account.
  3. Click Link Account and enter a username and password.
  4. In the Account Linking pop-up window, click on Continue.
  5. The two users are linked successfully.
  6. Verify the user in the Auth0 Dashboard

NOTE:

  • Only verified user accounts can be linked
  • The two linked accounts are not required to have the same email addresses

Related References

3 Likes