Refactoring to use new next-auth module

The authentication code that was part of this project has not been moved off into seperate modules, to simplify the code base and make it easier to work with.

The code is now included in `next-auth` and `next-auth-client` modules on npm. It’s faster, more elegant, contains additional bug fixes and addresses some corner-case bugs.

While the `next-auth` project includes it’s own sample implementation, this projects provides a more complete example.

Author: iaincollins

.env.default

@@ -1,17 +1,14 @@
 SERVER_URL=http://localhost:3000
-USER_DB_CONNECTION_STRING=mongodb://localhost:27017/my-database
-SESSION_DB_CONNECTION_STRING=mongodb://localhost:27017/my-database
-SESSION_SECRET=
-LOGS_SECRET=
+MONGO_URI=mongodb://localhost:27017/my-database
 FACEBOOK_ID=
 FACEBOOK_SECRET=
 GOOGLE_ID=
 GOOGLE_SECRET=
 TWITTER_KEY=
 TWITTER_SECRET=
-EMAIL_ADDRESS=example@gmail.com
+EMAIL_ADDRESS=username@gmail.com
 EMAIL_SERVER=smtp.gmail.com
 EMAIL_PORT=465
 EMAIL_SECURE=true
-EMAIL_USERNAME=example@gmail.com
+EMAIL_USERNAME=username@gmail.com
 EMAIL_PASSWORD=

AUTHENTICATION.md

@@ -8,7 +8,7 @@ You can pass them on the command line or put them in `.env` file which will be l
 
 If you want to add new oAuth providers (such as GitHub), you will need to:
 
-* Add the oauth provider configuration in passport.config.js
+* Add the oauth provider configuration in next-auth.providers.js
 * Add a field to your User model (in 'index.js') with the name of the provider
 * Configure the service to point to your website (as in the examples below)
 * Specify the environment variables at run time

components/cookies.js

@@ -6,8 +6,8 @@ import { Container, Row, Col, Nav, NavItem, Button, Form, NavLink, Collapse,
          Navbar, NavbarToggler, NavbarBrand, Modal, ModalHeader, ModalBody,
          ModalFooter, ListGroup, ListGroupItem } from 'reactstrap'
 import Signin from './signin'
-import Session from '../models/session'
-import Cookies from './cookies'
+import { NextAuth } from 'next-auth-client'
+import Cookies from 'universal-cookie'
 import Package from '../package'
 import Styles from '../css/index.scss'
 
