fix(auth): Fix auth flow for the client app
This commit is contained in:
committed by
mrugesh mohapatra
parent
a656cbf98a
commit
c08bb95ea8
@ -1,12 +1,13 @@
|
|||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import { Observable } from 'rx';
|
import { Observable } from 'rx';
|
||||||
import dedent from 'dedent';
|
import dedent from 'dedent';
|
||||||
// import debugFactory from 'debug';
|
import passport from 'passport';
|
||||||
import { isEmail } from 'validator';
|
import { isEmail } from 'validator';
|
||||||
import { check } from 'express-validator/check';
|
import { check } from 'express-validator/check';
|
||||||
|
|
||||||
import { homeLocation } from '../../../config/env';
|
import { homeLocation } from '../../../config/env';
|
||||||
|
import { createCookieConfig } from '../utils/cookieConfig';
|
||||||
|
import { createPassportCallbackAuthenticator } from '../component-passport';
|
||||||
import {
|
import {
|
||||||
ifUserRedirectTo,
|
ifUserRedirectTo,
|
||||||
ifNoUserRedirectTo,
|
ifNoUserRedirectTo,
|
||||||
@ -15,7 +16,6 @@ import {
|
|||||||
import { wrapHandledError } from '../utils/create-handled-error.js';
|
import { wrapHandledError } from '../utils/create-handled-error.js';
|
||||||
|
|
||||||
const isSignUpDisabled = !!process.env.DISABLE_SIGNUP;
|
const isSignUpDisabled = !!process.env.DISABLE_SIGNUP;
|
||||||
// const debug = debugFactory('fcc:boot:auth');
|
|
||||||
if (isSignUpDisabled) {
|
if (isSignUpDisabled) {
|
||||||
console.log('fcc:boot:auth - Sign up is disabled');
|
console.log('fcc:boot:auth - Sign up is disabled');
|
||||||
}
|
}
|
||||||
@ -29,7 +29,11 @@ module.exports = function enableAuthentication(app) {
|
|||||||
const api = app.loopback.Router();
|
const api = app.loopback.Router();
|
||||||
const { AuthToken, User } = app.models;
|
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) => {
|
api.get('/signout', (req, res) => {
|
||||||
req.logout();
|
req.logout();
|
||||||
@ -41,10 +45,7 @@ module.exports = function enableAuthentication(app) {
|
|||||||
redirectTo: homeLocation
|
redirectTo: homeLocation
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const config = {
|
const config = createCookieConfig(req);
|
||||||
signed: !!req.signedCookies,
|
|
||||||
domain: process.env.COOKIE_DOMAIN || 'localhost'
|
|
||||||
};
|
|
||||||
res.clearCookie('jwt_access_token', config);
|
res.clearCookie('jwt_access_token', config);
|
||||||
res.clearCookie('access_token', config);
|
res.clearCookie('access_token', config);
|
||||||
res.clearCookie('userId', config);
|
res.clearCookie('userId', config);
|
||||||
@ -216,5 +217,4 @@ module.exports = function enableAuthentication(app) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
app.use(api);
|
app.use(api);
|
||||||
app.use('/internal', api);
|
|
||||||
};
|
};
|
||||||
|
@ -1,15 +1,16 @@
|
|||||||
import accepts from 'accepts';
|
import accepts from 'accepts';
|
||||||
|
|
||||||
|
import { homeLocation } from '../../../config/env.json';
|
||||||
|
|
||||||
export default function fourOhFour(app) {
|
export default function fourOhFour(app) {
|
||||||
app.all('*', function(req, res) {
|
app.all('*', function(req, res) {
|
||||||
const accept = accepts(req);
|
const accept = accepts(req);
|
||||||
const type = accept.type('html', 'json', 'text');
|
const type = accept.type('html', 'json', 'text');
|
||||||
const { path } = req;
|
const { path } = req;
|
||||||
|
|
||||||
|
|
||||||
if (type === 'html') {
|
if (type === 'html') {
|
||||||
req.flash('danger', `We couldn't find path ${ path }`);
|
req.flash('danger', `We couldn't find path ${path}`);
|
||||||
return res.render('404', { title: '404'});
|
return res.redirectWithFlash(`${homeLocation}/404`);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'json') {
|
if (type === 'json') {
|
||||||
|
@ -1,11 +1,16 @@
|
|||||||
import passport from 'passport';
|
import passport from 'passport';
|
||||||
import { PassportConfigurator } from
|
import {
|
||||||
'@freecodecamp/loopback-component-passport';
|
PassportConfigurator
|
||||||
import passportProviders from './passport-providers';
|
} from '@freecodecamp/loopback-component-passport';
|
||||||
import url from 'url';
|
import url from 'url';
|
||||||
import jwt from 'jsonwebtoken';
|
import jwt from 'jsonwebtoken';
|
||||||
import dedent from 'dedent';
|
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 = {
|
const passportOptions = {
|
||||||
emailOptional: true,
|
emailOptional: true,
|
||||||
profileToUser: null
|
profileToUser: null
|
||||||
@ -23,15 +28,14 @@ function getCompletedCertCount(user) {
|
|||||||
'isInfosecQaCert',
|
'isInfosecQaCert',
|
||||||
'isJsAlgoDataStructCert',
|
'isJsAlgoDataStructCert',
|
||||||
'isRespWebDesignCert'
|
'isRespWebDesignCert'
|
||||||
].reduce((sum, key) => user[key] ? sum + 1 : sum, 0);
|
].reduce((sum, key) => (user[key] ? sum + 1 : sum), 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getLegacyCertCount(user) {
|
function getLegacyCertCount(user) {
|
||||||
return [
|
return ['isFrontEndCert', 'isBackEndCert', 'isDataVisCert'].reduce(
|
||||||
'isFrontEndCert',
|
(sum, key) => (user[key] ? sum + 1 : sum),
|
||||||
'isBackEndCert',
|
0
|
||||||
'isDataVisCert'
|
);
|
||||||
].reduce((sum, key) => user[key] ? sum + 1 : sum, 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
PassportConfigurator.prototype.init = function passportInit(noSession) {
|
PassportConfigurator.prototype.init = function passportInit(noSession) {
|
||||||
@ -51,7 +55,6 @@ PassportConfigurator.prototype.init = function passportInit(noSession) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
passport.deserializeUser((id, done) => {
|
passport.deserializeUser((id, done) => {
|
||||||
|
|
||||||
this.userModel.findById(id, { fields }, (err, user) => {
|
this.userModel.findById(id, { fields }, (err, user) => {
|
||||||
if (err || !user) {
|
if (err || !user) {
|
||||||
return done(err, user);
|
return done(err, user);
|
||||||
@ -62,8 +65,12 @@ PassportConfigurator.prototype.init = function passportInit(noSession) {
|
|||||||
.aggregate([
|
.aggregate([
|
||||||
{ $match: { _id: user.id } },
|
{ $match: { _id: user.id } },
|
||||||
{ $project: { points: { $size: '$progressTimestamps' } } }
|
{ $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;
|
user.points = points;
|
||||||
let completedChallengeCount = 0;
|
let completedChallengeCount = 0;
|
||||||
let completedProjectCount = 0;
|
let completedProjectCount = 0;
|
||||||
@ -90,6 +97,15 @@ PassportConfigurator.prototype.init = function passportInit(noSession) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function setupPassport(app) {
|
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);
|
const configurator = new PassportConfigurator(app);
|
||||||
|
|
||||||
configurator.setupModels({
|
configurator.setupModels({
|
||||||
@ -104,30 +120,40 @@ export function setupPassport(app) {
|
|||||||
let config = passportProviders[strategy];
|
let config = passportProviders[strategy];
|
||||||
config.session = config.session !== false;
|
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
|
config.customCallback = !config.useCustomCallback
|
||||||
? null
|
? null
|
||||||
: (req, res, next) => {
|
: createPassportCallbackAuthenticator(strategy, config);
|
||||||
|
|
||||||
passport.authenticate(
|
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,
|
strategy,
|
||||||
{ session: false },
|
{ session: false },
|
||||||
(err, user, userInfo) => {
|
(err, user, userInfo) => {
|
||||||
|
|
||||||
if (err) {
|
if (err) {
|
||||||
return next(err);
|
return next(err);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!user || !userInfo) {
|
if (!user || !userInfo) {
|
||||||
return res.redirect(config.failureRedirect);
|
return res.redirect('/signin');
|
||||||
}
|
}
|
||||||
let redirect = url.parse(successRedirect(req), true);
|
let redirect = url.parse(successRedirect(req), true);
|
||||||
|
|
||||||
@ -147,17 +173,16 @@ export function setupPassport(app) {
|
|||||||
req.flash(
|
req.flash(
|
||||||
'info',
|
'info',
|
||||||
dedent`
|
dedent`
|
||||||
We are moving away from social authentication for privacy reasons. Next time
|
We are moving away from social authentication for privacy reasons. Next time
|
||||||
we recommend using your email address: ${user.email} to sign in instead.
|
we recommend using your email address: ${user.email} to sign in instead.
|
||||||
`
|
`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const cookieConfig = {
|
const cookieConfig = {
|
||||||
signed: !!req.signedCookies,
|
...createCookieConfig(req),
|
||||||
maxAge: accessToken.ttl,
|
maxAge: accessToken.ttl
|
||||||
domain: process.env.COOKIE_DOMAIN || 'localhost'
|
|
||||||
};
|
};
|
||||||
const jwtAccess = jwt.sign({accessToken}, process.env.JWT_SECRET);
|
const jwtAccess = jwt.sign({ accessToken }, jwtSecret);
|
||||||
res.cookie('jwt_access_token', jwtAccess, cookieConfig);
|
res.cookie('jwt_access_token', jwtAccess, cookieConfig);
|
||||||
res.cookie('access_token', accessToken.id, cookieConfig);
|
res.cookie('access_token', accessToken.id, cookieConfig);
|
||||||
res.cookie('userId', accessToken.userId, cookieConfig);
|
res.cookie('userId', accessToken.userId, cookieConfig);
|
||||||
@ -168,14 +193,4 @@ export function setupPassport(app) {
|
|||||||
return res.redirect(redirect);
|
return res.redirect(redirect);
|
||||||
}
|
}
|
||||||
)(req, res, next);
|
)(req, res, next);
|
||||||
};
|
};
|
||||||
|
|
||||||
configurator.configureProvider(
|
|
||||||
strategy,
|
|
||||||
{
|
|
||||||
...config,
|
|
||||||
...passportOptions
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
@ -7,12 +7,12 @@ import { login } from 'passport/lib/http/request';
|
|||||||
// if called without callback it returns an observable
|
// if called without callback it returns an observable
|
||||||
// login(user, options?, cb?) => Void|Observable
|
// login(user, options?, cb?) => Void|Observable
|
||||||
function login$(...args) {
|
function login$(...args) {
|
||||||
console.log('args');
|
|
||||||
if (_.isFunction(_.last(args))) {
|
if (_.isFunction(_.last(args))) {
|
||||||
return login.apply(this, args);
|
return login.apply(this, args);
|
||||||
}
|
}
|
||||||
return Observable.fromNodeCallback(login).apply(this, args);
|
return Observable.fromNodeCallback(login).apply(this, args);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function passportLogin() {
|
export default function passportLogin() {
|
||||||
return (req, res, next) => {
|
return (req, res, next) => {
|
||||||
req.login = req.logIn = login$;
|
req.login = req.logIn = login$;
|
||||||
|
@ -1,5 +1,10 @@
|
|||||||
const successRedirect = '/';
|
import { auth0 } from '../../config/secrets';
|
||||||
const failureRedirect = '/';
|
import { homeLocation } from '../../config/env.json';
|
||||||
|
|
||||||
|
const { clientID, clientSecret, domain } = auth0;
|
||||||
|
|
||||||
|
const successRedirect = `${homeLocation}/welcome`;
|
||||||
|
const failureRedirect = '/signin';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
local: {
|
local: {
|
||||||
@ -16,9 +21,9 @@ export default {
|
|||||||
'auth0-login': {
|
'auth0-login': {
|
||||||
provider: 'auth0',
|
provider: 'auth0',
|
||||||
module: 'passport-auth0',
|
module: 'passport-auth0',
|
||||||
clientID: process.env.AUTH0_CLIENT_ID,
|
clientID,
|
||||||
clientSecret: process.env.AUTH0_CLIENT_SECRET,
|
clientSecret,
|
||||||
domain: process.env.AUTH0_DOMAIN,
|
domain,
|
||||||
cookieDomain: 'freeCodeCamp.org',
|
cookieDomain: 'freeCodeCamp.org',
|
||||||
callbackURL: '/auth/auth0/callback',
|
callbackURL: '/auth/auth0/callback',
|
||||||
authPath: '/auth/auth0',
|
authPath: '/auth/auth0',
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
require('dotenv').config({ path: path.resolve(__dirname, '../../.env')});
|
require('dotenv').config({ path: path.resolve(__dirname, '../../.env') });
|
||||||
|
|
||||||
const _ = require('lodash');
|
const _ = require('lodash');
|
||||||
const Rx = require('rx');
|
const Rx = require('rx');
|
||||||
@ -17,7 +17,6 @@ log.enabled = true;
|
|||||||
|
|
||||||
Rx.config.longStackSupport = process.env.NODE_DEBUG !== 'production';
|
Rx.config.longStackSupport = process.env.NODE_DEBUG !== 'production';
|
||||||
const app = loopback();
|
const app = loopback();
|
||||||
const isBeta = !!process.env.BETA;
|
|
||||||
|
|
||||||
expressState.extend(app);
|
expressState.extend(app);
|
||||||
app.set('state namespace', '__fcc__');
|
app.set('state namespace', '__fcc__');
|
||||||
@ -27,9 +26,25 @@ app.set('view engine', 'jade');
|
|||||||
app.use(loopback.token());
|
app.use(loopback.token());
|
||||||
app.disable('x-powered-by');
|
app.disable('x-powered-by');
|
||||||
|
|
||||||
boot(app, {
|
const createLogOnce = () => {
|
||||||
appRootDir: __dirname,
|
let called = false;
|
||||||
dev: process.env.NODE_ENV
|
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);
|
setupPassport(app);
|
||||||
@ -44,9 +59,6 @@ app.start = _.once(function() {
|
|||||||
app.get('port'),
|
app.get('port'),
|
||||||
app.get('env')
|
app.get('env')
|
||||||
);
|
);
|
||||||
if (isBeta) {
|
|
||||||
log('freeCodeCamp is in beta mode');
|
|
||||||
}
|
|
||||||
log(`connecting to db at ${db.settings.url}`);
|
log(`connecting to db at ${db.settings.url}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
6
api-server/server/utils/cookieConfig.js
Normal file
6
api-server/server/utils/cookieConfig.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export function createCookieConfig(req) {
|
||||||
|
return {
|
||||||
|
signed: !!req.signedCookies,
|
||||||
|
domain: process.env.COOKIE_DOMAIN || 'localhost'
|
||||||
|
};
|
||||||
|
}
|
@ -2,6 +2,7 @@ import dedent from 'dedent';
|
|||||||
import { validationResult } from 'express-validator/check';
|
import { validationResult } from 'express-validator/check';
|
||||||
|
|
||||||
import { createValidatorErrorFormatter } from './create-handled-error.js';
|
import { createValidatorErrorFormatter } from './create-handled-error.js';
|
||||||
|
import { homeLocation } from '../../../config/env.json';
|
||||||
|
|
||||||
export function ifNoUserRedirectTo(url, message, type = 'errors') {
|
export function ifNoUserRedirectTo(url, message, type = 'errors') {
|
||||||
return function(req, res, next) {
|
return function(req, res, next) {
|
||||||
@ -50,7 +51,7 @@ export function ifNotVerifiedRedirectToUpdateEmail(req, res, next) {
|
|||||||
return next();
|
return next();
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ifUserRedirectTo(path = '/', status) {
|
export function ifUserRedirectTo(path = `${homeLocation}/welcome`, status) {
|
||||||
status = status === 302 ? 302 : 301;
|
status = status === 302 ? 302 : 301;
|
||||||
return (req, res, next) => {
|
return (req, res, next) => {
|
||||||
if (req.user) {
|
if (req.user) {
|
||||||
@ -62,8 +63,9 @@ export function ifUserRedirectTo(path = '/', status) {
|
|||||||
|
|
||||||
// for use with express-validator error formatter
|
// for use with express-validator error formatter
|
||||||
export const createValidatorErrorHandler = (...args) => (req, res, next) => {
|
export const createValidatorErrorHandler = (...args) => (req, res, next) => {
|
||||||
const validation = validationResult(req)
|
const validation = validationResult(req).formatWith(
|
||||||
.formatWith(createValidatorErrorFormatter(...args));
|
createValidatorErrorFormatter(...args)
|
||||||
|
);
|
||||||
|
|
||||||
if (!validation.isEmpty()) {
|
if (!validation.isEmpty()) {
|
||||||
const errors = validation.array();
|
const errors = validation.array();
|
||||||
|
@ -6,10 +6,12 @@ import { createSelector } from 'reselect';
|
|||||||
import { Grid, Button } from '@freecodecamp/react-bootstrap';
|
import { Grid, Button } from '@freecodecamp/react-bootstrap';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
|
|
||||||
|
import { apiLocation } from '../../config/env.json';
|
||||||
import {
|
import {
|
||||||
signInLoadingSelector,
|
signInLoadingSelector,
|
||||||
userSelector,
|
userSelector,
|
||||||
isSignedInSelector
|
isSignedInSelector,
|
||||||
|
hardGoTo
|
||||||
} from '../redux';
|
} from '../redux';
|
||||||
import { submitNewAbout, updateUserFlag, verifyCert } from '../redux/settings';
|
import { submitNewAbout, updateUserFlag, verifyCert } from '../redux/settings';
|
||||||
import { createFlashMessage } from '../components/Flash/redux';
|
import { createFlashMessage } from '../components/Flash/redux';
|
||||||
@ -29,6 +31,7 @@ import RedirectHome from '../components/RedirectHome';
|
|||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
createFlashMessage: PropTypes.func.isRequired,
|
createFlashMessage: PropTypes.func.isRequired,
|
||||||
|
hardGoTo: PropTypes.func.isRequired,
|
||||||
isSignedIn: PropTypes.bool,
|
isSignedIn: PropTypes.bool,
|
||||||
showLoading: PropTypes.bool,
|
showLoading: PropTypes.bool,
|
||||||
submitNewAbout: PropTypes.func.isRequired,
|
submitNewAbout: PropTypes.func.isRequired,
|
||||||
@ -101,6 +104,7 @@ const mapDispatchToProps = dispatch =>
|
|||||||
bindActionCreators(
|
bindActionCreators(
|
||||||
{
|
{
|
||||||
createFlashMessage,
|
createFlashMessage,
|
||||||
|
hardGoTo,
|
||||||
submitNewAbout,
|
submitNewAbout,
|
||||||
toggleNightMode: theme => updateUserFlag({ theme }),
|
toggleNightMode: theme => updateUserFlag({ theme }),
|
||||||
updateInternetSettings: updateUserFlag,
|
updateInternetSettings: updateUserFlag,
|
||||||
@ -112,9 +116,15 @@ const mapDispatchToProps = dispatch =>
|
|||||||
dispatch
|
dispatch
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const createHandleSignoutClick = hardGoTo => e => {
|
||||||
|
e.preventDefault();
|
||||||
|
return hardGoTo(`${apiLocation}/signout`);
|
||||||
|
};
|
||||||
|
|
||||||
function ShowSettings(props) {
|
function ShowSettings(props) {
|
||||||
const {
|
const {
|
||||||
createFlashMessage,
|
createFlashMessage,
|
||||||
|
hardGoTo,
|
||||||
isSignedIn,
|
isSignedIn,
|
||||||
submitNewAbout,
|
submitNewAbout,
|
||||||
toggleNightMode,
|
toggleNightMode,
|
||||||
@ -193,6 +203,7 @@ function ShowSettings(props) {
|
|||||||
bsStyle='primary'
|
bsStyle='primary'
|
||||||
className='btn-invert'
|
className='btn-invert'
|
||||||
href={'/signout'}
|
href={'/signout'}
|
||||||
|
onClick={createHandleSignoutClick(hardGoTo)}
|
||||||
>
|
>
|
||||||
Sign me out of freeCodeCamp
|
Sign me out of freeCodeCamp
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -1,13 +1,27 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
import { Button } from '@freecodecamp/react-bootstrap';
|
import { Button } from '@freecodecamp/react-bootstrap';
|
||||||
import { Link } from 'gatsby';
|
|
||||||
|
import { hardGoTo } from '../../../redux';
|
||||||
|
import { apiLocation } from '../../../../config/env.json';
|
||||||
|
|
||||||
import './login.css';
|
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 (
|
return (
|
||||||
<Link to='/signin'>
|
<a href='/signin' onClick={createOnClick(navigate)}>
|
||||||
<Button
|
<Button
|
||||||
{...restProps}
|
{...restProps}
|
||||||
bsStyle='default'
|
bsStyle='default'
|
||||||
@ -17,13 +31,17 @@ function Login({ children, ...restProps }) {
|
|||||||
>
|
>
|
||||||
{children || 'Sign In'}
|
{children || 'Sign In'}
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</a>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Login.displayName = 'Login';
|
Login.displayName = 'Login';
|
||||||
Login.propTypes = {
|
Login.propTypes = {
|
||||||
children: PropTypes.any
|
children: PropTypes.any,
|
||||||
|
navigate: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Login;
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps
|
||||||
|
)(Login);
|
||||||
|
@ -12,9 +12,9 @@ function Header({ disableSettings }) {
|
|||||||
return (
|
return (
|
||||||
<header>
|
<header>
|
||||||
<nav id='top-nav'>
|
<nav id='top-nav'>
|
||||||
<a className='home-link' href='https://www.freecodecamp.org'>
|
<Link className='home-link' to='/'>
|
||||||
<NavLogo />
|
<NavLogo />
|
||||||
</a>
|
</Link>
|
||||||
{disableSettings ? null : <FCCSearch />}
|
{disableSettings ? null : <FCCSearch />}
|
||||||
<ul id='top-right-nav'>
|
<ul id='top-right-nav'>
|
||||||
<li>
|
<li>
|
||||||
|
@ -149,7 +149,7 @@ class DefaultLayout extends Component {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
<Header disableSettings={disableSettings} />
|
<Header disableSettings={disableSettings} />
|
||||||
<div className={landingPage && 'landing-page'}>
|
<div className={`default-layout ${landingPage ? 'landing-page' : ''}`}>
|
||||||
<OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
|
<OfflineWarning isOnline={isOnline} isSignedIn={isSignedIn} />
|
||||||
{hasMessages ? (
|
{hasMessages ? (
|
||||||
<Flash messages={flashMessages} onClose={removeFlashMessage} />
|
<Flash messages={flashMessages} onClose={removeFlashMessage} />
|
||||||
|
@ -622,6 +622,6 @@ pre tt:after {
|
|||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
main {
|
.default-layout {
|
||||||
margin-top: 38px;
|
margin-top: 38px;
|
||||||
}
|
}
|
@ -33,7 +33,7 @@ class NotFoundPage extends React.Component {
|
|||||||
<Layout>
|
<Layout>
|
||||||
<div className='notfound-page-wrapper'>
|
<div className='notfound-page-wrapper'>
|
||||||
<Helmet title='Page Not Found | freeCodeCamp' />
|
<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>
|
<h1>NOT FOUND</h1>
|
||||||
{this.state.randomQuote ? (
|
{this.state.randomQuote ? (
|
||||||
<div>
|
<div>
|
||||||
|
@ -9,7 +9,11 @@ import Helmet from 'react-helmet';
|
|||||||
|
|
||||||
import { Loader, Spacer } from '../components/helpers';
|
import { Loader, Spacer } from '../components/helpers';
|
||||||
import Layout from '../components/layouts/Default';
|
import Layout from '../components/layouts/Default';
|
||||||
import { userSelector, userFetchStateSelector } from '../redux';
|
import {
|
||||||
|
userSelector,
|
||||||
|
userFetchStateSelector,
|
||||||
|
isSignedInSelector
|
||||||
|
} from '../redux';
|
||||||
import { randomQuote } from '../utils/get-words';
|
import { randomQuote } from '../utils/get-words';
|
||||||
|
|
||||||
import './welcome.css';
|
import './welcome.css';
|
||||||
@ -20,6 +24,7 @@ const propTypes = {
|
|||||||
complete: PropTypes.bool,
|
complete: PropTypes.bool,
|
||||||
errored: PropTypes.bool
|
errored: PropTypes.bool
|
||||||
}),
|
}),
|
||||||
|
isSignedIn: PropTypes.bool,
|
||||||
user: PropTypes.shape({
|
user: PropTypes.shape({
|
||||||
acceptedPrivacyTerms: PropTypes.bool,
|
acceptedPrivacyTerms: PropTypes.bool,
|
||||||
username: PropTypes.string,
|
username: PropTypes.string,
|
||||||
@ -32,20 +37,22 @@ const propTypes = {
|
|||||||
|
|
||||||
const mapStateToProps = createSelector(
|
const mapStateToProps = createSelector(
|
||||||
userFetchStateSelector,
|
userFetchStateSelector,
|
||||||
|
isSignedInSelector,
|
||||||
userSelector,
|
userSelector,
|
||||||
(fetchState, user) => ({ fetchState, user })
|
(fetchState, isSignedIn, user) => ({ fetchState, isSignedIn, user })
|
||||||
);
|
);
|
||||||
const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
|
const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
|
||||||
|
|
||||||
function Welcome({
|
function Welcome({
|
||||||
fetchState: { pending, complete },
|
fetchState: { pending, complete },
|
||||||
|
isSignedIn,
|
||||||
user: {
|
user: {
|
||||||
acceptedPrivacyTerms,
|
acceptedPrivacyTerms,
|
||||||
name = '',
|
name = '',
|
||||||
completedChallengeCount = 0,
|
completedChallengeCount: completedChallenges = 0,
|
||||||
completedProjectCount = 0,
|
completedProjectCount = 0,
|
||||||
completedCertCount = 0,
|
completedCertCount = 0,
|
||||||
completedLegacyCertCount = 0
|
completedLegacyCertCount: completedLegacyCerts = 0
|
||||||
}
|
}
|
||||||
}) {
|
}) {
|
||||||
if (pending && !complete) {
|
if (pending && !complete) {
|
||||||
@ -58,7 +65,12 @@ function Welcome({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!acceptedPrivacyTerms) {
|
if (!isSignedIn) {
|
||||||
|
navigate('/');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isSignedIn && !acceptedPrivacyTerms) {
|
||||||
navigate('/accept-privacy-terms');
|
navigate('/accept-privacy-terms');
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -107,16 +119,16 @@ function Welcome({
|
|||||||
<Row>
|
<Row>
|
||||||
<Col sm={8} smOffset={2} xs={12}>
|
<Col sm={8} smOffset={2} xs={12}>
|
||||||
<p className='stats'>
|
<p className='stats'>
|
||||||
You have completed <span>{completedChallengeCount}</span> of{' '}
|
You have completed <span>{completedChallenges}</span> of{' '}
|
||||||
<span>1408</span> coding challenges.
|
<span>1408</span> coding challenges.
|
||||||
</p>
|
</p>
|
||||||
<p className='stats'>
|
<p className='stats'>
|
||||||
You have built <span>{completedProjectCount}</span> of{' '}
|
You have built <span>{completedProjectCount}</span> of{' '}
|
||||||
<span>30</span> projects.
|
<span>30</span> projects.
|
||||||
</p>
|
</p>
|
||||||
{completedLegacyCertCount ? (
|
{completedLegacyCerts ? (
|
||||||
<p className='stats'>
|
<p className='stats'>
|
||||||
You have earned <span>{completedLegacyCertCount}</span> of{' '}
|
You have earned <span>{completedLegacyCerts}</span> of{' '}
|
||||||
<span>4</span> legacy certifications.
|
<span>4</span> legacy certifications.
|
||||||
</p>
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
|
@ -11,7 +11,12 @@ import { ofType } from 'redux-observable';
|
|||||||
import store from 'store';
|
import store from 'store';
|
||||||
import uuid from 'uuid/v4';
|
import uuid from 'uuid/v4';
|
||||||
|
|
||||||
import { types, onlineStatusChange, isOnlineSelector } from './';
|
import {
|
||||||
|
types,
|
||||||
|
onlineStatusChange,
|
||||||
|
isOnlineSelector,
|
||||||
|
isSignedInSelector
|
||||||
|
} from './';
|
||||||
import postUpdate$ from '../templates/Challenges/utils/postUpdate$';
|
import postUpdate$ from '../templates/Challenges/utils/postUpdate$';
|
||||||
import { isGoodXHRStatus } from '../templates/Challenges/utils';
|
import { isGoodXHRStatus } from '../templates/Challenges/utils';
|
||||||
|
|
||||||
@ -36,6 +41,7 @@ function failedUpdateEpic(action$, state$) {
|
|||||||
|
|
||||||
const flushUpdates = action$.pipe(
|
const flushUpdates = action$.pipe(
|
||||||
ofType(types.fetchUserComplete, types.updateComplete),
|
ofType(types.fetchUserComplete, types.updateComplete),
|
||||||
|
filter(() => isSignedInSelector(state$.value)),
|
||||||
filter(() => store.get(key)),
|
filter(() => store.get(key)),
|
||||||
filter(() => isOnlineSelector(state$.value)),
|
filter(() => isOnlineSelector(state$.value)),
|
||||||
tap(() => {
|
tap(() => {
|
||||||
|
@ -2,8 +2,13 @@ import { call, put, takeEvery } from 'redux-saga/effects';
|
|||||||
|
|
||||||
import { fetchUserComplete, fetchUserError } from './';
|
import { fetchUserComplete, fetchUserError } from './';
|
||||||
import { getSessionUser } from '../utils/ajax';
|
import { getSessionUser } from '../utils/ajax';
|
||||||
|
import { jwt } from './cookieValues';
|
||||||
|
|
||||||
function* fetchSessionUser() {
|
function* fetchSessionUser() {
|
||||||
|
if (!jwt) {
|
||||||
|
yield put(fetchUserComplete({ user: {}, username: '' }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
const {
|
const {
|
||||||
data: { user = {}, result = '' }
|
data: { user = {}, result = '' }
|
||||||
|
@ -47,6 +47,7 @@ export const types = createTypes(
|
|||||||
[
|
[
|
||||||
'appMount',
|
'appMount',
|
||||||
'closeDonationModal',
|
'closeDonationModal',
|
||||||
|
'hardGoTo',
|
||||||
'openDonationModal',
|
'openDonationModal',
|
||||||
'onlineStatusChange',
|
'onlineStatusChange',
|
||||||
'updateComplete',
|
'updateComplete',
|
||||||
@ -81,6 +82,11 @@ export const openDonationModal = createAction(types.openDonationModal);
|
|||||||
|
|
||||||
export const onlineStatusChange = createAction(types.onlineStatusChange);
|
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 updateComplete = createAction(types.updateComplete);
|
||||||
export const updateFailed = createAction(types.updateFailed);
|
export const updateFailed = createAction(types.updateFailed);
|
||||||
|
|
||||||
|
@ -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 = {
|
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: {
|
facebook: {
|
||||||
clientID: process.env.FACEBOOK_ID,
|
clientID: FACEBOOK_ID,
|
||||||
clientSecret: process.env.FACEBOOK_SECRET,
|
clientSecret: FACEBOOK_SECRET,
|
||||||
callbackURL: '/auth/facebook/callback',
|
callbackURL: '/auth/facebook/callback',
|
||||||
passReqToCallback: true
|
passReqToCallback: true
|
||||||
},
|
},
|
||||||
|
|
||||||
github: {
|
github: {
|
||||||
clientID: process.env.GITHUB_ID,
|
clientID: GITHUB_ID,
|
||||||
clientSecret: process.env.GITHUB_SECRET,
|
clientSecret: GITHUB_SECRET,
|
||||||
callbackURL: '/auth/github/callback',
|
callbackURL: '/auth/github/callback',
|
||||||
passReqToCallback: true
|
passReqToCallback: true
|
||||||
},
|
},
|
||||||
|
|
||||||
twitter: {
|
twitter: {
|
||||||
consumerKey: process.env.TWITTER_KEY,
|
consumerKey: TWITTER_KEY,
|
||||||
consumerSecret: process.env.TWITTER_SECRET,
|
consumerSecret: TWITTER_SECRET,
|
||||||
token: process.env.TWITTER_TOKEN,
|
token: TWITTER_TOKEN,
|
||||||
tokenSecret: process.env.TWITTER_TOKEN_SECRET,
|
tokenSecret: TWITTER_TOKEN_SECRET,
|
||||||
callbackURL: '/auth/twitter/callback',
|
callbackURL: '/auth/twitter/callback',
|
||||||
passReqToCallback: true
|
passReqToCallback: true
|
||||||
},
|
},
|
||||||
|
|
||||||
google: {
|
google: {
|
||||||
clientID: process.env.GOOGLE_ID,
|
clientID: GOOGLE_ID,
|
||||||
clientSecret: process.env.GOOGLE_SECRET,
|
clientSecret: GOOGLE_SECRET,
|
||||||
callbackURL: '/auth/google/callback',
|
callbackURL: '/auth/google/callback',
|
||||||
passReqToCallback: true
|
passReqToCallback: true
|
||||||
},
|
},
|
||||||
|
|
||||||
linkedin: {
|
linkedin: {
|
||||||
clientID: process.env.LINKEDIN_ID,
|
clientID: LINKEDIN_ID,
|
||||||
clientSecret: process.env.LINKEDIN_SECRET,
|
clientSecret: LINKEDIN_SECRET,
|
||||||
callbackURL: '/auth/linkedin/callback',
|
callbackURL: '/auth/linkedin/callback',
|
||||||
profileFields: ['public-profile-url'],
|
profileFields: ['public-profile-url'],
|
||||||
scope: ['r_basicprofile', 'r_emailaddress'],
|
scope: ['r_basicprofile', 'r_emailaddress'],
|
||||||
passReqToCallback: true
|
passReqToCallback: true
|
||||||
},
|
},
|
||||||
slackHook: process.env.SLACK_WEBHOOK,
|
|
||||||
|
|
||||||
cookieSecret: process.env.COOKIE_SECRET,
|
|
||||||
|
|
||||||
stripe: {
|
stripe: {
|
||||||
public: process.env.STRIPE_PUBLIC,
|
public: STRIPE_PUBLIC,
|
||||||
secret: process.env.STRIPE_SECRET
|
secret: STRIPE_SECRET
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user