Auth0 Account linking on custom login/signup page

Help
,
1

In universal login when user login with email auth0 create a new user on database and when user same email user tried to login in with google/FB on any social provider it popup account linking screen & when click on link account it redirect him to login form so user re-enter email/password for verification and it also hide social links on login form on account linking state how we can achieve this on costume login/signup form ? how we can hide social links is there any value we got from callback ? so we can hide social links on linking state

2

To achieve the same functionality with a custom login/signup form, you can follow these steps:

  1. Create a new user in your database when a user logs in with their email using the Auth0 API. Ensure that you store the user’s email as a unique identifier.

  2. When the user tries to log in with Google/Facebook or any other social provider, and a user with the same email already exists in your database, you can handle the account linking process.

  3. Display a popup or a separate screen for account linking, informing the user that an account with the same email already exists.

  4. Provide a form for the user to re-enter their email and password for verification. You can use the same form used for the initial login/signup process.

  5. After the user submits the form, validate the email and password entered by the user.

  6. If the email and password are valid, you can link the social provider to the existing user in your database by associating the user’s email with their social provider’s account.

  7. Once the linking process is complete, you can redirect the user to their desired page or back to the login form.

To hide social links during the account linking state, you can use a flag or a variable to track the account linking process. Set the flag to true when the user initiates the account linking process and hide the social links based on the flag’s value. You can toggle the visibility of the social links using CSS or conditionally rendering them in your frontend framework based on the flag’s value.

Remember to handle any error scenarios, such as when the user enters incorrect credentials or if the account linking process fails.

1 Like