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

Author: NhienLam

auth-next/link-multiple-accounts.js

@@ -182,3 +182,61 @@ function unlink(providerId) {
 });
 // [END auth_unlink_provider]
 }
+
+functionaccountExistsPopup(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.
+constpendingCred=error.credential;
+// The provider account's email address.
+constemail=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.
+constmethod=promptUserForSignInMethod();
+
+if(method==='password'){
+// TODO: Ask the user for their password.
+// In real scenario, you should handle this asynchronously.
+constpassword=promptUserForPassword();
+signInWithEmailAndPassword(auth,email,password).then((result)=>{
+returnlinkWithCredential(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.
+constprovider=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]
+}

auth/link-multiple-accounts.js

@@ -166,3 +166,59 @@ function unlink(providerId) {
 });
 // [END auth_unlink_provider]
 }
+
+functionaccountExistsPopup(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.
+constpendingCred=error.credential;
+// The provider account's email address.
+constemail=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.
+constmethod=promptUserForSignInMethod();
+
+if(method==='password'){
+// TODO: Ask the user for their password.
+// In real scenario, you should handle this asynchronously.
+constpassword=promptUserForPassword();
+auth.signInWithEmailAndPassword(email,password).then((result)=>{
+returnresult.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.
+constprovider=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]
+}

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.
+constpendingCred=error.credential;
+// The provider account's email address.
+constemail=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.
+constmethod=promptUserForSignInMethod();
+
+if(method==='password'){
+// TODO: Ask the user for their password.
+// In real scenario, you should handle this asynchronously.
+constpassword=promptUserForPassword();
+signInWithEmailAndPassword(auth,email,password).then((result)=>{
+returnlinkWithCredential(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.
+constprovider=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]