Linking Multiple Authentication providers to a single user

[Electric-Dragon]

I am trying to enable login with multiple providers. Is there a way I can link multiple auth credentials to a single user account?

E.g. User creates account with email and password, but then they want to connect their Twitter account as well so that they can use either email or twitter to login.

[GaryAustin1]

Yes, it is supposed to just work as long as email is the same...
#3098

[GaryAustin1]

I just did some very limited testing...
I think maybe getting a stronger ruling on this than that link is needed.

I created email signup with password and then was able to also log in with discord and both worked. You could see both email and discord as providers in the auth table.
I then deleted the user and logged in with discord first. Next I tried to signup with email/password. That did NOT work. No confirm email is sent and email provider is not added to the auth table. Turning off email confirmation gets "user already registered" message.
EDIT: If you force a password change on the user after Discord signup, the email/password login will start working, but email is not listed as a provider.

@inian your response awhile back seems to be the only source of info on multiple 3rd party signup/logins working.

1. Is that supported by gotrue/Supabase?
2. If so can email/password also be used both before and after a 3rd party signup?

[Electric-Dragon]

Thanks a lot... I'll try it out as well and revert

[wottpal]

Would be also great to have some things in the docs about linking multiple providers as this is a pretty common use case.

[kyds3k]

@wottpal I agree - I'm trying to do the same thing with Spotify and Gmail and it's nerve-wracking.

[yob-yob]

Hi I know that this is an old thread but before I create a new one I would just like to ask if anyone knows how to change providers??

I have a user that started login using email & password, then there is a way to also authenticate Github & Gitlab Providers because I will be using both Github / Gitlab's REST API for my App...

the problem I have is that the prover_token that is visible on the session is from the email provider...

the way I solved this is by not allowing authentication using email & password, rather they must authenticate directly from provider...

this means if they authenticate using github first, the provider_token that is visible on the session is from github and I can use this token for my Authorization header to authenticate into github's REST API...

another thing is that my users should be able to authenticate to gitlab as well, so that the app can communicate with both providers...

the setup actually works, I actually see 2 providers in session.user.app_metadata.providers which is github and gitlab...
my problem now is how can I change session.provider_token to give me the token for gitlab rest api???

[robertn702]

Old thread, but is there a way to link multiple providers to a single user if the emails aren't the same? I.e. a user creates an account with email and password then, while they are authenticated, connects their Apple account which is tied to another email.

If this is not possible to do in an automated way, how could it be done manually?

[Electric-Dragon]

@robertn702 I'm sorry but I am not aware how to achieve that

[arshamg]

@robertn702 if you solved this issue, I'd be interested in hearing your approach. We have the same need.

[mavrick]

i am also interested in how to do this

[AnujKaithwas]

wouldn't this be a custom implementation? I guess supabase link different login methods using email as the "key". If the email is different, i think it would need you to let the user do it manually in a form or something similar and the confirm the linking via some OTP or something. This looks like it needs to be built completely custom.

[sebmor]

Damn, I was really hoping one could do something like

