vercel · lfades · Mar 31, 2020 · Mar 13, 2020 · Mar 13, 2020 · Mar 13, 2020
diff --git a/examples/auth0/README.md b/examples/auth0/README.md
@@ -95,6 +95,6 @@ This sample tries to cover a few topics:
 - Signing in
 - Signing out
 - Loading the user on the server side and adding it as part of SSR (`/pages/advanced/ssr-profile.js`)
-- Loading the user on the client side and using fast/cached SSR pages (`/pages/index.js`)
+- Loading the user on the client side and using fast/cached SSR pages (`/pages/profile.js`)
 - API Routes which can load the current user (`/pages/api/me.js`)
-- Using hooks to make the user available throughout the application (`/lib/user.js`)
+- Using Context API and hooks to make the user available throughout the application (`/lib/user.js`, `/lib/authProvider.js`)
diff --git a/examples/auth0/components/header.js b/examples/auth0/components/header.js
@@ -1,46 +1,58 @@
 import Link from 'next/link'
+import { AuthContext } from '../lib/authProvider'
+import { useContext } from 'react'
+
+function Header({ SSRUser }) {
+  let { user } = useContext(AuthContext)
+  if (SSRUser) {
+    user = SSRUser
+  }
+
+  const authHeader = () => (
+    <>
+      <li>
+        <Link href="/profile">
+          <a>Client-rendered profile</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/advanced/ssr-profile">
+          <a>Server rendered profile (advanced)</a>
+        </Link>
+      </li>
+      <li>
+        <a href="/api/logout">Logout</a>
+      </li>
+    </>
+  )
+
+  const unAuthHeader = () => (
+    <>
+      <>
+        <li>
+          <Link href="/">
+            <a>Home</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/about">
+            <a>About</a>
+          </Link>
+        </li>
+      </>
+      <li>
+        <a href="/api/login">Login</a>
+      </li>
+    </>
+  )
 
-function Header({ user, loading }) {
   return (
     <header>
       <nav>
-        <ul>
-          <li>
-            <Link href="/">
-              <a>Home</a>
-            </Link>
-          </li>
-          <li>
-            <Link href="/about">
-              <a>About</a>
-            </Link>
-          </li>
-          {!loading &&
-            (user ? (
-              <>
-                <li>
-                  <Link href="/profile">
-                    <a>Client-rendered profile</a>
-                  </Link>
-                </li>
-                <li>
-                  <Link href="/advanced/ssr-profile">
-                    <a>Server rendered profile (advanced)</a>
-                  </Link>
-                </li>
-                <li>
-                  <a href="/api/logout">Logout</a>
-                </li>
-              </>
-            ) : (
-              <li>
-                <a href="/api/login">Login</a>
-              </li>
-            ))}
-        </ul>
+        <ul>{user ? authHeader() : unAuthHeader()}</ul>
       </nav>
 
-      <style jsx>{`
+      <style jsx global>{`
         header {
           padding: 0.2rem;
           color: #fff;

diff --git a/examples/auth0/components/layout.js b/examples/auth0/components/layout.js
@@ -1,33 +1,31 @@
 import Head from 'next/head'
 import Header from './header'
 
-function Layout({ user, loading = false, children }) {
+function Layout({ children }) {
   return (
     <>
       <Head>
         <title>Next.js with Auth0</title>
       </Head>
-
-      <Header user={user} loading={loading} />
-
+      <Header />
       <main>
         <div className="container">{children}</div>
       </main>
-
-      <style jsx>{`
-        .container {
-          max-width: 42rem;
-          margin: 1.5rem auto;
-        }
-      `}</style>
-      <style jsx global>{`
-        body {
-          margin: 0;
-          color: #333;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-            Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        }
-      `}</style>
+      <style jsx global>
+        {`
+          body {
+            margin: 0;
+            color: #333;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+              sans-serif;
+          }
+          .container {
+            max-width: 42rem;
+            margin: 1.5rem auto;
+          }
+        `}
+      </style>
     </>
   )
 }

diff --git a/examples/auth0/components/profile-card.js b/examples/auth0/components/profile-card.js
@@ -0,0 +1,24 @@
+import { useContext } from 'react'
+import { AuthContext } from '../lib/authProvider'
+
+function ProfileCard({ SSRUser }) {
+  let { user, loading } = useContext(AuthContext)
+  if (SSRUser) {
+    user = SSRUser
+  }
+  if (loading) {
+    return <p>loading</p>
+  }
+  if (!user) {
+    return <></>
+  }
+  return (
+    <>
+      <img src={user.picture} alt="user picture" />
+      <p>nickname: {user.nickname}</p>
+      <p>name: {user.name}</p>
+    </>
+  )
+}
+
+export default ProfileCard
diff --git a/examples/auth0/lib/authProvider.js b/examples/auth0/lib/authProvider.js
@@ -0,0 +1,14 @@
+import { createContext } from 'react'
+import { useFetchUser } from '../lib/user'
+export const AuthContext = createContext({ user: null, loading: false })
+
+function AuthProvider({ children }) {
+  const { user, loading } = useFetchUser()
+  return (
+    <AuthContext.Provider value={{ user, loading }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export default AuthProvider
diff --git a/examples/auth0/lib/user.js b/examples/auth0/lib/user.js
@@ -5,39 +5,26 @@ export async function fetchUser(cookie = '') {
   if (typeof window !== 'undefined' && window.__user) {
     return window.__user
   }
-
-  const res = await fetch(
-    '/api/me',
-    cookie
-      ? {
-          headers: {
-            cookie,
-          },
-        }
-      : {}
-  )
-
-  if (!res.ok) {
+  const response = await fetch('/api/me', cookie ? { headers: { cookie } } : {})
+  if (!response.ok) {
     delete window.__user
     return null
   }
-
-  const json = await res.json()
+  const userData = await response.json()
   if (typeof window !== 'undefined') {
-    window.__user = json
+    window.__user = userData
   }
-  return json
+  return userData
 }
 
-export function useFetchUser({ required } = {}) {
+export function useFetchUser({ required = false } = {}) {
   const [loading, setLoading] = useState(
     () => !(typeof window !== 'undefined' && window.__user)
   )
   const [user, setUser] = useState(() => {
     if (typeof window === 'undefined') {
       return null
     }
-
     return window.__user || null
   })
 

diff --git a/examples/auth0/pages/about.js b/examples/auth0/pages/about.js
@@ -1,20 +1,19 @@
-import React from 'react'
-
 import Layout from '../components/layout'
-import { useFetchUser } from '../lib/user'
+import AuthProvider from '../lib/authProvider'
 
 function About() {
-  const { user, loading } = useFetchUser()
-
   return (
-    <Layout user={user} loading={loading}>
-      <h1>About</h1>
-      <p>
-        This is the about page, navigating between this page and <i>Home</i> is
-        always pretty fast. However, when you navigate to the <i>Profile</i>{' '}
-        page it takes more time because it uses SSR to fetch the user first;
-      </p>
-    </Layout>
+    <AuthProvider>
+      <Layout>
+        <h1>About</h1>
+        <p>
+          This is the about page, navigating between this page and <i>Home</i>{' '}
+          is always pretty fast. However, when you navigate to the{' '}
+          <i>Profile</i> page it takes more time because it uses SSR to fetch
+          the user first;
+        </p>
+      </Layout>
+    </AuthProvider>
   )
 }
 

@@ -1,60 +1,62 @@
-import React from 'react'
-
-// This import is only needed when checking authentication status directly from getInitialProps
+// This import is only needed when checking authentication status directly from getServerSideProps
 import auth0 from '../../lib/auth0'
-import { fetchUser } from '../../lib/user'
-import Layout from '../../components/layout'
+import ProfileCard from '../../components/profile-card'
+import Header from '../../components/header'
+import Head from 'next/head'
 
-function Profile({ user }) {
+function SSRProfile({ user }) {
   return (
-    <Layout user={user}>
-      <h1>Profile</h1>
-
-      <div>
-        <h3>Profile (server rendered)</h3>
-        <img src={user.picture} alt="user picture" />
-        <p>nickname: {user.nickname}</p>
-        <p>name: {user.name}</p>
-      </div>
-    </Layout>
+    <>
+      <Head>
+        <title>Next.js with Auth0</title>
+      </Head>
+      <Header SSRUser={user} />
+      <main>
+        <div className="container">
+          <h1>Profile (server rendered)</h1>
+          <ProfileCard SSRUser={user} />
+        </div>
+      </main>
+      <style jsx global>
+        {`
+          body {
+            margin: 0;
+            color: #333;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+              sans-serif;
+          }
+
+          .container {
+            max-width: 42rem;
+            margin: 1.5rem auto;
+          }
+        `}
+      </style>
+    </>
   )
 }
 
-Profile.getInitialProps = async ({ req, res }) => {
+export async function getServerSideProps({ req, res }) {
   // On the server-side you can check authentication status directly
   // However in general you might want to call API Routes to fetch data
   // An example of directly checking authentication:
-  if (typeof window === 'undefined') {
-    const { user } = await auth0.getSession(req)
-    if (!user) {
-      res.writeHead(302, {
-        Location: '/api/login',
-      })
-      res.end()
-      return
-    }
-    return { user }
+  const session = await auth0.getSession(req)
+  if (!session || !session.user) {
+    res.writeHead(302, { Location: '/api/login' })
+    res.end()
+    return
   }
+  return { props: { user: session.user } }
 
   // To do fetches to API routes you can pass the cookie coming from the incoming request on to the fetch
   // so that a request to the API is done on behalf of the user
   // keep in mind that server-side fetches need a full URL, meaning that the full url has to be provided to the application
-  const cookie = req && req.headers.cookie
-  const user = await fetchUser(cookie)
-
-  // A redirect is needed to authenticate to Auth0
-  if (!user) {
-    if (typeof window === 'undefined') {
-      res.writeHead(302, {
-        Location: '/api/login',
-      })
-      return res.end()
-    }
-
-    window.location.href = '/api/login'
-  }
-
-  return { user }
+  // Exmaple:
+  /*
+    const cookie = req && req.headers.cookie
+    const response = await fetchSomeAPIRoute(cookie)
+  */
 }
 
-export default Profile
+export default SSRProfile
diff --git a/examples/auth0/pages/api/callback.js b/examples/auth0/pages/api/callback.js
@@ -2,7 +2,7 @@ import auth0 from '../../lib/auth0'
 
 export default async function callback(req, res) {
   try {
-    await auth0.handleCallback(req, res, { redirectTo: '/' })
+    await auth0.handleCallback(req, res, { redirectTo: '/profile' })
   } catch (error) {
     console.error(error)
     res.status(error.status || 500).end(error.message)