├── .gitignore
├── README.md
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   └── auth
    │   │   └── [...nextauth].js
    └── index.js
├── postcss.config.js
├── prisma
    ├── .env
    └── schema.prisma
├── public
    ├── favicon.ico
    └── vercel.svg
├── styles
    └── tailwind.css
├── tailwind.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Auth in Next.js
2 | 
3 | This demo uses `next-auth` to add authentication to this Next.js app. We used the GitHub provider and added in the Prisma 2 provider to allow users/sessions/accounts to be stored in a Postgres database rather than stricly within the JWT (JSON Web Token).
4 | 
5 | - Video: Coming soon!
6 | - JWT: https://jwt.io/
7 | - NextAuth: https://next-auth.js.org/
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "auth-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@prisma/client": "^2.8.0",
12 |     "next": "9.5.3",
13 |     "next-auth": "^3.1.0",
14 |     "react": "16.13.1",
15 |     "react-dom": "16.13.1"
16 |   },
17 |   "devDependencies": {
18 |     "@prisma/cli": "^2.8.0",
19 |     "postcss-preset-env": "^6.7.0",
20 |     "tailwindcss": "^1.8.10"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import { Provider } from "next-auth/client";
 2 | import "../styles/tailwind.css";
 3 | 
 4 | function MyApp({ Component, pageProps }) {
 5 |   return (
 6 |     <Provider session={pageProps.session}>
 7 |       <Component {...pageProps} />
 8 |     </Provider>
 9 |   );
10 | }
11 | 
12 | export default MyApp;
13 | 


--------------------------------------------------------------------------------
/pages/api/auth/[...nextauth].js:
--------------------------------------------------------------------------------
 1 | import NextAuth from "next-auth";
 2 | import Providers from "next-auth/providers";
 3 | import Adapters from "next-auth/adapters";
 4 | import { PrismaClient } from "@prisma/client";
 5 | 
 6 | const prisma = new PrismaClient();
 7 | 
 8 | export default (req, res) =>
 9 |   NextAuth(req, res, {
10 |     providers: [
11 |       Providers.GitHub({
12 |         clientId: process.env.GITHUB_CLIENT_ID,
13 |         clientSecret: process.env.GITHUB_CLIENT_SECRET,
14 |       }),
15 |     ],
16 |     debug: process.env.NODE_ENV === "development",
17 |     secret: process.env.AUTH_SECRET,
18 |     jwt: {
19 |       secret: process.env.JWT_SECRET,
20 |     },
21 |     adapter: Adapters.Prisma.Adapter({ prisma }),
22 |   });
23 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import { signIn, signOut, useSession } from "next-auth/client";
 3 | 
 4 | export default function Home() {
 5 |   const [session] = useSession();
 6 | 
 7 |   return (
 8 |     <>
 9 |       <Head>
10 |         <title>Auth Demo</title>
11 |       </Head>
12 | 
13 |       <nav>
14 |         {!session ? (
15 |           <button onClick={() => signIn("github")}>GitHub Connect</button>
16 |         ) : (
17 |           <>
18 |             <span>{session.user.name}</span>
19 |             {session.user.image && (
20 |               <img
21 |                 src={session.user.image}
22 |                 style={{ width: "25px", borderRadius: "50%" }}
23 |               />
24 |             )}
25 |             <button onClick={signOut}>Sign Out</button>
26 |           </>
27 |         )}
28 |       </nav>
29 |     </>
30 |   );
31 | }
32 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: ["tailwindcss", "postcss-preset-env"],
3 | };
4 | 


--------------------------------------------------------------------------------
/prisma/.env:
--------------------------------------------------------------------------------
1 | # Environment variables declared in this file are automatically made available to Prisma.
2 | # See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
3 | 
4 | # Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
5 | # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
6 | 
7 | DATABASE_URL="postgresql://postgres:password@127.0.0.1/next-auth-video"


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | generator client {
 2 |   provider = "prisma-client-js"
 3 | }
 4 | 
 5 | datasource db {
 6 |   provider = "postgresql"
 7 |   url      = env("DATABASE_URL")
 8 | }
 9 | 
10 | model Account {
11 |   id                 Int       @id @default(autoincrement())
12 |   compoundId         String    @unique @map(name: "compound_id")
13 |   userId             Int       @map(name: "user_id")
14 |   providerType       String    @map(name: "provider_type")
15 |   providerId         String    @map(name: "provider_id")
16 |   providerAccountId  String    @map(name: "provider_account_id")
17 |   refreshToken       String?   @map(name: "refresh_token")
18 |   accessToken        String?   @map(name: "access_token")
19 |   accessTokenExpires DateTime? @map(name: "access_token_expires")
20 |   createdAt          DateTime  @default(now()) @map(name: "created_at")
21 |   updatedAt          DateTime  @default(now()) @map(name: "updated_at")
22 | 
23 | 
24 |   @@index([providerAccountId], name: "providerAccountId")
25 |   @@index([providerId], name: "providerId")
26 |   @@index([userId], name: "userId")
27 |   @@map(name: "accounts")
28 | }
29 | 
30 | model Session {
31 |   id           Int      @id @default(autoincrement())
32 |   userId       Int      @map(name: "user_id")
33 |   expires      DateTime
34 |   sessionToken String   @unique @map(name: "session_token")
35 |   accessToken  String   @unique @map(name: "access_token")
36 |   createdAt    DateTime @default(now()) @map(name: "created_at")
37 |   updatedAt    DateTime @default(now()) @map(name: "updated_at")
38 | 
39 |   @@map(name: "sessions")
40 | }
41 | 
42 | model User {
43 |   id            Int       @id @default(autoincrement())
44 |   name          String?
45 |   email         String?   @unique
46 |   emailVerified DateTime? @map(name: "email_verified")
47 |   image         String?
48 |   createdAt     DateTime  @default(now()) @map(name: "created_at")
49 |   updatedAt     DateTime  @default(now()) @map(name: "updated_at")
50 | 
51 |   @@map(name: "users")
52 | }
53 | 
54 | model VerificationRequest {
55 |   id         Int      @id @default(autoincrement())
56 |   identifier String
57 |   token      String   @unique
58 |   expires    DateTime
59 |   createdAt  DateTime @default(now()) @map(name: "created_at")
60 |   updatedAt  DateTime @default(now()) @map(name: "updated_at")
61 | 
62 |   @@map(name: "verification_requests")
63 | }
64 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leighhalliday/next-auth-demo/6d22823785edaf52ac15cbe5a6e02df8b525dba3/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   future: {
 3 |     // removeDeprecatedGapUtilities: true,
 4 |     // purgeLayersByDefault: true,
 5 |   },
 6 |   purge: [],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   variants: {},
11 |   plugins: [],
12 | }
13 | 


--------------------------------------------------------------------------------