How to Link Multiple Auth Providers in Firebase

1import { getAuth } from 'firebase/auth'
2
3const auth = getAuth()
4
5function getLinkedProviders() {
6  const user = auth.currentUser
7  if (!user) return []
8
9  return user.providerData.map((provider) => ({
10    id: provider.providerId,
11    email: provider.email,
12    phone: provider.phoneNumber,
13    name: provider.displayName,
14  }))
15}
16
17// Example output:
18// [{ id: 'password', email: 'user@example.com', ... },
19//  { id: 'google.com', email: 'user@gmail.com', ... }]

1import { GoogleAuthProvider, linkWithPopup } from 'firebase/auth'
2
3async function linkGoogle() {
4  const user = auth.currentUser
5  if (!user) throw new Error('Must be signed in')
6
7  const provider = new GoogleAuthProvider()
8
9  try {
10    const result = await linkWithPopup(user, provider)
11    console.log('Google linked:', result.user.providerData)
12  } catch (error: any) {
13    if (error.code === 'auth/credential-already-in-use') {
14      console.error('This Google account is already linked to another user.')
15    } else if (error.code === 'auth/provider-already-linked') {
16      console.error('Google is already linked to this account.')
17    }
18    throw error
19  }
20}

1import {
2  signInWithPopup,
3  GoogleAuthProvider,
4  GithubAuthProvider,
5  fetchSignInMethodsForEmail,
6  linkWithCredential,
7  OAuthProvider,
8} from 'firebase/auth'
9
10async function signInWithGitHub() {
11  const provider = new GithubAuthProvider()
12
13  try {
14    const result = await signInWithPopup(auth, provider)
15    return result.user
16  } catch (error: any) {
17    if (error.code === 'auth/account-exists-with-different-credential') {
18      const email = error.customData?.email
19      const pendingCred = OAuthProvider.credentialFromError(error)
20      if (!email || !pendingCred) throw error
21
22      // Find which provider the email is registered with
23      const methods = await fetchSignInMethodsForEmail(auth, email)
24      console.log('Sign in with', methods[0], 'first, then link GitHub')
25
26      // Sign in with the existing provider (e.g. Google)
27      const googleProvider = new GoogleAuthProvider()
28      const googleResult = await signInWithPopup(auth, googleProvider)
29
30      // Link the pending GitHub credential
31      await linkWithCredential(googleResult.user, pendingCred)
32      console.log('GitHub linked successfully')
33      return googleResult.user
34    }
35    throw error
36  }
37}

1import { EmailAuthProvider, linkWithCredential } from 'firebase/auth'
2
3async function linkEmailPassword(
4  email: string,
5  password: string
6) {
7  const user = auth.currentUser
8  if (!user) throw new Error('Must be signed in')
9
10  const credential = EmailAuthProvider.credential(email, password)
11
12  try {
13    const result = await linkWithCredential(user, credential)
14    console.log('Email/password linked:', result.user.email)
15  } catch (error: any) {
16    if (error.code === 'auth/email-already-in-use') {
17      console.error('This email is already used by another account.')
18    } else if (error.code === 'auth/weak-password') {
19      console.error('Password must be at least 6 characters.')
20    }
21    throw error
22  }
23}

1import { unlink } from 'firebase/auth'
2
3async function unlinkProvider(providerId: string) {
4  const user = auth.currentUser
5  if (!user) throw new Error('Must be signed in')
6
7  if (user.providerData.length <= 1) {
8    throw new Error('Cannot unlink the only sign-in method')
9  }
10
11  try {
12    const updatedUser = await unlink(user, providerId)
13    console.log('Unlinked', providerId)
14    console.log('Remaining providers:', updatedUser.providerData.map(p => p.providerId))
15  } catch (error: any) {
16    if (error.code === 'auth/no-such-provider') {
17      console.error('This provider is not linked to this account.')
18    }
19    throw error
20  }
21}