fix(auth): Fix auth flow for the client app

api-server/server/boot/authentication.js

@@ -1,12 +1,13 @@
 import _ from 'lodash';
 import { Observable } from 'rx';
 import dedent from 'dedent';
-// import debugFactory from 'debug';
+import passport from 'passport';
 import { isEmail } from 'validator';
 import { check } from 'express-validator/check';
 
 import { homeLocation } from '../../../config/env';
-
+import { createCookieConfig } from '../utils/cookieConfig';
+import { createPassportCallbackAuthenticator } from '../component-passport';
 import {
   ifUserRedirectTo,
   ifNoUserRedirectTo,
@@ -15,7 +16,6 @@ import {
 import { wrapHandledError } from '../utils/create-handled-error.js';
 
 const isSignUpDisabled = !!process.env.DISABLE_SIGNUP;
-// const debug = debugFactory('fcc:boot:auth');
 if (isSignUpDisabled) {
   console.log('fcc:boot:auth - Sign up is disabled');
 }
@@ -29,7 +29,11 @@ module.exports = function enableAuthentication(app) {
   const api = app.loopback.Router();
   const { AuthToken, User } = app.models;
 
-  api.get('/signin', ifUserRedirect, (req, res) => res.redirect('/auth/auth0'));
+  api.get('/signin', ifUserRedirect, passport.authenticate('auth0-login', {}));
+  api.get(
+    '/auth/auth0/callback',
+    createPassportCallbackAuthenticator('auth0-login', { provider: 'auth0' })
+  );
 
   api.get('/signout', (req, res) => {
     req.logout();
@@ -41,10 +45,7 @@ module.exports = function enableAuthentication(app) {
           redirectTo: homeLocation
         });
       }
-      const config = {
-        signed: !!req.signedCookies,
-        domain: process.env.COOKIE_DOMAIN || 'localhost'
-      };
+      const config = createCookieConfig(req);
       res.clearCookie('jwt_access_token', config);
       res.clearCookie('access_token', config);
       res.clearCookie('userId', config);
@@ -216,5 +217,4 @@ module.exports = function enableAuthentication(app) {
   );
 
   app.use(api);
-  app.use('/internal', api);
 };

api-server/server/boot/z-not-found.js

@@ -1,15 +1,16 @@
 import accepts from 'accepts';
 
+import { homeLocation } from '../../../config/env.json';
+
 export default function fourOhFour(app) {
   app.all('*', function(req, res) {
     const accept = accepts(req);
     const type = accept.type('html', 'json', 'text');
     const { path } = req;
 
-
     if (type === 'html') {
-      req.flash('danger', `We couldn't find path ${ path }`);
-      return res.render('404', { title: '404'});
+      req.flash('danger', `We couldn't find path ${path}`);
+      return res.redirectWithFlash(`${homeLocation}/404`);
     }
 
     if (type === 'json') {

api-server/server/component-passport.js

@@ -1,11 +1,16 @@
 import passport from 'passport';
-import { PassportConfigurator } from
- '@freecodecamp/loopback-component-passport';
-import passportProviders from './passport-providers';
+import {
+  PassportConfigurator
+} from '@freecodecamp/loopback-component-passport';
 import url from 'url';
 import jwt from 'jsonwebtoken';
 import dedent from 'dedent';
 
+import { homeLocation } from '../../config/env.json';
+import { jwtSecret } from '../../config/secrets';
+import passportProviders from './passport-providers';
+import { createCookieConfig } from './utils/cookieConfig';
+
 const passportOptions = {
   emailOptional: true,
   profileToUser: null
@@ -23,15 +28,14 @@ function getCompletedCertCount(user) {
     'isInfosecQaCert',
     'isJsAlgoDataStructCert',
     'isRespWebDesignCert'
-  ].reduce((sum, key) => user[key] ? sum + 1 : sum, 0);
+  ].reduce((sum, key) => (user[key] ? sum + 1 : sum), 0);
 }
 
 function getLegacyCertCount(user) {
-  return [
-    'isFrontEndCert',
-    'isBackEndCert',
-    'isDataVisCert'
-  ].reduce((sum, key) => user[key] ? sum + 1 : sum, 0);
+  return ['isFrontEndCert', 'isBackEndCert', 'isDataVisCert'].reduce(
+    (sum, key) => (user[key] ? sum + 1 : sum),
+    0
+  );
 }
 
 PassportConfigurator.prototype.init = function passportInit(noSession) {
@@ -51,7 +55,6 @@ PassportConfigurator.prototype.init = function passportInit(noSession) {
   });
 
   passport.deserializeUser((id, done) => {
-
     this.userModel.findById(id, { fields }, (err, user) => {
       if (err || !user) {
         return done(err, user);
@@ -62,8 +65,12 @@ PassportConfigurator.prototype.init = function passportInit(noSession) {
         .aggregate([
           { $match: { _id: user.id } },
           { $project: { points: { $size: '$progressTimestamps' } } }
-        ]).get(function(err, [{ points = 1 } = {}]) {
-          if (err) { console.error(err); return done(err); }
+        ])
+        .get(function(err, [{ points = 1 } = {}]) {
+          if (err) {
+            console.error(err);
+            return done(err);
+          }
           user.points = points;
           let completedChallengeCount = 0;
           let completedProjectCount = 0;
@@ -90,6 +97,15 @@ PassportConfigurator.prototype.init = function passportInit(noSession) {
 };
 
 export function setupPassport(app) {
+  // NOTE(Bouncey): Not sure this is doing much now
+  // Loopback complains about userCredentialModle when this
+  // setup is remoed from server/server.js
+  //
+  // I have split the custom callback in to it's own export that we can use both
+  // here and in boot:auth
+  //
+  // Needs more investigation...
+
   const configurator = new PassportConfigurator(app);
 
   configurator.setupModels({
@@ -104,78 +120,77 @@ export function setupPassport(app) {
     let config = passportProviders[strategy];
     config.session = config.session !== false;
 
-    // https://stackoverflow.com/q/37430452
-    let successRedirect = (req) => {
-      if (!!req && req.session && req.session.returnTo) {
-        delete req.session.returnTo;
-        return '/';
-      }
-      return config.successRedirect || '';
-    };
-
     config.customCallback = !config.useCustomCallback
       ? null
-      : (req, res, next) => {
+      : createPassportCallbackAuthenticator(strategy, config);
 
-        passport.authenticate(
-          strategy,
-          { session: false },
-          (err, user, userInfo) => {
-
-            if (err) {
-              return next(err);
-            }
-
-            if (!user || !userInfo) {
-              return res.redirect(config.failureRedirect);
-            }
-            let redirect = url.parse(successRedirect(req), true);
-
-            delete redirect.search;
-
-            const { accessToken } = userInfo;
-            const { provider } = config;
-            if (accessToken && accessToken.id) {
-              if (provider === 'auth0') {
-                req.flash(
-                  'success',
-                  dedent`
-                    Success! You have signed in to your account. Happy Coding!
-                  `
-                );
-              } else if (user.email) {
-                req.flash(
-                  'info',
-                  dedent`
-  We are moving away from social authentication for privacy reasons. Next time
-  we recommend using your email address: ${user.email} to sign in instead.
-                  `
-                );
-              }
-              const cookieConfig = {
-                signed: !!req.signedCookies,
-                maxAge: accessToken.ttl,
-                domain: process.env.COOKIE_DOMAIN || 'localhost'
-              };
-              const jwtAccess = jwt.sign({accessToken}, process.env.JWT_SECRET);
-              res.cookie('jwt_access_token', jwtAccess, cookieConfig);
-              res.cookie('access_token', accessToken.id, cookieConfig);
-              res.cookie('userId', accessToken.userId, cookieConfig);
-              req.login(user);
-            }
-
-            redirect = url.format(redirect);
-            return res.redirect(redirect);
-          }
-        )(req, res, next);
-    };
-
-    configurator.configureProvider(
-      strategy,
-      {
-        ...config,
-        ...passportOptions
-      }
-    );
+    configurator.configureProvider(strategy, {
+      ...config,
+      ...passportOptions
+    });
   });
 }
+
+export const createPassportCallbackAuthenticator = (strategy, config) => (
+  req,
+  res,
+  next
+) => {
+  // https://stackoverflow.com/q/37430452
+  const successRedirect = req => {
+    if (!!req && req.session && req.session.returnTo) {
+      delete req.session.returnTo;
+      return `${homeLocation}/welcome`;
+    }
+    return config.successRedirect || `${homeLocation}/welcome`;
+  };
+  return passport.authenticate(
+    strategy,
+    { session: false },
+    (err, user, userInfo) => {
+      if (err) {
+        return next(err);
+      }
+
+      if (!user || !userInfo) {
+        return res.redirect('/signin');
+      }
+      let redirect = url.parse(successRedirect(req), true);
+
+      delete redirect.search;
+
+      const { accessToken } = userInfo;
+      const { provider } = config;
+      if (accessToken && accessToken.id) {
+        if (provider === 'auth0') {
+          req.flash(
+            'success',
+            dedent`
+              Success! You have signed in to your account. Happy Coding!
+            `
+          );
+        } else if (user.email) {
+          req.flash(
+            'info',
+            dedent`
+We are moving away from social authentication for privacy reasons. Next time
+we recommend using your email address: ${user.email} to sign in instead.
+            `
+          );
+        }
+        const cookieConfig = {
+          ...createCookieConfig(req),
+          maxAge: accessToken.ttl
+        };
+        const jwtAccess = jwt.sign({ accessToken }, jwtSecret);
+        res.cookie('jwt_access_token', jwtAccess, cookieConfig);
+        res.cookie('access_token', accessToken.id, cookieConfig);
+        res.cookie('userId', accessToken.userId, cookieConfig);
+        req.login(user);
+      }
+
+      redirect = url.format(redirect);
+      return res.redirect(redirect);
+    }
+  )(req, res, next);
+};

api-server/server/middlewares/passport-login.js

@@ -7,12 +7,12 @@ import { login } from 'passport/lib/http/request';
 // if called without callback it returns an observable
 // login(user, options?, cb?) => Void|Observable
 function login$(...args) {
-  console.log('args');
   if (_.isFunction(_.last(args))) {
     return login.apply(this, args);
   }
   return Observable.fromNodeCallback(login).apply(this, args);
 }
+
 export default function passportLogin() {
   return (req, res, next) => {
     req.login = req.logIn = login$;

api-server/server/passport-providers.js

@@ -1,5 +1,10 @@
-const successRedirect = '/';
-const failureRedirect = '/';
+import { auth0 } from '../../config/secrets';
+import { homeLocation } from '../../config/env.json';
+
+const { clientID, clientSecret, domain } = auth0;
+
+const successRedirect = `${homeLocation}/welcome`;
+const failureRedirect = '/signin';
 
 export default {
   local: {
@@ -16,9 +21,9 @@ export default {
   'auth0-login': {
     provider: 'auth0',
     module: 'passport-auth0',
-    clientID: process.env.AUTH0_CLIENT_ID,
-    clientSecret: process.env.AUTH0_CLIENT_SECRET,
-    domain: process.env.AUTH0_DOMAIN,
+    clientID,
+    clientSecret,
+    domain,
     cookieDomain: 'freeCodeCamp.org',
     callbackURL: '/auth/auth0/callback',
     authPath: '/auth/auth0',

api-server/server/server.js

@@ -1,5 +1,5 @@
 const path = require('path');
-require('dotenv').config({ path: path.resolve(__dirname, '../../.env')});
+require('dotenv').config({ path: path.resolve(__dirname, '../../.env') });
 
 const _ = require('lodash');
 const Rx = require('rx');
@@ -17,7 +17,6 @@ log.enabled = true;
 
 Rx.config.longStackSupport = process.env.NODE_DEBUG !== 'production';
 const app = loopback();
-const isBeta = !!process.env.BETA;
 
 expressState.extend(app);
 app.set('state namespace', '__fcc__');
@@ -27,9 +26,25 @@ app.set('view engine', 'jade');
 app.use(loopback.token());
 app.disable('x-powered-by');
 
-boot(app, {
-  appRootDir: __dirname,
-  dev: process.env.NODE_ENV
+const createLogOnce = () => {
+  let called = false;
+  return str => {
+    if (called) {
+      return null;
+    }
+    called = true;
+    return log(str);
+  };
+};
+const logOnce = createLogOnce();
+
+boot(app, __dirname, err => {
+  if (err) {
+    // rethrowing the error here bacause any error thrown in the boot stage
+    // is silent
+    logOnce('The below error was thrown in the boot stage');
+    throw err;
+  }
 });
 
 setupPassport(app);
@@ -44,9 +59,6 @@ app.start = _.once(function() {
       app.get('port'),
       app.get('env')
     );
-    if (isBeta) {
-      log('freeCodeCamp is in beta mode');
-    }
     log(`connecting to db at ${db.settings.url}`);
   });
 

api-server/server/utils/cookieConfig.js

@@ -0,0 +1,6 @@
+export function createCookieConfig(req) {
+  return {
+    signed: !!req.signedCookies,
+    domain: process.env.COOKIE_DOMAIN || 'localhost'
+  };
+}

api-server/server/utils/middleware.js

@@ -2,6 +2,7 @@ import dedent from 'dedent';
 import { validationResult } from 'express-validator/check';
 
 import { createValidatorErrorFormatter } from './create-handled-error.js';
+import { homeLocation } from '../../../config/env.json';
 
 export function ifNoUserRedirectTo(url, message, type = 'errors') {
   return function(req, res, next) {
@@ -50,7 +51,7 @@ export function ifNotVerifiedRedirectToUpdateEmail(req, res, next) {
   return next();
 }
 
-export function ifUserRedirectTo(path = '/', status) {
+export function ifUserRedirectTo(path = `${homeLocation}/welcome`, status) {
   status = status === 302 ? 302 : 301;
   return (req, res, next) => {
     if (req.user) {
@@ -62,8 +63,9 @@ export function ifUserRedirectTo(path = '/', status) {
 
 // for use with express-validator error formatter
 export const createValidatorErrorHandler = (...args) => (req, res, next) => {
-  const validation = validationResult(req)
-    .formatWith(createValidatorErrorFormatter(...args));
+  const validation = validationResult(req).formatWith(
+    createValidatorErrorFormatter(...args)
+  );
 
   if (!validation.isEmpty()) {
     const errors = validation.array();

client/src/client-only-routes/ShowSettings.js

@@ -6,10 +6,12 @@ import { createSelector } from 'reselect';
 import { Grid, Button } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 
+import { apiLocation } from '../../config/env.json';
 import {
   signInLoadingSelector,
   userSelector,
-  isSignedInSelector
+  isSignedInSelector,
+  hardGoTo
 } from '../redux';
 import { submitNewAbout, updateUserFlag, verifyCert } from '../redux/settings';
 import { createFlashMessage } from '../components/Flash/redux';
@@ -29,6 +31,7 @@ import RedirectHome from '../components/RedirectHome';
 
 const propTypes = {
   createFlashMessage: PropTypes.func.isRequired,
+  hardGoTo: PropTypes.func.isRequired,
   isSignedIn: PropTypes.bool,
   showLoading: PropTypes.bool,
   submitNewAbout: PropTypes.func.isRequired,
@@ -101,6 +104,7 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       createFlashMessage,
+      hardGoTo,
       submitNewAbout,
       toggleNightMode: theme => updateUserFlag({ theme }),
       updateInternetSettings: updateUserFlag,
@@ -112,9 +116,15 @@ const mapDispatchToProps = dispatch =>
     dispatch
   );
 
+const createHandleSignoutClick = hardGoTo => e => {
+  e.preventDefault();
+  return hardGoTo(`${apiLocation}/signout`);
+};
+
 function ShowSettings(props) {
   const {
     createFlashMessage,
+    hardGoTo,
     isSignedIn,
     submitNewAbout,
     toggleNightMode,
@@ -193,6 +203,7 @@ function ShowSettings(props) {
               bsStyle='primary'
               className='btn-invert'
               href={'/signout'}
+              onClick={createHandleSignoutClick(hardGoTo)}
               >
               Sign me out of freeCodeCamp
             </Button>

client/src/components/Header/components/Login.js

@@ -1,13 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { Button } from '@freecodecamp/react-bootstrap';
-import { Link } from 'gatsby';
+
+import { hardGoTo } from '../../../redux';
+import { apiLocation } from '../../../../config/env.json';
 
 import './login.css';
 
-function Login({ children, ...restProps }) {
+const mapStateToProps = () => ({});
+const mapDispatchToProps = dispatch => ({
+  navigate: location => dispatch(hardGoTo(location))
+});
+
+const createOnClick = navigate => e => {
+  e.preventDefault();
+  return navigate(`${apiLocation}/signin`);
+};
+
+function Login(props) {
+  const { children, navigate, ...restProps } = props;
   return (
-    <Link to='/signin'>
+    <a href='/signin' onClick={createOnClick(navigate)}>
       <Button
         {...restProps}
         bsStyle='default'
@@ -17,13 +31,17 @@ function Login({ children, ...restProps }) {
         >
         {children || 'Sign In'}
       </Button>
-    </Link>
+    </a>
   );
 }
 
 Login.displayName = 'Login';
 Login.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  navigate: PropTypes.func.isRequired
 };
 
-export default Login;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Login);

client/src/components/Header/index.js

@@ -12,9 +12,9 @@ function Header({ disableSettings }) {
   return (
     <header>
       <nav id='top-nav'>
-        <a className='home-link' href='https://www.freecodecamp.org'>
+        <Link className='home-link' to='/'>
           <NavLogo />
-        </a>
+        </Link>
         {disableSettings ? null : <FCCSearch />}
         <ul id='top-right-nav'>
           <li>

client/src/components/layouts/Default.js

@@ -149,7 +149,7 @@ class DefaultLayout extends Component {
           ]}
         />
         <Header disableSettings={disableSettings} />
-        <div className={landingPage && 'landing-page'}>
+        <div className={`default-layout ${landingPage ? 'landing-page' : ''}`}>
           <OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
           {hasMessages ? (
             <Flash messages={flashMessages} onClose={removeFlashMessage} />

client/src/components/layouts/layout.css

@@ -622,6 +622,6 @@ pre tt:after {
     font-size: 100%;
   }
 }
-main {
+.default-layout {
   margin-top: 38px;
 }

client/src/pages/404.js

@@ -33,7 +33,7 @@ class NotFoundPage extends React.Component {
       <Layout>
         <div className='notfound-page-wrapper'>
           <Helmet title='Page Not Found | freeCodeCamp' />
-          <img alt='learn to code at freeCodeCamp 404' src={notFoundLogo} />
+          <img alt='404 Not Found' src={notFoundLogo} />
           <h1>NOT FOUND</h1>
           {this.state.randomQuote ? (
             <div>

client/src/pages/welcome.js

@@ -9,7 +9,11 @@ import Helmet from 'react-helmet';
 
 import { Loader, Spacer } from '../components/helpers';
 import Layout from '../components/layouts/Default';
-import { userSelector, userFetchStateSelector } from '../redux';
+import {
+  userSelector,
+  userFetchStateSelector,
+  isSignedInSelector
+} from '../redux';
 import { randomQuote } from '../utils/get-words';
 
 import './welcome.css';
@@ -20,6 +24,7 @@ const propTypes = {
     complete: PropTypes.bool,
     errored: PropTypes.bool
   }),
+  isSignedIn: PropTypes.bool,
   user: PropTypes.shape({
     acceptedPrivacyTerms: PropTypes.bool,
     username: PropTypes.string,
@@ -32,20 +37,22 @@ const propTypes = {
 
 const mapStateToProps = createSelector(
   userFetchStateSelector,
+  isSignedInSelector,
   userSelector,
-  (fetchState, user) => ({ fetchState, user })
+  (fetchState, isSignedIn, user) => ({ fetchState, isSignedIn, user })
 );
 const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
 
 function Welcome({
   fetchState: { pending, complete },
+  isSignedIn,
   user: {
     acceptedPrivacyTerms,
     name = '',
-    completedChallengeCount = 0,
+    completedChallengeCount: completedChallenges = 0,
     completedProjectCount = 0,
     completedCertCount = 0,
-    completedLegacyCertCount = 0
+    completedLegacyCertCount: completedLegacyCerts = 0
   }
 }) {
   if (pending && !complete) {
@@ -58,7 +65,12 @@ function Welcome({
     );
   }
 
-  if (!acceptedPrivacyTerms) {
+  if (!isSignedIn) {
+    navigate('/');
+    return null;
+  }
+
+  if (isSignedIn && !acceptedPrivacyTerms) {
     navigate('/accept-privacy-terms');
     return null;
   }
@@ -70,72 +82,72 @@ function Welcome({
         <title>Welcome {name ? name : 'Camper'} | freeCodeCamp.org</title>
       </Helmet>
       <main>
-      <Grid className='text-center'>
-        <Row>
-          <Col xs={12}>
-            <Spacer />
-            <h1 className='big-heading'>Welcome {name ? name : 'Camper'}!</h1>
-          </Col>
-        </Row>
-        <Spacer />
-        <Row>
-          <Col sm={8} smOffset={2} xs={12}>
-            <a
-              className='update-link'
-              href='/n/7gR5pBM-K?refsource=userhome'
-              target='_blank'
-              >
-              We're building a massive open dataset about new coders. Take the
-              2018 New Coder Survey. It only takes 5 minutes.
-            </a>
-          </Col>
-        </Row>
-        <Spacer />
-        <Row className='quote-partial'>
-          <Col sm={10} smOffset={1} xs={12}>
-            <blockquote className='blockquote'>
-              <span>
-                <q>{quote}</q>
-                <footer className='quote-author blockquote-footer'>
-                  <cite>{author}</cite>
-                </footer>
-              </span>
-            </blockquote>
-          </Col>
-        </Row>
-        <Spacer />
-        <Row>
-          <Col sm={8} smOffset={2} xs={12}>
-            <p className='stats'>
-              You have completed <span>{completedChallengeCount}</span> of{' '}
-              <span>1408</span> coding challenges.
-            </p>
-            <p className='stats'>
-              You have built <span>{completedProjectCount}</span> of{' '}
-              <span>30</span> projects.
-            </p>
-            {completedLegacyCertCount ? (
+        <Grid className='text-center'>
+          <Row>
+            <Col xs={12}>
+              <Spacer />
+              <h1 className='big-heading'>Welcome {name ? name : 'Camper'}!</h1>
+            </Col>
+          </Row>
+          <Spacer />
+          <Row>
+            <Col sm={8} smOffset={2} xs={12}>
+              <a
+                className='update-link'
+                href='/n/7gR5pBM-K?refsource=userhome'
+                target='_blank'
+                >
+                We're building a massive open dataset about new coders. Take the
+                2018 New Coder Survey. It only takes 5 minutes.
+              </a>
+            </Col>
+          </Row>
+          <Spacer />
+          <Row className='quote-partial'>
+            <Col sm={10} smOffset={1} xs={12}>
+              <blockquote className='blockquote'>
+                <span>
+                  <q>{quote}</q>
+                  <footer className='quote-author blockquote-footer'>
+                    <cite>{author}</cite>
+                  </footer>
+                </span>
+              </blockquote>
+            </Col>
+          </Row>
+          <Spacer />
+          <Row>
+            <Col sm={8} smOffset={2} xs={12}>
               <p className='stats'>
-                You have earned <span>{completedLegacyCertCount}</span> of{' '}
-                <span>4</span> legacy certifications.
+                You have completed <span>{completedChallenges}</span> of{' '}
+                <span>1408</span> coding challenges.
               </p>
-            ) : null}
-            <p className='stats'>
-              You have earned <span>{completedCertCount}</span> of{' '}
-              <span>6</span> certifications.
-            </p>
-          </Col>
-        </Row>
-        <Spacer />
-        <Row>
-          <Col sm={8} smOffset={2} xs={12}>
-            <Button block={true} bsStyle='primary' className='btn-cta-big'>
-              Go to my next challenge
-            </Button>
-          </Col>
-        </Row>
-        <Spacer size={4} />
-      </Grid>
+              <p className='stats'>
+                You have built <span>{completedProjectCount}</span> of{' '}
+                <span>30</span> projects.
+              </p>
+              {completedLegacyCerts ? (
+                <p className='stats'>
+                  You have earned <span>{completedLegacyCerts}</span> of{' '}
+                  <span>4</span> legacy certifications.
+                </p>
+              ) : null}
+              <p className='stats'>
+                You have earned <span>{completedCertCount}</span> of{' '}
+                <span>6</span> certifications.
+              </p>
+            </Col>
+          </Row>
+          <Spacer />
+          <Row>
+            <Col sm={8} smOffset={2} xs={12}>
+              <Button block={true} bsStyle='primary' className='btn-cta-big'>
+                Go to my next challenge
+              </Button>
+            </Col>
+          </Row>
+          <Spacer size={4} />
+        </Grid>
       </main>
     </Layout>
   );

client/src/redux/failed-updates-epic.js

@@ -11,7 +11,12 @@ import { ofType } from 'redux-observable';
 import store from 'store';
 import uuid from 'uuid/v4';
 
-import { types, onlineStatusChange, isOnlineSelector } from './';
+import {
+  types,
+  onlineStatusChange,
+  isOnlineSelector,
+  isSignedInSelector
+} from './';
 import postUpdate$ from '../templates/Challenges/utils/postUpdate$';
 import { isGoodXHRStatus } from '../templates/Challenges/utils';
 
@@ -36,6 +41,7 @@ function failedUpdateEpic(action$, state$) {
 
   const flushUpdates = action$.pipe(
     ofType(types.fetchUserComplete, types.updateComplete),
+    filter(() => isSignedInSelector(state$.value)),
     filter(() => store.get(key)),
     filter(() => isOnlineSelector(state$.value)),
     tap(() => {

client/src/redux/fetch-user-saga.js

@@ -2,8 +2,13 @@ import { call, put, takeEvery } from 'redux-saga/effects';
 
 import { fetchUserComplete, fetchUserError } from './';
 import { getSessionUser } from '../utils/ajax';
+import { jwt } from './cookieValues';
 
 function* fetchSessionUser() {
+  if (!jwt) {
+    yield put(fetchUserComplete({ user: {}, username: '' }));
+    return;
+  }
   try {
     const {
       data: { user = {}, result = '' }

client/src/redux/index.js

@@ -47,6 +47,7 @@ export const types = createTypes(
   [
     'appMount',
     'closeDonationModal',
+    'hardGoTo',
     'openDonationModal',
     'onlineStatusChange',
     'updateComplete',
@@ -81,6 +82,11 @@ export const openDonationModal = createAction(types.openDonationModal);
 
 export const onlineStatusChange = createAction(types.onlineStatusChange);
 
+// `hardGoTo` is used to hit the API server directly
+// without going through /internal
+// used for things like /signin and /signout
+export const hardGoTo = createAction(types.hardGoTo);
+
 export const updateComplete = createAction(types.updateComplete);
 export const updateFailed = createAction(types.updateFailed);
 

config/secrets.js

@@ -1,53 +1,90 @@
+const {
+  MONGODB,
+  MONGOHQ_URL,
+
+  SESSION_SECRET,
+  COOKIE_SECRET,
+  JWT_SECRET,
+
+  AUTH0_CLIENT_ID,
+  AUTH0_CLIENT_SECRET,
+  AUTH0_DOMAIN,
+
+  FACEBOOK_ID,
+  FACEBOOK_SECRET,
+
+  GITHUB_ID,
+  GITHUB_SECRET,
+
+  GOOGLE_ID,
+  GOOGLE_SECRET,
+
+  LINKEDIN_ID,
+  LINKEDIN_SECRET,
+
+  TWITTER_KEY,
+  TWITTER_SECRET,
+  TWITTER_TOKEN,
+  TWITTER_TOKEN_SECRET,
+
+  STRIPE_PUBLIC,
+  STRIPE_SECRET
+} = process.env;
+
 module.exports = {
+  db: MONGODB || MONGOHQ_URL,
 
-  db: process.env.MONGODB || process.env.MONGOHQ_URL,
+  cookieSecret: COOKIE_SECRET,
+  jwtSecret: JWT_SECRET,
+  sessionSecret: SESSION_SECRET,
 
-  sessionSecret: process.env.SESSION_SECRET,
+  auth0: {
+    clientID: AUTH0_CLIENT_ID,
+    clientSecret: AUTH0_CLIENT_SECRET,
+    domain: AUTH0_DOMAIN
+  },
 
   facebook: {
-    clientID: process.env.FACEBOOK_ID,
-    clientSecret: process.env.FACEBOOK_SECRET,
+    clientID: FACEBOOK_ID,
+    clientSecret: FACEBOOK_SECRET,
     callbackURL: '/auth/facebook/callback',
     passReqToCallback: true
   },
 
   github: {
-    clientID: process.env.GITHUB_ID,
-    clientSecret: process.env.GITHUB_SECRET,
+    clientID: GITHUB_ID,
+    clientSecret: GITHUB_SECRET,
     callbackURL: '/auth/github/callback',
     passReqToCallback: true
   },
 
   twitter: {
-    consumerKey: process.env.TWITTER_KEY,
-    consumerSecret: process.env.TWITTER_SECRET,
-    token: process.env.TWITTER_TOKEN,
-    tokenSecret: process.env.TWITTER_TOKEN_SECRET,
+    consumerKey: TWITTER_KEY,
+    consumerSecret: TWITTER_SECRET,
+    token: TWITTER_TOKEN,
+    tokenSecret: TWITTER_TOKEN_SECRET,
     callbackURL: '/auth/twitter/callback',
     passReqToCallback: true
   },
 
   google: {
-    clientID: process.env.GOOGLE_ID,
-    clientSecret: process.env.GOOGLE_SECRET,
+    clientID: GOOGLE_ID,
+    clientSecret: GOOGLE_SECRET,
     callbackURL: '/auth/google/callback',
     passReqToCallback: true
   },
 
   linkedin: {
-    clientID: process.env.LINKEDIN_ID,
-    clientSecret: process.env.LINKEDIN_SECRET,
+    clientID: LINKEDIN_ID,
+    clientSecret: LINKEDIN_SECRET,
     callbackURL: '/auth/linkedin/callback',
     profileFields: ['public-profile-url'],
     scope: ['r_basicprofile', 'r_emailaddress'],
     passReqToCallback: true
   },
-  slackHook: process.env.SLACK_WEBHOOK,
-
-  cookieSecret: process.env.COOKIE_SECRET,
 
   stripe: {
-    public: process.env.STRIPE_PUBLIC,
-    secret: process.env.STRIPE_SECRET
+    public: STRIPE_PUBLIC,
+    secret: STRIPE_SECRET
   }
 };