examples: Add new NextAuth.js example (#56914)
This commit is contained in:
Lee Robinson
GitHub
parent
c5b5b1e3a3
commit
4225da8cba
12 changed files with 199 additions and 0 deletions
3
examples/auth/.env.example
Normal file
3
examples/auth/.env.example
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
AUTH_GITHUB_ID=
|
||||
AUTH_GITHUB_SECRET=
|
||||
AUTH_SECRET= # https://generate-secret.vercel.app/32
|
||||
35
examples/auth/.gitignore
vendored
Normal file
35
examples/auth/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
31
examples/auth/README.md
Normal file
31
examples/auth/README.md
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
# Authentication
|
||||
|
||||
This is an example using NextAuth.js for authentication.
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
||||
[](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/auth&project-name=auth&repository-name=auth)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io), or [Bun](https://bun.sh/docs/cli/bunx) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example auth
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn create next-app --example auth
|
||||
```
|
||||
|
||||
```bash
|
||||
pnpm create next-app --example auth
|
||||
```
|
||||
|
||||
```bash
|
||||
bunx create-next-app --example auth
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
||||
2
examples/auth/app/api/auth/[...nextauth]/route.ts
Normal file
2
examples/auth/app/api/auth/[...nextauth]/route.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { GET, POST } from '@/auth'
|
||||
export const runtime = 'edge'
|
||||
BIN
examples/auth/app/favicon.ico
Normal file
BIN
examples/auth/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
5
examples/auth/app/globals.css
Normal file
5
examples/auth/app/globals.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
18
examples/auth/app/layout.tsx
Normal file
18
examples/auth/app/layout.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import './globals.css'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Next.js Authentication',
|
||||
description: 'Example using NextAuth.js',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
41
examples/auth/app/page.tsx
Normal file
41
examples/auth/app/page.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { auth, signIn, signOut } from '@/auth'
|
||||
|
||||
function SignIn() {
|
||||
return (
|
||||
<form
|
||||
action={async () => {
|
||||
'use server'
|
||||
await signIn('github')
|
||||
}}
|
||||
>
|
||||
<p>You are not logged in</p>
|
||||
<button type="submit">Sign in with GitHub</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function SignOut({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<form
|
||||
action={async () => {
|
||||
'use server'
|
||||
await signOut()
|
||||
}}
|
||||
>
|
||||
<p>{children}</p>
|
||||
<button type="submit">Sign out</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
let session = await auth()
|
||||
let user = session?.user?.email
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h1>Home</h1>
|
||||
<div>{user ? <SignOut>{`Welcome ${user}`}</SignOut> : <SignIn />}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
11
examples/auth/auth.ts
Normal file
11
examples/auth/auth.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import NextAuth from 'next-auth'
|
||||
import GitHub from 'next-auth/providers/github'
|
||||
|
||||
export const {
|
||||
handlers: { GET, POST },
|
||||
auth,
|
||||
signIn,
|
||||
signOut,
|
||||
} = NextAuth({
|
||||
providers: [GitHub],
|
||||
})
|
||||
6
examples/auth/middleware.ts
Normal file
6
examples/auth/middleware.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export { auth as default } from './auth'
|
||||
|
||||
// Optionally, don't invoke Middleware on some paths
|
||||
export const config = {
|
||||
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
|
||||
}
|
||||
20
examples/auth/package.json
Normal file
20
examples/auth/package.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
"next-auth": "^5.0.0-beta.4",
|
||||
"react": "latest",
|
||||
"react-dom": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "latest",
|
||||
"@types/react": "latest",
|
||||
"@types/react-dom": "latest",
|
||||
"typescript": "latest"
|
||||
}
|
||||
}
|
||||
27
examples/auth/tsconfig.json
Normal file
27
examples/auth/tsconfig.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in a new issue