.signInWithOAuth({
 provider: 'discord',
  options: {
   user: userid
 }
}

This seems to be a very common use case to do...

[guysolan]

In my usecase, where what I wanted was to use both phone and email OTP, this was possible simply by authenticating once with email/phone OTP then updating the user object for the other authentication method:

supabase.auth.updateUser({email/phone: new_authentication_method_details})

docs

[WeLoTech]

Debugged:
Make sure to allow Signups in the settings (https://supabase.com/dashboard/project/_/settings/auth)

With Signups disabled the supabase.auth.signInWithOtp is not working even after the phone was successfully added via the updateUser function.

[mdelpape]

Hi did this end up working for you? I'm in the same situation but I can't update the phone number for authentication after I sign in with email.

[SeonaidhMorrison]

Same for me would really like some help on this

[vibejain]

@SeonaidhMorrison @mdelpape
This actually did work for me me, Here is what I did:

Overview

In our use case, we wanted to authenticate users using either phone or email OTP, and then update the user object to include both authentication methods. The key steps involved:

1. Authenticating the user with one method (phone or email).
2. Updating the user object to include the other method.
3. Verifying the new method.

Step-by-Step Solution

1. Authenticating with the First Method

You start by signing up or signing in the user with either email or phone. For example, here’s how you do it with phone:

const { data, error } = await supabase.auth.signUp({
  phone: 'YOUR_PHONE_NUMBER',
  password: 'YOUR_PASSWORD'
});

if (error) {
  console.error('Error during sign up:', error.message);
} else {
  console.log('User signed up:', data.user);
}

2. Updating the User Object to Include the Other Method

Once the user is authenticated with the first method, you can update the user object to include the other method. For example, if the user initially signed up with phone, you can now add an email:

const { error } = await supabase.auth.updateUser({
  email: 'YOUR_EMAIL_ADDRESS'
});

if (error) {
  console.error('Error updating user:', error.message);
} else {
  console.log('User updated successfully');
}

3. Verifying the New Method

After updating the user object, the new method (email in this case) needs to be verified. Supabase should send an OTP for the new method, which you need to verify:

const { data, error } = await supabase.auth.verifyOtp({
  email: 'YOUR_EMAIL_ADDRESS',
  token: 'OTP_TOKEN',
  type: 'email'  // Specify the verification type
});

if (error) {
  console.error('Error verifying OTP:', error.message);
} else {
  console.log('OTP verified:', data);
}

Important Considerations

1. Enable Signups in Settings: Make sure that signups are enabled in your Supabase project settings. This is crucial because if signups are disabled, supabase.auth.signInWithOtp will not work even after the phone or email has been added via the updateUser function.

2. Phone Verification: If you notice that fields like phone_confirmed_at or phone_verified are not updated, ensure that the verification process for the phone number is correctly implemented.

3. Email Verification: Similarly, ensure that the email verification process is completed to update fields like email_confirmed_at.

Example Workflow

Here’s a comprehensive example that covers the entire workflow from signup to verification for both methods:

const handleSignup = async () => {
  // Step 1: Sign up with phone
  const { data, error } = await supabase.auth.signUp({
    phone: 'YOUR_PHONE_NUMBER',
    password: 'YOUR_PASSWORD'
  });

  if (error) {
    console.error('Error during sign up:', error.message);
    return;
  }

  console.log('User signed up:', data.user);

  // Step 2: Update user to add email
  const { error: updateError } = await supabase.auth.updateUser({
    email: 'YOUR_EMAIL_ADDRESS'
  });

  if (updateError) {
    console.error('Error updating user:', updateError.message);
    return;
  }

  console.log('User updated successfully');

  // Step 3: Verify email OTP
  const { data: verifyData, error: verifyError } = await supabase.auth.verifyOtp({
    email: 'YOUR_EMAIL_ADDRESS',
    token: 'OTP_TOKEN',
    type: 'email'
  });

  if (verifyError) {
    console.error('Error verifying OTP:', verifyError.message);
    return;
  }

  console.log('OTP verified:', verifyData);

  // Now the user should have both phone and email as providers
};

Troubleshooting

• Phone or Email Not Verified: Ensure that the OTP is correctly entered and that the Supabase project settings are configured to send OTPs.
• Duplicate Key Value Error: Make sure that the user data being inserted into your database does not violate any unique constraints, such as duplicate emails.

By following these steps, you should be able to authenticate users using both phone and email OTPs and update their user objects accordingly.

[hasnainadam7]

will this work for senario user can signing via Email + password or phone + otp ??

[DanieII]

If you don't want to rely on having the same email to get the accounts linked you can use the "Identity Linking" feature.
This is how I link facebook to to users in my app. Here I am linking the facebook account only if the user is logged in and hasn't linked facebook before, otherwise just sign in with facebook.

export async function signInWithFacebook(next?: string) {
  const supabase = await createClient();
  const redirectTo = `${process.env.NEXT_PUBLIC_URL}/auth/callback?next=${next}`;
  const options = {
    scopes: "public_profile pages_show_list pages_manage_posts",
    redirectTo,
  };

  const session = await supabase.auth.getSession();

  let result;
  if (
    session.data.session &&
    !session.data.session.user.app_metadata.providers.includes("facebook")
  ) {
    result = await supabase.auth.linkIdentity({
      provider: "facebook",
      options,
    });
  } else {
    result = await supabase.auth.signInWithOAuth({
      provider: "facebook",
      options,
    });
  }

  const { data, error } = result;
  if (error) {
    return { error: error.message };
  }

  return redirect(data.url);
}