Add snippets for Handling the account-exists-with-different… (#367)

* Add v8 and v9 snippets for Handling the account-exists-with-different-credential error * Import auth functions * Add missing methods to param * Add missing methods to params for legacy snippets
firebase · Apr 12, 2024 · 1abb6ce · 1abb6ce
1 parent a9160f6
commit 1abb6ce
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 0 deletions.
diff --git a/auth-next/link-multiple-accounts.js b/auth-next/link-multiple-accounts.js
@@ -182,3 +182,61 @@ function unlink(providerId) {
  });
  // [END auth_unlink_provider]
 }
+
+function accountExistsPopup(auth, facebookProvider, goToApp, promptUserForPassword, promptUserForSignInMethod, getProviderForProviderId) {
+ // [START account_exists_popup]
+ const { signInWithPopup, signInWithEmailAndPassword, linkWithCredential } = require("firebase/auth");
+
+ // User tries to sign in with Facebook.
+ signInWithPopup(auth, facebookProvider).catch((error) => {
+ // User's email already exists.
+ if (error.code === 'auth/account-exists-with-different-credential') {
+ // The pending Facebook credential.
+ const pendingCred = error.credential;
+ // The provider account's email address.
+ const email = error.customData.email;
+
+ // Present the user with a list of providers they might have
+ // used to create the original account.
+ // Then, ask the user to sign in with the existing provider.
+ const method = promptUserForSignInMethod();
+
+ if (method === 'password') {
+ // TODO: Ask the user for their password.
+ // In real scenario, you should handle this asynchronously.
+ const password = promptUserForPassword();
+ signInWithEmailAndPassword(auth, email, password).then((result) => {
+ return linkWithCredential(result.user, pendingCred);
+ }).then(() => {
+ // Facebook account successfully linked to the existing user.
+ goToApp();
+ });
+ return;
+ }
+
+ // All other cases are external providers.
+ // Construct provider object for that provider.
+ // TODO: Implement getProviderForProviderId.
+ const provider = getProviderForProviderId(method);
+ // At this point, you should let the user know that they already have an
+ // account with a different provider, and validate they want to sign in
+ // with the new provider.
+ // Note: Browsers usually block popups triggered asynchronously, so in
+ // real app, you should ask the user to click on a "Continue" button
+ // that will trigger signInWithPopup().
+ signInWithPopup(auth, provider).then((result) => {
+ // Note: Identity Platform doesn't control the provider's sign-in
+ // flow, so it's possible for the user to sign in with an account
+ // with a different email from the first one.
+
+ // Link the Facebook credential. We have access to the pending
+ // credential, so we can directly call the link method.
+ linkWithCredential(result.user, pendingCred).then((userCred) => {
+ // Success.
+ goToApp();
+ });
+ });
+ }
+});
+// [END account_exists_popup]
+}
diff --git a/auth/link-multiple-accounts.js b/auth/link-multiple-accounts.js
@@ -166,3 +166,59 @@ function unlink(providerId) {
  });
  // [END auth_unlink_provider]
 }
+
+function accountExistsPopup(facebookProvider, goToApp, promptUserForPassword, promptUserForSignInMethod, getProviderForProviderId) {
+ // [START account_exists_popup]
+ // User tries to sign in with Facebook.
+ auth.signInWithPopup(facebookProvider).catch((error) => {
+ // User's email already exists.
+ if (error.code === 'auth/account-exists-with-different-credential') {
+ // The pending Facebook credential.
+ const pendingCred = error.credential;
+ // The provider account's email address.
+ const email = error.email;
+
+ // Present the user with a list of providers they might have
+ // used to create the original account.
+ // Then, ask the user to sign in with the existing provider.
+ const method = promptUserForSignInMethod();
+
+ if (method === 'password') {
+ // TODO: Ask the user for their password.
+ // In real scenario, you should handle this asynchronously.
+ const password = promptUserForPassword();
+ auth.signInWithEmailAndPassword(email, password).then((result) => {
+ return result.user.linkWithCredential(pendingCred);
+ }).then(() => {
+ // Facebook account successfully linked to the existing user.
+ goToApp();
+ });
+ return;
+ }
+
+ // All other cases are external providers.
+ // Construct provider object for that provider.
+ // TODO: Implement getProviderForProviderId.
+ const provider = getProviderForProviderId(method);
+ // At this point, you should let the user know that they already have an
+ // account with a different provider, and validate they want to sign in
+ // with the new provider.
+ // Note: Browsers usually block popups triggered asynchronously, so in
+ // real app, you should ask the user to click on a "Continue" button
+ // that will trigger signInWithPopup().
+ auth.signInWithPopup(provider).then((result) => {
+ // Note: Identity Platform doesn't control the provider's sign-in
+ // flow, so it's possible for the user to sign in with an account
+ // with a different email from the first one.
+
+ // Link the Facebook credential. We have access to the pending
+ // credential, so we can directly call the link method.
+ result.user.linkWithCredential(pendingCred).then((userCred) => {
+ // Success.
+ goToApp();
+ });
+ });
+ }
+});
+// [END account_exists_popup]
+}
diff --git a/snippets/auth-next/link-multiple-accounts/account_exists_popup.js b/snippets/auth-next/link-multiple-accounts/account_exists_popup.js
@@ -0,0 +1,61 @@
+// This snippet file was generated by processing the source file:
+// ./auth-next/link-multiple-accounts.js
+//
+// To update the snippets in this file, edit the source and then run
+// 'npm run snippets'.
+
+ // [START account_exists_popup_modular]
+ import { signInWithPopup, signInWithEmailAndPassword, linkWithCredential } from "firebase/auth";
+
+ // User tries to sign in with Facebook.
+ signInWithPopup(auth, facebookProvider).catch((error) => {
+ // User's email already exists.
+ if (error.code === 'auth/account-exists-with-different-credential') {
+ // The pending Facebook credential.
+ const pendingCred = error.credential;
+ // The provider account's email address.
+ const email = error.customData.email;
+
+ // Present the user with a list of providers they might have
+ // used to create the original account.
+ // Then, ask the user to sign in with the existing provider.
+ const method = promptUserForSignInMethod();
+
+ if (method === 'password') {
+ // TODO: Ask the user for their password.
+ // In real scenario, you should handle this asynchronously.
+ const password = promptUserForPassword();
+ signInWithEmailAndPassword(auth, email, password).then((result) => {
+ return linkWithCredential(result.user, pendingCred);
+ }).then(() => {
+ // Facebook account successfully linked to the existing user.
+ goToApp();
+ });
+ return;
+ }
+
+ // All other cases are external providers.
+ // Construct provider object for that provider.
+ // TODO: Implement getProviderForProviderId.
+ const provider = getProviderForProviderId(method);
+ // At this point, you should let the user know that they already have an
+ // account with a different provider, and validate they want to sign in
+ // with the new provider.
+ // Note: Browsers usually block popups triggered asynchronously, so in
+ // real app, you should ask the user to click on a "Continue" button
+ // that will trigger signInWithPopup().
+ signInWithPopup(auth, provider).then((result) => {
+ // Note: Identity Platform doesn't control the provider's sign-in
+ // flow, so it's possible for the user to sign in with an account
+ // with a different email from the first one.
+
+ // Link the Facebook credential. We have access to the pending
+ // credential, so we can directly call the link method.
+ linkWithCredential(result.user, pendingCred).then((userCred) => {
+ // Success.
+ goToApp();
+ });
+ });
+ }
+});
+// [END account_exists_popup_modular]