Convert auth0 example to TypeScript (vercel#38087)

maxproske · balazsorban44 · web-flow · commit 55560e0c58c0 · 2022-06-29T11:00:13.000Z
Converted auth0 example over to TypeScript to match the Contribution guidelines, and got rid of the `tslib` dependency. Note: You must copy `.env.local.example` to `.env.local`, or you will encounter "TypeError: "secret" is required" at build time. ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm lint` - [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
diff --git a/examples/auth0/.env.local.example b/examples/auth0/.env.local.example
@@ -1,7 +1,7 @@
 # Public Environment variables that can be used in the browser.
-NEXT_PUBLIC_AUTH0_CLIENT_ID=
+NEXT_PUBLIC_AUTH0_CLIENT_ID=TEST
 NEXT_PUBLIC_AUTH0_SCOPE="openid profile"
-NEXT_PUBLIC_AUTH0_DOMAIN=
+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="/"
diff --git a/examples/auth0/.gitignore b/examples/auth0/.gitignore
@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/examples/auth0/README.md b/examples/auth0/README.md
@@ -4,10 +4,10 @@ This example shows how you can use `@auth0/nextjs-auth` to easily add authentica
 
 - Signing in
 - Signing out
-- Loading the user on the server side and adding it as part of SSR ([`pages/advanced/ssr-profile.js`](pages/advanced/ssr-profile.js))
-- Loading the user on the client side and using fast/cached SSR pages ([`pages/index.js`](pages/index.js))
-- API Routes which can load the current user ([`pages/api/me.js`](pages/api/me.js))
-- Using hooks to make the user available throughout the application ([`lib/user.js`](lib/user.js))
+- Loading the user on the server side and adding it as part of SSR ([`pages/advanced/ssr-profile.ts`](pages/advanced/ssr-profile.ts))
+- Loading the user on the client side and using fast/cached SSR pages ([`pages/index.ts`](pages/index.ts))
+- 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))
 
 Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/)
 
diff --git a/examples/auth0/additional.d.ts b/examples/auth0/additional.d.ts
@@ -0,0 +1,7 @@
+export {}
+
+declare global {
+  interface Window {
+    __user: any
+  }
+}
diff --git a/examples/auth0/components/header.tsx b/examples/auth0/components/header.tsx
@@ -1,6 +1,11 @@
 import Link from 'next/link'
 
-function Header({ user, loading }) {
+type HeaderProps = {
+  user?: any
+  loading: boolean
+}
+
+const Header = ({ user, loading }: HeaderProps) => {
   return (
     <header>
       <nav>
diff --git a/examples/auth0/components/layout.tsx b/examples/auth0/components/layout.tsx
@@ -1,7 +1,13 @@
 import Head from 'next/head'
 import Header from './header'
 
-function Layout({ user, loading = false, children }) {
+type LayoutProps = {
+  user?: any
+  loading?: boolean
+  children: React.ReactNode
+}
+
+const Layout = ({ user, loading = false, children }: LayoutProps) => {
   return (
     <>
       <Head>
diff --git a/examples/auth0/interfaces/index.ts b/examples/auth0/interfaces/index.ts
@@ -0,0 +1,9 @@
+export type User = {
+  email: string
+  email_verified: boolean
+  name: string
+  nickname: string
+  picture: string
+  sub: string
+  updated_at: string
+}
diff --git a/examples/auth0/lib/auth0.ts b/examples/auth0/lib/auth0.ts
@@ -1,6 +1,7 @@
 import { initAuth0 } from '@auth0/nextjs-auth0'
+import { SignInWithAuth0 } from '@auth0/nextjs-auth0/dist/instance'
 
-export default initAuth0({
+const auth0: SignInWithAuth0 = initAuth0({
   secret: process.env.SESSION_COOKIE_SECRET,
   issuerBaseURL: process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
@@ -19,6 +20,8 @@ export default initAuth0({
     scope: process.env.NEXT_PUBLIC_AUTH0_SCOPE,
   },
   session: {
-    absoluteDuration: process.env.SESSION_COOKIE_LIFETIME,
+    absoluteDuration: Number(process.env.SESSION_COOKIE_LIFETIME),
   },
 })
+
+export default auth0
diff --git a/examples/auth0/lib/user.ts b/examples/auth0/lib/user.ts
@@ -1,3 +1,4 @@
+import { UserProfile } from '@auth0/nextjs-auth0'
 import { useState, useEffect } from 'react'
 
 export async function fetchUser(cookie = '') {
@@ -21,14 +22,16 @@ export async function fetchUser(cookie = '') {
     return null
   }
 
-  const json = await res.json()
+  const json: UserProfile = await res.json()
   if (typeof window !== 'undefined') {
     window.__user = json
   }
   return json
 }
 
-export function useFetchUser({ required } = {}) {
+export function useFetchUser(
+  { required }: { required: boolean } = { required: false }
+) {
   const [loading, setLoading] = useState(
     () => !(typeof window !== 'undefined' && window.__user)
   )
diff --git a/examples/auth0/next-env.d.ts b/examples/auth0/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/auth0/package.json b/examples/auth0/package.json
@@ -6,10 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "@auth0/nextjs-auth0": "^1.4.2",
+    "@auth0/nextjs-auth0": "^1.9.1",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "tslib": "^2.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/examples/auth0/pages/about.tsx b/examples/auth0/pages/about.tsx
@@ -1,7 +1,7 @@
 import Layout from '../components/layout'
 import { useFetchUser } from '../lib/user'
 
-function About() {
+const About = () => {
   const { user, loading } = useFetchUser()
 
   return (
diff --git a/examples/auth0/pages/advanced/ssr-profile.tsx b/examples/auth0/pages/advanced/ssr-profile.tsx
@@ -1,8 +1,15 @@
+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 Layout from '../../components/layout'
+import { User } from '../../interfaces'
+
+type ProfileProps = {
+  user: User
+}
 
-function Profile({ user }) {
+const Profile = ({ user }: ProfileProps) => {
   return (
     <Layout user={user}>
       <h1>Profile</h1>
@@ -17,18 +24,14 @@ function Profile({ user }) {
   )
 }
 
-export async function getServerSideProps({ req, res }) {
+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) {
-    res.writeHead(302, {
-      Location: '/api/login',
-    })
-    res.end()
-    return
+    return { redirect: { destination: '/api/login', permanent: false } }
   }
 
   return { props: { user: session.user } }
diff --git a/examples/auth0/pages/api/callback.js b/examples/auth0/pages/api/callback.js
diff --git a/examples/auth0/pages/api/callback.ts b/examples/auth0/pages/api/callback.ts
@@ -0,0 +1,15 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import auth0 from '../../lib/auth0'
+
+const callback = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    await auth0.handleCallback(req, res)
+  } catch (error) {
+    console.error(error)
+    const errorMessage =
+      error instanceof Error ? error.message : 'Internal server error'
+    res.status(500).end(errorMessage)
+  }
+}
+
+export default callback
diff --git a/examples/auth0/pages/api/login.js b/examples/auth0/pages/api/login.js
diff --git a/examples/auth0/pages/api/login.ts b/examples/auth0/pages/api/login.ts
@@ -0,0 +1,15 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import auth0 from '../../lib/auth0'
+
+const login = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    await auth0.handleLogin(req, res)
+  } catch (error) {
+    console.error(error)
+    const errorMessage =
+      error instanceof Error ? error.message : 'Internal server error'
+    res.status(500).end(errorMessage)
+  }
+}
+
+export default login
diff --git a/examples/auth0/pages/api/logout.js b/examples/auth0/pages/api/logout.js
diff --git a/examples/auth0/pages/api/logout.ts b/examples/auth0/pages/api/logout.ts
@@ -0,0 +1,15 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import auth0 from '../../lib/auth0'
+
+const logout = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    await auth0.handleLogout(req, res)
+  } catch (error) {
+    console.error(error)
+    const errorMessage =
+      error instanceof Error ? error.message : 'Internal server error'
+    res.status(500).end(errorMessage)
+  }
+}
+
+export default logout
diff --git a/examples/auth0/pages/api/me.js b/examples/auth0/pages/api/me.js
diff --git a/examples/auth0/pages/api/me.ts b/examples/auth0/pages/api/me.ts
@@ -0,0 +1,15 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+import auth0 from '../../lib/auth0'
+
+const me = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    await auth0.handleProfile(req, res)
+  } catch (error) {
+    console.error(error)
+    const errorMessage =
+      error instanceof Error ? error.message : 'Internal server error'
+    res.status(500).end(errorMessage)
+  }
+}
+
+export default me
diff --git a/examples/auth0/pages/index.tsx b/examples/auth0/pages/index.tsx
@@ -1,7 +1,7 @@
 import Layout from '../components/layout'
 import { useFetchUser } from '../lib/user'
 
-function Home() {
+const Home = () => {
   const { user, loading } = useFetchUser()
 
   return (
diff --git a/examples/auth0/pages/profile.tsx b/examples/auth0/pages/profile.tsx
@@ -2,8 +2,13 @@
 // import auth0 from '../lib/auth0'
 import { useFetchUser } from '../lib/user'
 import Layout from '../components/layout'
+import { User } from '../interfaces'
 
-function ProfileCard({ user }) {
+type ProfileCardProps = {
+  user: User
+}
+
+const ProfileCard = ({ user }: ProfileCardProps) => {
   return (
     <>
       <h1>Profile</h1>
@@ -18,7 +23,7 @@ function ProfileCard({ user }) {
   )
 }
 
-function Profile() {
+const Profile = () => {
   const { user, loading } = useFetchUser({ required: true })
 
   return (
diff --git a/examples/auth0/tsconfig.json b/examples/auth0/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "additional.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { UserProfile } from '@auth0/nextjs-auth0'`
`1`	`2`	`import { useState, useEffect } from 'react'`
`2`	`3`
`3`	`4`	`export async function fetchUser(cookie = '') {`
`@@ -21,14 +22,16 @@ export async function fetchUser(cookie = '') {`
`21`	`22`	`return null`
`22`	`23`	`}`
`23`	`24`
`24`		`- const json = await res.json()`
	`25`	`+ const json: UserProfile = await res.json()`
`25`	`26`	`if (typeof window !== 'undefined') {`
`26`	`27`	`window.__user = json`
`27`	`28`	`}`
`28`	`29`	`return json`
`29`	`30`	`}`
`30`	`31`
`31`		`-export function useFetchUser({ required } = {}) {`
	`32`	`+export function useFetchUser(`
	`33`	`+ { required }: { required: boolean } = { required: false }`
	`34`	`+) {`
`32`	`35`	`const [loading, setLoading] = useState(`
`33`	`36`	`() => !(typeof window !== 'undefined' && window.__user)`
`34`	`37`	`)`