chore(examples): upgrade Auth0 example (#41284)

feat: [...auth0] 

Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>

Author: EarlGeorge

examples/auth0/.env.local.example

@@ -1,12 +1,5 @@
-# Public Environment variables that can be used in the browser.
-NEXT_PUBLIC_AUTH0_CLIENT_ID=TEST
-NEXT_PUBLIC_AUTH0_SCOPE="openid profile"
-NEXT_PUBLIC_AUTH0_DOMAIN="http://example.com"
-NEXT_PUBLIC_BASE_URL="http://localhost:3000"
-NEXT_PUBLIC_REDIRECT_URI="/api/callback"
-NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI="/"
-
-# Secret environment variables only available to Node.js
+AUTH0_ISSUER_BASE_URL="https://"
+AUTH0_CLIENT_ID=
 AUTH0_CLIENT_SECRET=
-SESSION_COOKIE_SECRET=
-SESSION_COOKIE_LIFETIME=7200
+AUTH0_BASE_URL="http://localhost:3000"
+AUTH0_SECRET=

examples/auth0/README.md

@@ -6,8 +6,9 @@ This example shows how you can use `@auth0/nextjs-auth` to easily add authentica
 - Signing out
 - Loading the user on the server side and adding it as part of SSR ([`pages/advanced/ssr-profile.tsx`](pages/advanced/ssr-profile.tsx))
 - Loading the user on the client side and using fast/cached SSR pages ([`pages/index.tsx`](pages/index.tsx))
-- API Routes which can load the current user ([`pages/api/me.ts`](pages/api/me.ts))
-- Using hooks to make the user available throughout the application ([`lib/user.ts`](lib/user.ts))
+- Loading the user on the client side and checking authentication CSR pages ([`pages/profile.tsx`](pages/profile.tsx))
+- Loading the user on the client side by accessing API (Serverless function) CSR pages ([`pages/advanced/api-profile.tsx`](pages/advanced/api-profile.tsx))
+- Creates route handlers under the hood that perform different parts of the authentication flow ([`pages/auth/[...auth0].tsx`](pages/auth/[...auth0].tsx))
 
 Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/)
 
@@ -50,14 +51,11 @@ cp .env.local.example .env.local
 
 Then, open `.env.local` and add the missing environment variables:
 
-- `NEXT_PUBLIC_AUTH0_DOMAIN` - Can be found in the Auth0 dashboard under `settings`. (Should be prefixed with `https://`)
-- `NEXT_PUBLIC_AUTH0_CLIENT_ID` - Can be found in the Auth0 dashboard under `settings`.
+- `AUTH0_ISSUER_BASE_URL` - Can be found in the Auth0 dashboard under `settings`. (Should be prefixed with `https://`)
+- `AUTH0_CLIENT_ID` - Can be found in the Auth0 dashboard under `settings`.
 - `AUTH0_CLIENT_SECRET` - Can be found in the Auth0 dashboard under `settings`.
