Fix for email authentication and error handling

Fixing bug with email link page introduced in 4.5.0 and improving new error page formatting.
iaincollins · Jan 27, 2018 · cadc19c · cadc19c
1 parent b276629
commit cadc19c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nextjs-starter",
-  "version": "4.5.2",
+  "version": "4.5.3",
   "description": "A starter Next.js project with email and oAuth authentication",
   "author": "Iain Collins <me@iaincollins.com>",
   "license": "ISC",

diff --git a/pages/auth/check-email.js b/pages/auth/check-email.js
@@ -12,7 +12,7 @@ export default class extends Page {
 
     // If signed in already, instead of displaying message send to callback page
     // which should redirect them to whatever page it normally sends clients to
-    if (session.user) {
+    if (props.session.user) {
       if (req) {
         res.redirect('/auth/callback')
       } else {

diff --git a/pages/auth/error.js b/pages/auth/error.js
@@ -1,24 +1,22 @@
 import React from 'react'
-import Head from 'next/head'
 import Link from 'next/link'
+import Page from '../../components/page'
+import Layout from '../../components/layout'
 
-export default class extends React.Component {
+export default class extends Page {
 
-  static async getInitialProps({query}) {
-    return {
-      action: query.action || null,
-      type: query.type || null,
-      service: query.service || null
-    }
+  static async getInitialProps({req, query}) {
+    let props = await super.getInitialProps({req})    
+    props.action = query.action || null
+    props.type = query.type || null
+    props.service = query.service || null
+    return props
   }
 
   render() {
     if (this.props.action == 'signin' && this.props.type == 'oauth' && this.props.service) {
       return(
-        <div className="container">
-          <Head>
-            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossOrigin="anonymous"/>
-          </Head>
+        <Layout {...this.props} navmenu={false}>
           <div className="text-center">
             <h1 className="display-4 mt-5 mb-3">Unable to sign in with {this.props.service}</h1>
             <p className="lead">An account associated with your email address already exists.</p>
@@ -39,35 +37,29 @@ export default class extends React.Component {
               </div>
             </div>
           </div>
-        </div>
+        </Layout>
       )
     } else if (this.props.action == 'signin' && this.props.type == 'token-invalid') {
       return(
-        <div className="container">
-          <Head>
-            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossOrigin="anonymous"/>
-          </Head>
+        <Layout {...this.props} navmenu={false}>
           <div className="text-center">
             <h1 className="display-4 mt-5 mb-2">Sign in link not valid</h1>
             <p className="lead">The sign in link you used is no longer valid.</p>
             <p className="lead"><Link href="/auth"><a>Get a new sign in link.</a></Link></p>
           </div>
-        </div>
+        </Layout>
       )
     } else {
       return(
-        <div className="container">
-          <Head>
-            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossOrigin="anonymous"/>
-          </Head>
+        <Layout {...this.props} navmenu={false}>
           <div className="text-center">
             <h1 className="display-4 mt-5">Error signing in</h1>
             <p className="lead">An error occured while trying to sign in.</p>
             <p>
               <Link href="/"><a>Home</a></Link>
             </p>
           </div>
-        </div>
+        </Layout>
       )
     }
   }