17-React Firebase: Link Social Logins

Author: rwieruch

src/components/Account/index.js

@@ -1,21 +1,223 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { AuthUserContext, withAuthorization } from '../Session';
+import { withFirebase } from '../Firebase';
 import { PasswordForgetForm } from '../PasswordForget';
 import PasswordChangeForm from '../PasswordChange';
 
+const SIGN_IN_METHODS = [
+  {
+    id: 'password',
+    provider: null,
+  },
+  {
+    id: 'google.com',
+    provider: 'googleProvider',
+  },
+  {
+    id: 'facebook.com',
+    provider: 'facebookProvider',
+  },
+  {
+    id: 'twitter.com',
+    provider: 'twitterProvider',
+  },
+];
+
 const AccountPage = () => (
   <AuthUserContext.Consumer>
     {authUser => (
       <div>
         <h1>Account: {authUser.email}</h1>
         <PasswordForgetForm />
         <PasswordChangeForm />
+        <LoginManagement authUser={authUser} />
       </div>
     )}
   </AuthUserContext.Consumer>
 );
 
+class LoginManagementBase extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeSignInMethods: [],
+      error: null,
+    };
+  }
+
+  componentDidMount() {
+    this.fetchSignInMethods();
+  }
+
+  fetchSignInMethods = () => {
+    this.props.firebase.auth
+      .fetchSignInMethodsForEmail(this.props.authUser.email)
+      .then(activeSignInMethods =>
+        this.setState({ activeSignInMethods, error: null }),
+      )
+      .catch(error => this.setState({ error }));
+  };
+
+  onSocialLoginLink = provider => {
+    this.props.firebase.auth.currentUser
+      .linkWithPopup(this.props.firebase[provider])
+      .then(this.fetchSignInMethods)
+      .catch(error => this.setState({ error }));
+  };
+
+  onDefaultLoginLink = password => {
+    const credential = this.props.firebase.emailAuthProvider.credential(
+      this.props.authUser.email,
+      password,
+    );
+
+    this.props.firebase.auth.currentUser
+      .linkAndRetrieveDataWithCredential(credential)
+      .then(this.fetchSignInMethods)
+      .catch(error => this.setState({ error }));
+  };
+
+  onUnlink = providerId => {
+    this.props.firebase.auth.currentUser
+      .unlink(providerId)
+      .then(this.fetchSignInMethods)
+      .catch(error => this.setState({ error }));
+  };
+
+  render() {
+    const { activeSignInMethods, error } = this.state;
+
+    return (
+      <div>
+        Sign In Methods:
+        <ul>
+          {SIGN_IN_METHODS.map(signInMethod => {
+            const onlyOneLeft = activeSignInMethods.length === 1;
+            const isEnabled = activeSignInMethods.includes(
+              signInMethod.id,
+            );
+
+            return (
+              <li key={signInMethod.id}>
+                {signInMethod.id === 'password' ? (
+                  <DefaultLoginToggle
+                    onlyOneLeft={onlyOneLeft}
+                    isEnabled={isEnabled}
+                    signInMethod={signInMethod}
+                    onLink={this.onDefaultLoginLink}
+                    onUnlink={this.onUnlink}
+                  />
+                ) : (
+                  <SocialLoginToggle
+                    onlyOneLeft={onlyOneLeft}
+                    isEnabled={isEnabled}
+                    signInMethod={signInMethod}
+                    onLink={this.onSocialLoginLink}
+                    onUnlink={this.onUnlink}
+                  />
+                )}
+              </li>
+            );
+          })}
+        </ul>
+        {error && error.message}
+      </div>
+    );
+  }
+}
+
+const SocialLoginToggle = ({
+  onlyOneLeft,
+  isEnabled,
+  signInMethod,
+  onLink,
+  onUnlink,
+}) =>
+  isEnabled ? (
+    <button
+      type="button"
+      onClick={() => onUnlink(signInMethod.id)}
+      disabled={onlyOneLeft}
+    >
+      Deactivate {signInMethod.id}
+    </button>
+  ) : (
+    <button
+      type="button"
+      onClick={() => onLink(signInMethod.provider)}
+    >
+      Link {signInMethod.id}
+    </button>
+  );
+
+class DefaultLoginToggle extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { passwordOne: '', passwordTwo: '' };
+  }
+
+  onSubmit = event => {
+    event.preventDefault();
+
+    this.props.onLink(this.state.passwordOne);
+    this.setState({ passwordOne: '', passwordTwo: '' });
+  };
+
+  onChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const {
+      onlyOneLeft,
+      isEnabled,
+      signInMethod,
+      onUnlink,
+    } = this.props;
+
+    const { passwordOne, passwordTwo } = this.state;
+
+    const isInvalid =
+      passwordOne !== passwordTwo || passwordOne === '';
+
+    return isEnabled ? (
+      <button
+        type="button"
+        onClick={() => onUnlink(signInMethod.id)}
+        disabled={onlyOneLeft}
+      >
+        Deactivate {signInMethod.id}
+      </button>
+    ) : (
+      <form onSubmit={this.onSubmit}>
+        <input
+          name="passwordOne"
+          value={passwordOne}
+          onChange={this.onChange}
+          type="password"
+          placeholder="New Password"
+        />
+        <input
+          name="passwordTwo"
+          value={passwordTwo}
+          onChange={this.onChange}
+          type="password"
+          placeholder="Confirm New Password"
+        />
+
+        <button disabled={isInvalid} type="submit">
+          Link {signInMethod.id}
+        </button>
+      </form>
+    );
+  }
+}
+
+const LoginManagement = withFirebase(LoginManagementBase);
+
 const condition = authUser => !!authUser;
 
 export default withAuthorization(condition)(AccountPage);