-- `NEXT_PUBLIC_BASE_URL` - The base url of the application.
-- `NEXT_PUBLIC_REDIRECT_URI` - The relative url path where Auth0 redirects back to.
-- `NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI` - Where to redirect after logging out.
-- `SESSION_COOKIE_SECRET` - A unique secret used to encrypt the cookies, has to be at least 32 characters. You can use [this generator](https://generate-secret.vercel.app/32) to generate a value.
-- `SESSION_COOKIE_LIFETIME` - How long a session lasts in seconds. The default is 2 hours.
+- `AUTH0_BASE_URL` - The base url of the application.
+- `AUTH0_SECRET` - Has to be at least 32 characters. You can use [this generator](https://generate-secret.vercel.app/32) to generate a value.
 
 ## Deploy on Vercel
 

examples/auth0/components/header.tsx

@@ -20,12 +20,17 @@ const Header = ({ user, loading }: HeaderProps) => {
               <a>About</a>
             </Link>
           </li>
+          <li>
+            <Link href="/advanced/api-profile">
+              <a>API rendered profile (advanced)</a>
+            </Link>
+          </li>
           {!loading &&
             (user ? (
               <>
                 <li>
                   <Link href="/profile">
-                    <a>Client-rendered profile</a>
+                    <a>Client rendered profile</a>
                   </Link>
                 </li>
                 <li>
@@ -34,12 +39,12 @@ const Header = ({ user, loading }: HeaderProps) => {
                   </Link>
                 </li>
                 <li>
-                  <a href="/api/logout">Logout</a>
+                  <a href="/api/auth/logout">Logout</a>
                 </li>
               </>
             ) : (
               <li>
-                <a href="/api/login">Login</a>
+                <a href="/api/auth/login">Login</a>
               </li>
             ))}
         </ul>
@@ -63,8 +68,9 @@ const Header = ({ user, loading }: HeaderProps) => {
         }
         li {
           margin-right: 1rem;
+          padding-right: 2rem;
         }
-        li:nth-child(2) {
+        li:nth-child(3) {
           margin-right: auto;
         }
         a {

examples/auth0/lib/auth0.ts

@@ -0,0 +1,14 @@
+import { UserProvider } from '@auth0/nextjs-auth0'
+
+export default function App({ Component, pageProps }) {
+  // optionally pass the 'user' prop from pages that require server-side
+  // rendering to prepopulate the 'useUser' hook.
+
+  const { user } = pageProps
+
+  return (
+    <UserProvider user={user}>
+      <Component {...pageProps} />
+    </UserProvider>
+  )
+}

examples/auth0/lib/user.ts

@@ -1,16 +1,21 @@
+import { useUser } from '@auth0/nextjs-auth0'
 import Layout from '../components/layout'
-import { useFetchUser } from '../lib/user'
 
 const About = () => {
-  const { user, loading } = useFetchUser()
+  const { user, isLoading } = useUser()
 
   return (
-    <Layout user={user} loading={loading}>
+    <Layout user={user} loading={isLoading}>
       <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;
+        This project shows different ways to display Profile info: using{' '}
+        <i>Client rendered</i>, <i>Server rendered</i>, and <i>API rendered</i>
+      </p>
+      <p>
+        Navigating between this page and <i>Home</i> is always pretty fast.
+        However, when you navigate to the <i>Server rendered profile</i> page it
+        takes more time because it uses SSR to fetch the user and then to
+        display it
       </p>
     </Layout>
   )

examples/auth0/pages/_app.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import { useUser } from '@auth0/nextjs-auth0'
+import Layout from '../../components/layout'
+
+const ApiProfile = () => {
+  const { user, isLoading } = useUser()
+
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    ;(async () => {
+      const res = await fetch('/api/protected-api')
+
+      const data = await res.json()
+
+      setData(data)
+    })()
+  }, [])
+
+  return (
+    <Layout user={user} loading={isLoading}>
+      <h1>Profile</h1>
+
+      <div>
+        <h3>Public page (client rendered)</h3>
+        <p>We are fetching data on the client-side :</p>
+        <p>By making request to '/api/protected-api' serverless function</p>
+        <p>so without a valid session cookie will fail</p>
+        <p>{JSON.stringify(data)}</p>
+      </div>
+    </Layout>
+  )
+}
+
+// Public route.(CSR) also accessing API from the client-side.
+// data is not cached when redirecting between pages.
+export default ApiProfile

examples/auth0/pages/about.tsx

@@ -1,15 +1,12 @@
-import { GetServerSideProps } from 'next'
-
-// This import is only included in the server build, because it's only used by getServerSideProps
-import auth0 from '../../lib/auth0'
+import { withPageAuthRequired } from '@auth0/nextjs-auth0'
 import Layout from '../../components/layout'
 import { User } from '../../interfaces'
 
 type ProfileProps = {
   user: User
 }
 
-const Profile = ({ user }: ProfileProps) => {
+export default function Profile({ user }: ProfileProps) {
   return (
     <Layout user={user}>
       <h1>Profile</h1>
@@ -24,17 +21,6 @@ const Profile = ({ user }: ProfileProps) => {
   )
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
-  // Here you can check authentication status directly before rendering the page,
-  // however the page would be a serverless function, which is more expensive and
-  // slower than a static page with client side authentication
-  const session = await auth0.getSession(req, res)
-
-  if (!session || !session.user) {
-    return { redirect: { destination: '/api/login', permanent: false } }
-  }
-
-  return { props: { user: session.user } }
-}
-
-export default Profile
+// Protected route, checking authentication status before rendering the page.(SSR)
+// It's slower than a static page with client side authentication
+export const getServerSideProps = withPageAuthRequired()

examples/auth0/pages/advanced/api-profile.tsx

@@ -0,0 +1,3 @@
+import { handleAuth } from '@auth0/nextjs-auth0'
+
+export default handleAuth()