Use Github OAuth as your SSO provider with React

Copycopy code to clipboard
import React from 'react';
import propTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import loginTab from '../../util/openWindow';
import * as userActions from '../redux/userActions';
import { STATE_KEY as USER_STATE_KEY } from '../redux/userReducer';

class AppMenu extends React.Component {

  handleLogIn(e, {name}) {
    const msg = loginTab('/auth/github');
    msg.then(user => {
      this.props.userActions.injectUser(user);
    });
  }

  handleLogOut(e, {name}) {
    this.props.userActions.logoutUser();
  }

  render() {
    const {isAuthenticated, currentUser} = this.props;

    const loginButton =  isAuthenticated ?
      <button onClick={this.handleLogOut.bind(this)}>Sign out ({currentUser.username})</button>
      : 
      <button onClick={this.handleLogIn.bind(this)}>Sign in</button>

    return (
      <div>
      {loginButton}
      </div>
    )
  }
}

AppMenu.PropTypes = {
  isAuthenticated: propTypes.bool,
  currentUser: propTypes.object
};

const mapStateToProps = state => ({
  isAuthenticated: state[USER_STATE_KEY].isAuthenticated,
  currentUser: state[USER_STATE_KEY].user
});
const mapDispatchToProps = dispatch => ({
  userActions: bindActionCreators(userActions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(AppMenu);

Copycopy code to clipboard
import * as ActionTypes from './userActionTypes';

export function injectUser(user = {}) {
  return {
    type: ActionTypes.INJECT,
    payload: {
      user
    }
  };
};

export function logoutUser() {
  return {
    type: ActionTypes.LOGOUT
  }
};

Copycopy code to clipboard
export const INJECT = 'INJECT_USER';
export const LOGOUT = 'LOGOUT_USER';

Copycopy code to clipboard
import * as actionTypes from './userActionTypes';

export const STATE_KEY = 'currentUser';

export const initialState = {
  isAuthenticated: false,
  user: {}
};

export default function userReducer(state = initialState, action = {}) {
  const {type, payload} = action;

  switch(type) {
    case actionTypes.INJECT:
      return {
        ...state,
        isAuthenticated: true,
        user: payload.user
      };

    case actionTypes.LOGOUT:
      return {
        ...initialState
      };

    default:
      return state;
  }
};

Copycopy code to clipboard
// From https://gist.github.com/gauravtiwari/2ae9f44aee281c759fe5a66d5c2721a2
// By https://gist.github.com/gauravtiwari

/* global window */

const loginTab = (myUrl) => {
  const windowArea = {
    width: Math.floor(window.outerWidth * 0.8),
    height: Math.floor(window.outerHeight * 0.5),
  };

  if (windowArea.width < 1000) { windowArea.width = 1000; }
  if (windowArea.height < 630) { windowArea.height = 630; }
  windowArea.left = Math.floor(window.screenX + ((window.outerWidth - windowArea.width) / 2));
  windowArea.top = Math.floor(window.screenY + ((window.outerHeight - windowArea.height) / 8));

  const sep = (myUrl.indexOf('?') !== -1) ? '&' : '?';
  const url = `${myUrl}${sep}`;
  const windowOpts = `toolbar=0,scrollbars=1,status=1,resizable=1,location=1,menuBar=0,
    width=${windowArea.width},height=${windowArea.height},
    left=${windowArea.left},top=${windowArea.top}`;

  const authWindow = window.open(url, '_blank', windowOpts);
  // Create IE + others compatible event handler
  const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
  const eventer = window[eventMethod];
  const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';

  // Listen to message from child window
  const authPromise = new Promise((resolve, reject) => {
    eventer(messageEvent, (msg) => {
      if (!~msg.origin.indexOf(`${window.location.protocol}//${window.location.host}`)) {
        authWindow.close();
        reject('Not allowed');
      }

      if (msg.data.payload) {
        try {
          resolve(JSON.parse(msg.data.payload));
        }
        catch(e) {
          resolve(msg.data.payload);
        }
        finally {
          authWindow.close();
        }
      } else {
        authWindow.close();
        reject('Unauthorised');
      }
    }, false);
  });

  return authPromise;
};

export default loginTab;

Copycopy code to clipboard
const Router = require('koa-router');
const passport = require('koa-passport');
  
const isAuthenticated = (ctx, next) => {
  return ctx.isAuthenticated() ? next() : ctx.status = 403;
};

const router = new Router();

router.get('/auth/github',
  passport.authenticate('github')
);

// Custom handler that returns the authenticated user object
router.get('/auth/github/callback', function(ctx) {
  return passport.authenticate('github', async function(err, user, info) {
    await ctx.logIn(user);
    await ctx.render('success', {user: JSON.stringify(ctx.state.user)});
  })(ctx);
});

module.exports = router;

Copycopy code to clipboard
<!doctype html>
<html lang="en">
<head>
  <title>Login successful</title>
</head>
<body>
  <h1>Success</h1>
  <p>You are authenticated...</p>
</body>
<script>
  document.body.onload = function() {
    var injectedUser = <%- JSON.stringify(user) %>;
    window.opener.postMessage(
      {
        payload: injectedUser,
        status: 'success'
      },
      window.opener.location
    );
  };
</script>
</html>