├── .env.example
├── .gitignore
├── README.md
├── components
├── Header.tsx
├── Layout.tsx
└── Post.tsx
├── docker-compose.yml
├── lib
└── prisma.ts
├── next-env.d.ts
├── package-lock.json
├── package.json
├── pages
├── _app.tsx
├── api
│ ├── auth
│ │ └── [...nextauth].ts
│ ├── post
│ │ ├── [id].ts
│ │ └── index.ts
│ └── publish
│ │ └── [id].ts
├── create.tsx
├── drafts.tsx
├── index.tsx
└── p
│ └── [id].tsx
├── prisma
├── migrations
│ ├── 20220408154015_init
│ │ └── migration.sql
│ └── migration_lock.toml
├── schema.prisma
└── seed.ts
├── renovate.json
└── tsconfig.json
/.env.example:
--------------------------------------------------------------------------------
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#accessing-environment-variables-from-the-schema
3 |
4 | # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB (Preview).
5 | # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
6 |
7 | DATABASE_URL="postgresql://postgres:postgres@localhost:5432/blog"
8 |
9 | SECRET='random-secret-string'
10 |
11 | # When deploying to production, set the `NEXTAUTH_URL` environment variable to the canonical URL of your site.
12 | NEXTAUTH_URL='http://localhost:3000'
13 |
14 | # GitHub OAuth
15 | GITHUB_ID=""
16 | GITHUB_SECRET=""
17 |
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .next/
3 | .env
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Fullstack Authentication Example with Next.js and NextAuth.js
2 |
3 | With Railway Integration
4 |
5 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fprisma%2Ffullstack-prisma-nextjs-blog&env=SECRET,GITHUB_ID,GITHUB_SECRET&project-name=fullstack-prisma-nextjs-blog&repo-name=fullstack-prisma-nextjs-blog&integration-ids=oac_eGEyJUf8jDjOQSCNJiyYRbfX)
6 |
7 | Without the Railway integration
8 |
9 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fprisma%2Ffullstack-prisma-nextjs-blog&env=DATABASE_URL,SECRET,GITHUB_ID,GITHUB_SECRET&project-name=fullstack-prisma-nextjs-blog&repo-name=fullstack-prisma-nextjs-blog)
10 |
11 | This is a starter that shows how to implement a **fullstack app in TypeScript with [Next.js](https://nextjs.org/)** with the following stack:
12 |
13 | - [React](https://reactjs.org/) (frontend)
14 | - [Next.js API routes](https://nextjs.org/docs/api-routes/introduction)
15 | - [Prisma Client](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client) (backend).
16 | - [NextAuth.js](https://next-auth.js.org/) for authentication.
17 | - [PostgreSQL](http://postgresql.org/) as the database of choice.
18 |
19 | Before you deploy the application to Vercel, ensure you
20 | - (Optional) Sign in to Railway and create a PostgreSQL database
21 | - Create a separate GitHub OAuth application before you deploy your application
22 | - Update the **Authorization callback URL** with the URL of the deployed app after successfully deploying the app
23 |
24 | Note that the app uses a mix of server-side rendering with `getServerSideProps` (SSR) and static site generation with `getStaticProps` (SSG). When possible, SSG is used to make database queries already at build-time (e.g. when fetching the [public feed](./pages/index.tsx)). Sometimes, the user requesting data needs to be authenticated, so SSR is being used to render data dynamically on the server-side (e.g. when viewing a user's [drafts](./pages/drafts.tsx)).
25 |
26 | ## Getting started
27 |
28 | ### 1. Download and install dependencies
29 |
30 | Clone this repository:
31 |
32 | ```
33 | git clone git@github.com:prisma/prisma-nextjs-blog.git
34 | ```
35 |
36 | Install npm dependencies:
37 |
38 | ```
39 | cd prisma-nextjs-blog
40 | npm install
41 | ```
42 |
43 |
44 |
45 | ### 2. Create and seed the database
46 |
47 | If you're using Docker on your computer, the following script to set up PostgreSQL database using the `docker-compose.yml` file at the root of your project:
48 |
49 | ```
50 | npm run db:up
51 | ```
52 |
53 | Run the following command to create your PostgreSQL database. This also creates the `User`, `Post`, `Account`, `Session` and `VerificationToken` tables that are defined in [`prisma/schema.prisma`](./prisma/schema.prisma):
54 |
55 | ```
56 | npx prisma migrate dev --name init
57 | ```
58 |
59 | When `npx prisma migrate dev` is executed against a newly created database, seeding is also triggered. The seed file in [`prisma/seed.ts`](./prisma/seed.ts) will be executed and your database will be populated with the sample data.
60 |
61 |
62 | ### 3. Configuring your authentication provider
63 |
64 | In order to get this example to work, you need to configure the [GitHub](https://next-auth.js.org/providers/github) authentication provider from NextAuth.js.
65 |
66 | #### Configuring the GitHub authentication provider
67 |
68 | Expand to learn how you can configure the GitHub authentication provider
69 |
70 | First, log into your [GitHub](https://github.com/) account.
71 |
72 | Then, navigate to [**Settings**](https://github.com/settings/profile), then open to [**Developer Settings**](https://github.com/settings/apps), then switch to [**OAuth Apps**](https://github.com/settings/developers).
73 |
74 | 
75 |
76 | Clicking on the **Register a new application** button will redirect you to a registration form to fill out some information for your app. The **Authorization callback URL** should be the Next.js `/api/auth` route.
77 |
78 | An important thing to note here is that the **Authorization callback URL** field only supports a single URL, unlike e.g. Auth0, which allows you to add additional callback URLs separated with a comma. This means if you want to deploy your app later with a production URL, you will need to set up a new GitHub OAuth app.
79 |
80 | 
81 |
82 | Click on the **Register application** button, and then you will be able to find your newly generated **Client ID** and **Client Secret**. Copy and paste this info into the [`.env`](./env) file in the root directory.
83 |
84 | The resulting section in the `.env` file might look like this:
85 |
86 | ```
87 | # GitHub oAuth
88 | GITHUB_ID=6bafeb321963449bdf51
89 | GITHUB_SECRET=509298c32faa283f28679ad6de6f86b2472e1bff
90 | ```
91 |
92 |
93 |
94 |
95 | ### 4. Start the app
96 |
97 | ```
98 | npm run dev
99 | ```
100 |
101 | The app is now running, navigate to [`http://localhost:3000/`](http://localhost:3000/) in your browser to explore its UI.
102 |
103 | ## Evolving the app
104 |
105 | Evolving the application typically requires three steps:
106 |
107 | 1. Migrate your database using Prisma Migrate
108 | 1. Update your server-side application code
109 | 1. Build new UI features in React
110 |
111 | For the following example scenario, assume you want to add a "profile" feature to the app where users can create a profile and write a short bio about themselves.
112 |
113 | ### 1. Migrate your database using Prisma Migrate
114 |
115 | The first step is to add a new table, e.g. called `Profile`, to the database. You can do this by adding a new model to your [Prisma schema file](./prisma/schema.prisma) file and then running a migration afterwards:
116 |
117 | ```diff
118 | // schema.prisma
119 |
120 | model Post {
121 | id Int @default(autoincrement()) @id
122 | title String
123 | content String?
124 | published Boolean @default(false)
125 | author User? @relation(fields: [authorId], references: [id])
126 | authorId Int
127 | }
128 |
129 | model User {
130 | id Int @default(autoincrement()) @id
131 | name String?
132 | email String @unique
133 | posts Post[]
134 | + profile Profile?
135 | }
136 |
137 | +model Profile {
138 | + id Int @default(autoincrement()) @id
139 | + bio String?
140 | + userId Int @unique
141 | + user User @relation(fields: [userId], references: [id])
142 | +}
143 | ```
144 |
145 | Once you've updated your data model, you can execute the changes against your database with the following command:
146 |
147 | ```
148 | npx prisma migrate dev
149 | ```
150 |
151 | ### 2. Update your application code
152 |
153 | You can now use your `PrismaClient` instance to perform operations against the new `Profile` table. Here are some examples:
154 |
155 | #### Create a new profile for an existing user
156 |
157 | ```ts
158 | const profile = await prisma.profile.create({
159 | data: {
160 | bio: "Hello World",
161 | user: {
162 | connect: { email: "alice@prisma.io" },
163 | },
164 | },
165 | });
166 | ```
167 |
168 | #### Create a new user with a new profile
169 |
170 | ```ts
171 | const user = await prisma.user.create({
172 | data: {
173 | email: "john@prisma.io",
174 | name: "John",
175 | profile: {
176 | create: {
177 | bio: "Hello World",
178 | },
179 | },
180 | },
181 | });
182 | ```
183 |
184 | #### Update the profile of an existing user
185 |
186 | ```ts
187 | const userWithUpdatedProfile = await prisma.user.update({
188 | where: { email: "alice@prisma.io" },
189 | data: {
190 | profile: {
191 | update: {
192 | bio: "Hello Friends",
193 | },
194 | },
195 | },
196 | });
197 | ```
198 |
199 |
200 | ### 3. Build new UI features in React
201 |
202 | Once you have added a new endpoint to the API (e.g. `/api/profile` with `/POST`, `/PUT` and `GET` operations), you can start building a new UI component in React. It could e.g. be called `profile.tsx` and would be located in the `pages` directory.
203 |
204 | In the application code, you can access the new endpoint via `fetch` operations and populate the UI with the data you receive from the API calls.
205 |
206 |
207 | ## Switch to another database (e.g. PostgreSQL, MySQL, SQL Server, MongoDB)
208 |
209 | If you want to try this example with another database than SQLite, you can adjust the the database connection in [`prisma/schema.prisma`](./prisma/schema.prisma) by reconfiguring the `datasource` block.
210 |
211 | Learn more about the different connection configurations in the [docs](https://www.prisma.io/docs/reference/database-reference/connection-urls).
212 |
213 | Expand for an overview of example configurations with different databases
214 |
215 | ### PostgreSQL
216 |
217 | For PostgreSQL, the connection URL has the following structure:
218 |
219 | ```prisma
220 | datasource db {
221 | provider = "postgresql"
222 | url = "postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA"
223 | }
224 | ```
225 |
226 | Here is an example connection string with a local PostgreSQL database:
227 |
228 | ```prisma
229 | datasource db {
230 | provider = "postgresql"
231 | url = "postgresql://janedoe:mypassword@localhost:5432/notesapi?schema=public"
232 | }
233 | ```
234 |
235 | ### MySQL
236 |
237 | For MySQL, the connection URL has the following structure:
238 |
239 | ```prisma
240 | datasource db {
241 | provider = "mysql"
242 | url = "mysql://USER:PASSWORD@HOST:PORT/DATABASE"
243 | }
244 | ```
245 |
246 | Here is an example connection string with a local MySQL database:
247 |
248 | ```prisma
249 | datasource db {
250 | provider = "mysql"
251 | url = "mysql://janedoe:mypassword@localhost:3306/notesapi"
252 | }
253 | ```
254 |
255 | ### Microsoft SQL Server
256 |
257 | Here is an example connection string with a local Microsoft SQL Server database:
258 |
259 | ```prisma
260 | datasource db {
261 | provider = "sqlserver"
262 | url = "sqlserver://localhost:1433;initial catalog=sample;user=sa;password=mypassword;"
263 | }
264 | ```
265 |
266 | ### MongoDB
267 |
268 | Here is an example connection string with a local MongoDB database:
269 |
270 | ```prisma
271 | datasource db {
272 | provider = "mongodb"
273 | url = "mongodb://USERNAME:PASSWORD@HOST/DATABASE?authSource=admin&retryWrites=true&w=majority"
274 | }
275 | ```
276 | Because MongoDB is currently in [Preview](https://www.prisma.io/docs/about/releases#preview), you need to specify the `previewFeatures` on your `generator` block:
277 |
278 | ```
279 | generator client {
280 | provider = "prisma-client-js"
281 | previewFeatures = ["mongodb"]
282 | }
283 | ```
284 |
285 |
286 | ## Next steps
287 |
288 | - Check out the [Prisma docs](https://www.prisma.io/docs)
289 | - Share your feedback in the [Prisma Discord](https://pris.ly/discord/)
290 | - Create issues and ask questions on [GitHub](https://github.com/prisma/prisma/)
291 | - Watch our biweekly "What's new in Prisma" livestreams on [Youtube](https://www.youtube.com/channel/UCptAHlN1gdwD89tFM3ENb6w)
292 |
--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import { useRouter } from "next/router";
4 | import { signOut, useSession } from "next-auth/react";
5 |
6 | const Header: React.FC = () => {
7 | const router = useRouter();
8 | const isActive: (pathname: string) => boolean = (pathname) =>
9 | router.pathname === pathname;
10 |
11 | const {data: session, status} = useSession();
12 |
13 | let left = (
14 |