How to Implement Client-Side User Initiated Account Linking

Problem statement:

Auth0 supports the linking of user accounts from various identity providers. This allows users to authenticate from any of their accounts and still be recognized by your app and associated with the same user profile. Account linking can be initiated by users. Below is the Client-Side Implementation.

Solution:

https://auth0.com/docs/manage-users/user-accounts/user-account-linking/user-initiated-account-linking-client-side-implementation

  1. Create a SPA and add the http://localhost:3000 to “Allowed callback URL”, “Allowed logout URL”, and “Allowed Web Origins” fields.
  2. Go to GitHub - auth0-samples/auth0-link-accounts-sample: Examples of how to implement account linking 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 to open the Account Linking Sample Application and click on the “Log in” button.
  2. Login with a Google Account
  3. Click on “Link Account” and enter a username and password pair.
  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:

  1. We can only link the verified user accounts
  2. The two linked accounts do not require to have the same email addresses.

Recording:

3 Likes