Improving page loading performance

Now only calls NextAuth.providers() when sign in modal is triggered - or rendering sign in page.

This improves page loading time by removing an ajax call to /auth/providers that was being triggered on each page load.

It also includes some minor improves to how how props are loaded.

Resolves #64

Author: iaincollins

components/layout.js

@@ -26,12 +26,13 @@ export default class extends React.Component {
     super(props)
     this.state = {
       navOpen: false,
-      modal: false
+      modal: false,
+      providers: null
     }
     this.toggleModal = this.toggleModal.bind(this)
   }
 
-  toggleModal(e) {
+  async toggleModal(e) {
     if (e) e.preventDefault()
 
     // Save current URL so user is redirected back here after signing in
@@ -41,6 +42,7 @@ export default class extends React.Component {
     }
 
     this.setState({
+      providers: this.state.providers || await NextAuth.providers(),
       modal: !this.state.modal
     })
   }
@@ -106,7 +108,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} providers={this.props.providers}/>
+        <SigninModal modal={this.state.modal} toggleModal={this.toggleModal} session={this.props.session} providers={this.state.providers}/>
       </React.Fragment>
     )
   }
@@ -244,6 +246,8 @@ export class AdminMenuItem extends React.Component {
 
 export class SigninModal extends React.Component {
   render() {
+    if (this.props.providers === null) return null
+    
     return (
       <Modal isOpen={this.props.modal} toggle={this.props.toggleModal} style={{maxWidth: 700}}>
         <ModalHeader>Sign up / Sign in</ModalHeader>

components/page.js

@@ -3,22 +3,11 @@ import Layout from '../components/layout'
 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: session,
-      providers: providers,
-      lang: 'en' // Sets a lang property for accessibility
+      session: await NextAuth.init({req}),// Add this.props.session to all pages
+      lang: 'en'// Add a lang property for accessibility
     }
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-starter",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "description": "A starter Next.js project with email and oAuth authentication",
   "author": "Iain Collins <[email protected]>",
   "license": "ISC",

pages/auth/check-email.js

@@ -7,7 +7,8 @@ import { NextAuth } from 'next-auth-client'
 export default class extends Page {
 
   static async getInitialProps({req, res, query}) {
-    const session = await NextAuth.init({force: true, req: req})
+    let props = await super.getInitialProps({req})
+    props.session = await NextAuth.init({force: true, req: req})
 
     // If signed in already, instead of displaying message send to callback page
     // which should redirect them to whatever page it normally sends clients to
@@ -19,11 +20,9 @@ export default class extends Page {
       }
     }
 
-    return {
-      session: session,
-      providers: await NextAuth.providers({req}),      
-      email: query.email
-    }
+    props.email = query.email
+    
+    return props
   }
 
   render() {

pages/auth/index.js

@@ -12,11 +12,12 @@ import SignIn from '../../components/signin'
 export default class extends Page {
 
   static async getInitialProps({req, res, query}) {
-    const session = await NextAuth.init({force: true, req: req})
-    const providers = await NextAuth.providers({req})
-
+    let props = await super.getInitialProps({req})
+    props.session = await NextAuth.init({force: true, req: req})
+    props.providers = await NextAuth.providers({req})
+    
     // If signed in already, redirect to account management page.
-    if (session.user) {
+    if (props.session.user) {
       if (req) {
         res.redirect('/account')
       } else {
@@ -30,11 +31,7 @@ export default class extends Page {
       cookies.set('redirect_url', query.redirect, { path: '/' })
     }
 
-    return {
-      session: session,
-      providers: providers,
-      providers: await NextAuth.providers({req})
-    }
+    return props
   }
 
   render() {