@@ -16,6 +16,7 @@ export default class extends React.Component {
   static propTypes() {
     return {
       session: React.PropTypes.object.isRequired,
+      providers: React.PropTypes.object.isRequired,
       children: React.PropTypes.object.isRequired,
       fluid: React.PropTypes.boolean
     }
@@ -33,8 +34,11 @@ export default class extends React.Component {
   toggleModal(e) {
     if (e) e.preventDefault()
 
-    if (this.state.modal !== true)
-      Cookies.save('redirect_url', window.location.pathname)
+    // Save current URL so user is redirected back here after signing in
+    if (this.state.modal !== true) {
+      const cookies = new Cookies()
+      cookies.set('redirect_url', window.location.pathname, { path: '/' })
+    }
 
     this.setState({
       modal: !this.state.modal
@@ -102,7 +106,7 @@ export default class extends React.Component {
             <span className="ml-2">&copy; {new Date().getYear() + 1900}.</span>
           </p>
         </Container>
-        <SigninModal modal={this.state.modal} toggleModal={this.toggleModal} session={this.props.session}/>
+        <SigninModal modal={this.state.modal} toggleModal={this.toggleModal} session={this.props.session} providers={this.props.providers}/>
       </React.Fragment>
     )
   }
@@ -164,7 +168,12 @@ export class UserMenu extends React.Component {
 
    async handleSignoutSubmit(event) {
      event.preventDefault()
-     await Session.signout()
+     
+     // Save current URL so user is redirected back here after signing out
+     const cookies = new Cookies()
+     cookies.set('redirect_url', window.location.pathname, { path: '/' })
+
+     await NextAuth.signout()
      Router.push('/')
    }
 
@@ -209,7 +218,7 @@ export class UserMenu extends React.Component {
               * so that users without JavaScript are also redirected to the page
               * they were on before they signed in.
               **/}
-            <a href="/auth/signin?redirect=/" className="btn btn-outline-primary" onClick={this.props.toggleModal}><span className="icon ion-md-log-in mr-1"></span> Sign up / Sign in</a>
+            <a href="/auth?redirect=/" className="btn btn-outline-primary" onClick={this.props.toggleModal}><span className="icon ion-md-log-in mr-1"></span> Sign up / Sign in</a>
           </NavItem>
         </Nav>
       )
@@ -239,7 +248,7 @@ export class SigninModal extends React.Component {
       <Modal isOpen={this.props.modal} toggle={this.props.toggleModal} style={{maxWidth: 700}}>
         <ModalHeader>Sign up / Sign in</ModalHeader>
         <ModalBody style={{padding: '1em 2em'}}>
-          <Signin session={this.props.session}/>
+          <Signin session={this.props.session} providers={this.props.providers}/>
         </ModalBody>
       </Modal>
     )

components/layout.js

@@ -1,19 +1,30 @@
 import React from 'react'
 import Layout from '../components/layout'
-import Session from '../models/session'
+import { NextAuth } from 'next-auth-client'
 
 export default class extends React.Component {
   // Expose session to all pages
   static async getInitialProps({req}) {
+    // Export this.props.session to all pages
+    const session = await NextAuth.init({req})
+    
+    // If the user is not already signed in, get currently configured providers.
+    // This project uses them in the sign in dialog, which is embedded on all
+    // pages when browsing the site but not signed in.
+    //
+    // NB: As an improvement, this could alternatively be called on modal load.
+    const providers = (!session.user) ? await NextAuth.providers({req}) : {}
+    
     return {
-      session: await Session.getSession({req}),
-      lang: 'en'
+      session: session,
+      providers: providers,
+      lang: 'en' // Sets a lang property for accessibility
     }
   }
 
   adminAcccessOnly() {
     return (
-      <Layout session={this.props.session} navmenu={false}>
+      <Layout {...this.props} navmenu={false}>
         <div className="text-center pt-5 pb-5">
           <h1 className="display-4 mb-5">Access Denied</h1>
           <p className="lead">You must be signed in as an administrator to access this page.</p>

components/page.js

@@ -1,14 +1,17 @@
 import React from 'react'
 import Router from 'next/router'
 import { Row, Col, Form, Input, Label, Button } from 'reactstrap'
-import Session from '../models/session'
+import Cookies from 'universal-cookie'
+import { NextAuth } from 'next-auth-client'
 
 export default class extends React.Component {
+  
   constructor(props) {
     super(props)
     this.state = {
       email: '',
-      session: this.props.session
+      session: this.props.session,
+      providers: this.props.providers
     }
     this.handleSubmit = this.handleSubmit.bind(this)
     this.handleEmailChange = this.handleEmailChange.bind(this)
@@ -17,20 +20,25 @@ export default class extends React.Component {
 
   handleEmailChange(event) {
     this.setState({
-      email: event.target.value.trim(),
-      session: this.state.session
+      email: event.target.value.trim()
     })
   }
 
   handleSubmit(event) {
     event.preventDefault()
-    Session.signin(this.state.email)
+    
+    if (!this.state.email) return
+
+    // Save current URL so user is redirected back here after signing in
+    const cookies = new Cookies()
+    cookies.set('redirect_url', window.location.pathname, { path: '/' })
+
+    NextAuth.signin(this.state.email)
     .then(() => {
-      Router.push('/auth/check-email')
+      Router.push(`/auth/check-email?email=${this.state.email}`)
     })
     .catch(err => {
-      // @FIXME Handle error
-      console.log(err)
+      Router.push(`/auth/error?action=signin&type=email&email=${this.state.email}`)
     })
   }
 
@@ -40,12 +48,10 @@ export default class extends React.Component {
     } else {
       return (
         <React.Fragment>
-          <p className="text-center" style={{marginTop: 10, marginBottom: 30}}>If you don't have an account, one will be created when you sign in.</p>
+          <p className="text-center" style={{marginTop: 10, marginBottom: 30}}>{`If you don't have an account, one will be created when you sign in.`}</p>
           <Row>
             <Col xs={12} md={6}>
-              <p><a className="btn btn-outline-dark btn-block btn-facebook" href="/auth/oauth/facebook">Sign in with Facebook</a></p>
-              <p><a className="btn btn-outline-dark btn-block btn-google" href="/auth/oauth/google">Sign in with Google</a></p>
-              <p><a className="btn btn-outline-dark btn-block btn-twitter" href="/auth/oauth/twitter">Sign in with Twitter</a></p>
+              <SignInButtons providers={this.props.providers}/>
             </Col>
             <Col xs={12} md={6}>
               <Form id="signin" method="post" action="/auth/email/signin" onSubmit={this.handleSubmit}>
@@ -64,4 +70,24 @@ export default class extends React.Component {
       )
     }
   }
+}
+
+export class SignInButtons extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        {
+          Object.keys(this.props.providers).map((provider, i) => {
+            return (
+              <p key={i}>
+                <a className="btn btn-block btn-outline-secondary" href={this.props.providers[provider].signin}>
+                  Sign in with {provider}
+                </a>
+              </p>
+              )              
+          })
+        }
+      </React.Fragment>
+    )
+  }
 }