src/components/Firebase/firebase.js

@@ -15,6 +15,7 @@ class Firebase {
   constructor() {
     app.initializeApp(config);
 
+    this.emailAuthProvider = app.auth.EmailAuthProvider;
     this.auth = app.auth();
     this.db = app.database();
 

src/components/SignIn/index.js

@@ -25,6 +25,16 @@ const INITIAL_STATE = {
   error: null,
 };
 
+const ERROR_CODE_ACCOUNT_EXISTS =
+  'auth/account-exists-with-different-credential';
+
+const ERROR_MSG_ACCOUNT_EXISTS = `
+  An account with an E-Mail address to
+  this social account already exists. Try to login from
+  this account instead and associate your social accounts on
+  your personal account page.
+`;
+
 class SignInFormBase extends Component {
   constructor(props) {
     super(props);
@@ -111,6 +121,10 @@ class SignInGoogleBase extends Component {
           });
       })
       .catch(error => {
+        if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
+          error.message = ERROR_MSG_ACCOUNT_EXISTS;
+        }
+
         this.setState({ error });
       });
 
@@ -158,6 +172,10 @@ class SignInFacebookBase extends Component {
           });
       })
       .catch(error => {
+        if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
+          error.message = ERROR_MSG_ACCOUNT_EXISTS;
+        }
+
         this.setState({ error });
       });
 
@@ -205,6 +223,10 @@ class SignInTwitterBase extends Component {
           });
       })
       .catch(error => {
+        if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
+          error.message = ERROR_MSG_ACCOUNT_EXISTS;
+        }
+
         this.setState({ error });
       });
 

src/components/SignUp/index.js

@@ -21,6 +21,16 @@ const INITIAL_STATE = {
   error: null,
 };
 
+const ERROR_CODE_ACCOUNT_EXISTS = 'auth/email-already-in-use';
+
+const ERROR_MSG_ACCOUNT_EXISTS = `
+  An account with this E-Mail address already exists.
+  Try to login with this account instead. If you think the
+  account is already used from one of the social logins, try
+  to sign in with one of them. Afterward, associate your accounts
+  on your personal account page.
+`;
+
 class SignUpFormBase extends Component {
   constructor(props) {
     super(props);
@@ -56,6 +66,10 @@ class SignUpFormBase extends Component {
           });
       })
       .catch(error => {
+        if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
+          error.message = ERROR_MSG_ACCOUNT_EXISTS;
+        }
+
         this.setState({ error });
       });