[#915] Add flow to unlink OAuth accounts

Author: catarak

client/modules/User/actions.js

@@ -270,3 +270,20 @@ export function removeApiKey(keyId) {
         Promise.reject(new Error(response.data.error));
       });
 }
+
+export function unlinkService(service) {
+  return (dispatch) => {
+    if (!['github', 'google'].includes(service)) return;
+    apiClient.delete(`/auth/${service}`)
+      .then((response) => {
+        dispatch({
+          type: ActionTypes.AUTH_USER,
+          user: response.data
+        });
+      }).catch((error) => {
+        const { response } = error;
+        const message = response.message || response.data.error;
+        dispatch(authError(message));
+      });
+  };
+}

client/modules/User/components/SocialAuthButton.jsx

@@ -2,11 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
 import { withTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 
 import { remSize } from '../../../theme';
-
 import { GithubIcon, GoogleIcon } from '../../../common/icons';
 import Button from '../../../common/Button';
+import { unlinkService } from '../actions';
 
 const authUrls = {
   github: '/auth/github',
@@ -16,11 +17,11 @@ const authUrls = {
 const linkLabels = {
   github: {
     connect: 'Connect GitHub Account',
-    connected: 'Re-link GitHub Account'
+    unlink: 'Unlink GitHub Account'
   },
   google: {
     connect: 'Connect Google Account',
-    connected: 'Re-link Google Account'
+    unlink: 'Unlink Google Account'
   }
 };
 
@@ -46,18 +47,33 @@ function SocialAuthButton({
     github: t('SocialAuthButton.Github'),
     google: t('SocialAuthButton.Google')
   };
-  let label;
+  const dispatch = useDispatch();
   if (linkStyle) {
-    label = isConnected ? linkLabels[service].connected : linkLabels[service].connect;
-  } else {
-    label = labels[service];
+    if (isConnected) {
+      return (
+        <StyledButton
+          iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
+          onClick={() => { dispatch(unlinkService(service)); }}
+        >
+          {linkLabels[service].unlink}
+        </StyledButton>
+      );
+    }
+    return (
+      <StyledButton
+        iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
+        href={authUrls[service]}
+      >
+        {linkLabels[service].connect}
+      </StyledButton>
+    );
   }
   return (
     <StyledButton
       iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
       href={authUrls[service]}
     >
-      {label}
+      {labels[service]}
     </StyledButton>
   );
 }

server/controllers/user.controller.js

@@ -337,3 +337,23 @@ export function updateSettings(req, res) {
   });
 }
 
+export function unlinkGithub(req, res) {
+  if (req.user) {
+    req.user.github = undefined;
+    req.user.tokens = req.user.tokens.filter(token => token.kind !== 'github');
+    saveUser(res, req.user);
+    return;
+  }
+  res.status(404).json({ success: false, message: 'You must be logged in to complete this action.' });
+}
+
+export function unlinkGoogle(req, res) {
+  if (req.user) {
+    req.user.google = undefined;
+    req.user.tokens = req.user.tokens.filter(token => token.kind !== 'google');
+    saveUser(res, req.user);
+    return;
+  }
+  res.status(404).json({ success: false, message: 'You must be logged in to complete this action.' });
+}
+

server/routes/passport.routes.js

@@ -0,0 +1,44 @@
+import Router from 'express';
+import passport from 'passport';
+
+const router = new Router();
+
+router.get('/auth/github', passport.authenticate('github'));
+router.get('/auth/github/callback', (req, res, next) => {
+  passport.authenticate('github', { failureRedirect: '/login' }, (err, user) => {
+    if (err) {
+      // use query string param to show error;
+      res.redirect('/account?error=github');
+      return;
+    }
+
+    req.logIn(user, (loginErr) => {
+      if (loginErr) {
+        next(loginErr);
+        return;
+      }
+      res.redirect('/');
+    });
+  })(req, res, next);
+});
+
+router.get('/auth/google', passport.authenticate('google'));
+router.get('/auth/google/callback', (req, res, next) => {
+  passport.authenticate('google', { failureRedirect: '/login' }, (err, user) => {
+    if (err) {
+      // use query string param to show error;
+      res.redirect('/account?error=google');
+      return;
+    }
+
+    req.logIn(user, (loginErr) => {
+      if (loginErr) {
+        next(loginErr);
+        return;
+      }
+      res.redirect('/');
+    });
+  })(req, res, next);
+});
+
+export default router;

server/routes/user.routes.js

@@ -26,4 +26,7 @@ router.post('/verify/send', UserController.emailVerificationInitiate);
 
 router.get('/verify', UserController.verifyEmail);
 
+router.delete('/auth/github', UserController.unlinkGithub);
+router.delete('/auth/google', UserController.unlinkGoogle);
+
 export default router;

server/server.js

@@ -26,6 +26,7 @@ import aws from './routes/aws.routes';
 import serverRoutes from './routes/server.routes';
 import embedRoutes from './routes/embed.routes';
 import assetRoutes from './routes/asset.routes';
+import passportRoutes from './routes/passport.routes';
 import { requestsOfTypeJSON } from './utils/requestsOfType';
 
 import { renderIndex } from './views/index';
@@ -135,43 +136,7 @@ app.use('/', serverRoutes);
 app.use(assetRoutes);
 
 app.use('/', embedRoutes);
-app.get('/auth/github', passport.authenticate('github'));
-app.get('/auth/github/callback', (req, res, next) => {
-  passport.authenticate('github', { failureRedirect: '/login' }, (err, user) => {
-    if (err) {
-      // use query string param to show error;
-      res.redirect('/account?error=github');
-      return;
-    }
-
-    req.logIn(user, (loginErr) => {
-      if (loginErr) {
-        next(loginErr);
-        return;
-      }
-      res.redirect('/');
-    });
-  })(req, res, next);
-});
-
-app.get('/auth/google', passport.authenticate('google'));
-app.get('/auth/google/callback', (req, res, next) => {
-  passport.authenticate('google', { failureRedirect: '/login' }, (err, user) => {
-    if (err) {
-      // use query string param to show error;
-      res.redirect('/account?error=google');
-      return;
-    }
-
-    req.logIn(user, (loginErr) => {
-      if (loginErr) {
-        next(loginErr);
-        return;
-      }
-      res.redirect('/');
-    });
-  })(req, res, next);
-});
+app.use('/', passportRoutes);
 
 // configure passport
 require('./config/passport');