Consumer Authentication with Google & GitHub in Subsequent.js Utilizing Prisma and NextAuth

Implementing person authentication is a foundational a part of constructing safe and dynamic internet purposes. On this article, we’ll stroll via the way to arrange authentication in a Subsequent.js utility, utilizing NextAuth for seamless integration with Google and GitHub OAuth suppliers, and Prisma to handle our person information in a database. By the top of this information, you’ll have a stable authentication setup with exterior OAuth suppliers that retailer person information effectively.

We’ll use the newly launched Subsequent.js model 15, PostgreSQL arrange by way of Docker, Prisma for sort security, and ShadcnUI for quick UI growth. By the top, we’ll have an utility the place customers can authenticate by way of Google or GitHub, with their information immediately saved in our database.

Conditions

1. Fundamental data of Subsequent.js – Familiarity with Subsequent.js and its folder construction will assist.
2. Node.js and npm put in – You’ll want each put in in your native machine.
3. A GitHub and Google account – For testing the OAuth circulate.
   Prisma CLI – Be sure to have the Prisma CLI put in, as we’ll use it to arrange and migrate the database.
4. Docker: Set up Docker to simply handle your PostgreSQL database in a containerized surroundings. Discuss with the Docker documentation for set up directions.
5. PostgreSQL: Familiarity with PostgreSQL is helpful, as we are going to use it as our database.
6. Familiarity with Prisma: Fundamental data of Prisma ORM for managing database operations will likely be helpful.

Steps to Create Consumer Authentication

Let’s dive into establishing the venture and including person authentication.

Step 1: Initialize Subsequent.js Venture

Begin by creating a brand new Subsequent.js venture.

npx create-next-app@newest next-oauth-prisma

1 Want to put in the next packages:
2 create-next-app@15.0.2
3 Alright to proceed? (y) y
4 
5 √ Would you want to make use of TypeScript? ... No / Sure
6 √ Would you want to make use of ESLint? ... No / Sure
7 √ Would you want to make use of Tailwind CSS? ... No / Sure
8 √ Would you want your code inside a `src/` listing? ... No / Sure
9 √ Would you want to make use of App Router? (really helpful) ... No / Sure
10 √ Would you want to make use of Turbopack for subsequent dev? ... No / Sure
11 √ Would you wish to customise the import alias (@/* by default)? ... No / Sure
12 Creating a brand new Subsequent.js app in C:UsersuseRDesktopNextJSnext-auth-prisma.
13 
14 Utilizing npm.
15 
16 Initializing venture with template: app-tw 
17 
18 
19 Putting in dependencies:
20 - react
21 - react-dom
22 - subsequent
23 
24 Putting in devDependencies:
25 - typescript
26 - @varieties/node
27 - @varieties/react
28 - @varieties/react-dom
29 - postcss
30 - tailwindcss
31 - eslint
32 - eslint-config-next

then

cd next-oauth-prisma

As soon as your venture is created, set up dependencies:

npm set up next-auth@beta @prisma/consumer prisma

• next-auth: Handles authentication.
• @prisma/consumer and prisma: Used to work together with the database and handle person information.

Now, initialize your Prisma ORM venture by producing a Prisma schema file utilizing this command:

npx prisma init –datasource-provider postgresql

Step 2: Setup a Database

Earlier than connecting our database, we first must create it. To grasp Docker higher, you’ll be able to confer with our article, Easy methods to Set Up a Native PostgreSQL Utilizing Docker Compose.

Open the Docker utility, and when you have different PostgreSQL containers operating, cease them to keep away from port conflicts. Then, create a docker-compose.yml file and add the next code to it:

1 model: '3.8'
2 
3 companies:
4   db:
5     picture: postgres:newest
6     container_name: subsequent-oauth-prisma
7     surroundings:
8       POSTGRES_USER: postgres_user
9       POSTGRES_PASSWORD: postgres_password
10       POSTGRES_DB: postgres_auth
11     ports:
12       - '5432:5432'
13     volumes:
14       - postgres_data:/var/lib/postgresql/information
15       - ./init.sql:/docker-entrypoint-initdb.d/init.sql 
16 
17 volumes:
18   postgres_data:

This Docker Compose file is configured to arrange a PostgreSQL database container on your Subsequent.js venture with Prisma. Right here’s a breakdown:

• picture: postgres:newest pulls the most recent PostgreSQL picture from Docker Hub.
• container_name: Names the container next-oauth-prisma, which makes it straightforward to reference.
• surroundings: Units PostgreSQL surroundings variables:
• POSTGRES_USER: the username (set right here to postgres_user).
• POSTGRES_PASSWORD: the password (postgres_password).
• POSTGRES_DB: the identify of the preliminary database to be created (postgres_auth).
• ports: Exposes the container’s PostgreSQL port (5432) to the host’s port 5432. This makes the database accessible from exterior the container by way of localhost:5432.

volumes:

• postgres_data:/var/lib/postgresql/information: Mounts a named quantity postgres_data to persist database information on the host, so information is preserved between container restarts.
• ./init.sql:/docker-entrypoint-initdb.d/init.sql: Mounts an elective SQL script (init.sql), which may initialize the database with predefined tables or values on first run. This script is run robotically by PostgreSQL at startup if current.

Run

docker-compose up -d

Working docker-compose up -d is a strategy to begin the containers outlined in your docker-compose.yml file with some particular benefits:

1. Indifferent Mode (-d): The -d flag stands for “indifferent mode,” that means the containers will run within the background. This lets you preserve utilizing your terminal for different instructions whereas your Docker companies are operating.
2. Automated Setup: This command robotically builds and begins up all of the companies outlined in your docker-compose.yml file. On this case, it can arrange and begin the PostgreSQL database container with the required configuration.
3. Persistent Companies: Working the container in indifferent mode is right for databases and different companies that must run constantly, as they preserve operating even if you happen to shut the terminal. You may cease them later utilizing docker-compose down.
4. Networking and Dependencies: If there are a number of companies in your docker-compose.yml file that rely on one another, docker-compose up -d will guarantee they begin within the right order and are networked collectively as outlined.

Briefly, utilizing docker-compose up -d is a handy strategy to begin your database within the background, letting you proceed growth with out an open Docker terminal session.

Step 3: Configure Prisma

Configure Prisma by making a .env file within the root listing with the next:

1 DATABASE_URL="postgresql://postgres_user:postgres_password@localhost:5432/postgres_auth?schema=public"

Exchange username, password, and postgres_auth together with your precise credentials.

Outline the Consumer Mannequin in Prisma

Open prisma/schema.prisma and outline the Consumer mannequin for NextAuth. Additionally, configure Prisma to make use of PostgreSQL.

1 // That is your Prisma schema file,
2 // study extra about it within the docs: https://pris.ly/d/prisma-schema
3 
4 // In search of methods to hurry up your queries, or scale simply together with your serverless or edge features?
5 // Attempt Prisma Speed up: https://pris.ly/cli/accelerate-init
6 
7 generator consumer {
8   supplier = "prisma-client-js"
9 }
10 
11 datasource db {
12   supplier = "postgresql"
13   url      = env("DATABASE_URL")
14 }
15 
16 mannequin Consumer {
17   id            String    @id @default(cuid())
18   identify          String?
19   electronic mail         String    @distinctive
20   emailVerified DateTime?
21   picture         String?
22   function          String?
23   accounts      Account[]
24   periods      Session[]
25 
26   createdAt DateTime @default(now())
27   updatedAt DateTime @updatedAt
28 
29   @@map("customers")
30 }
31 
32 mannequin Account {
33   userId            String
34   sort              String
35   supplier          String
36   providerAccountId String
37   refresh_token     String?
38   access_token      String?
39   expires_at        Int?
40   token_type        String?
41   scope             String?
42   id_token          String?
43   session_state     String?
44 
45   createdAt DateTime @default(now())
46   updatedAt DateTime @updatedAt
47 
48   person Consumer @relation(fields: [userId], references: [id], onDelete: Cascade)
49 
50   @@id([provider, providerAccountId])
51   @@map("accounts")
52 }
53 
54 mannequin Session {
55   sessionToken String   @distinctive
56   userId       String
57   expires      DateTime
58   person         Consumer     @relation(fields: [userId], references: [id], onDelete: Cascade)
59 
60   createdAt DateTime @default(now())
61   updatedAt DateTime @updatedAt
62 
63   @@map("periods")
64 }
65 
66 mannequin VerificationToken {
67   identifier String
68   token      String
69   expires    DateTime
70 
71   @@id([identifier, token])
72   @@map("verification_tokens")
73 }

Every mannequin represents a desk within the database, with Prisma creating these tables primarily based on the outlined schema. Right here’s a breakdown of every mannequin:

Consumer Mannequin

Defines a desk for person info with fields for fundamental attributes like identify, electronic mail, and function. Key factors embody:

• id: A novel identifier with a default worth generated by cuid().
• electronic mail: A novel electronic mail area.
• createdAt and updatedAt: Timestamps to trace creation and replace occasions, with updatedAt auto-updating on adjustments.
• Relationships with different fashions (Account and Session) are represented as arrays.
• @@map(“customers”): Renames the desk within the database to customers.

Account Mannequin

Shops details about customers’ accounts for third-party suppliers like Google or GitHub:

• userId: Hyperlinks to the Consumer mannequin via a international key, making a relationship with the Consumer desk.
• Different fields, like access_token, refresh_token, and expires_at, retailer authentication information.
• @@id([provider, providerAccountId]): Composite main key throughout supplier and providerAccountId fields, imposing uniqueness for every account.
• @@map(“accounts”): Names the desk accounts within the database.

Session Mannequin

Tracks every login session for customers:

• sessionToken: A novel session identifier.
• expires: Signifies session expiry time.
• The person area defines a international key relationship to the Consumer desk, with periods deleted if the related person is eliminated.
• @@map(“periods”): Names the desk periods within the database.

VerificationToken Mannequin

Used for managing passwordless login or account verification tokens:

• identifier and token act as composite main keys, guaranteeing uniqueness.
• expires: Expiration timestamp for the token.
• @@map(“verification_tokens”): Names the desk verification_tokens.

This schema permits for environment friendly administration of person information, third-party account integrations, person periods, and account verifications for an entire authentication system.

Run the next instructions to create and migrate your database:

npx prisma migrate dev –name init

Step 4: Set up ShadcnUI Package deal

We can’t be constructing all the venture; as a substitute, we’ll simply create a navbar with a person dropdown menu. To do that, we solely want two elements from the Shadcn library: Button and Dropdown Menu.

Run the next command to put in the required ShadcnUI elements package deal:

npx shadcn-ui init

1 Which fashion would you want to make use of? › New York
2 Which shade would you want to make use of as base shade? › Zinc
3 Do you wish to use CSS variables for colours? › no / sure

Add ShadcnUI Elements

npx shadcn@newest add button

and

npx shadcn@newest add dropdown-menu

Now we’ve added the whole lot wanted to our venture. Within the subsequent part, we’ll begin constructing our UI and hook up with the database.

Attempt operating the venture with:

npm run dev

Be aware: The most recent model of Subsequent.js has a bug with webpack, inflicting the error: “Module parse failed: Dangerous character escape sequence.” We have beforehand coated an answer for this challenge — learn extra about it right here.

Create UI

Here is what we intention to construct:

To attain this, we’ll want the next elements: emblem, header, navbar, and user-button.

Emblem part

Create emblem.tsx file contained in the ui folder:

1 import Hyperlink from 'subsequent/hyperlink';
2 
3 const Emblem = () => {
4   return (
5     <Hyperlink href='/'>
6       <div className='flex gap-2 items-center'>
7         <span className='p-2 bg-main'>
8           <svg
9             width='27px'
10             top='27px'
11             viewBox='0 0 24 24'
12             xmlns='http://www.w3.org/2000/svg'
13             fill='none'
14             strokeWidth='1'
15             strokeLinecap='spherical'
16             strokeLinejoin='miter'
17             className='stroke-black darkish:stroke-white'
18           >
19             <path d='M9,3H8A3,3,0,0,0,5,6V9a3,3,0,0,1-3,3H2a3,3,0,0,1,3,3v4a3,3,0,0,0,3,3H9'></path>
20             <path d='M15,3h1a3,3,0,0,1,3,3V9a3,3,0,0,0,3,3h0a3,3,0,0,0-3,3v4a3,3,0,0,1-3,3H15'></path>
21           </svg>
22         </span>
23         <div className='flex gap-1 text-lg'>
24           <span className='text-primary font-montserrat'>Emblem</span>
25         </div>
26       </div>
27     </Hyperlink>
28   );
29 };
30 export default Emblem;

Consumer Button Part

Create user-button.tsx contained in the elements folder

1 import {
2   DropdownMenu,
3   DropdownMenuContent,
4   DropdownMenuGroup,
5   DropdownMenuItem,
6   DropdownMenuLabel,
7   DropdownMenuSeparator,
8   DropdownMenuTrigger,
9 } from './ui/dropdown-menu';
10 import avatarPlaceholder from '@/property/photos/avatar_placeholder.png';
11 import { Lock, LogOut, Settings } from 'lucide-react';
12 import { signOut } from 'next-auth/react';
13 import { Button } from './ui/button';
14 import { Consumer } from 'next-auth';
15 import Picture from 'subsequent/picture';
16 import Hyperlink from 'subsequent/hyperlink';
17 
18 interface UserButtonProps {
19   person: Consumer;
20 }
21 
22 export default perform UserButton({ person }: UserButtonProps) {
23   return (
24     <DropdownMenu>
25       <DropdownMenuTrigger asChild>
26         <Button measurement='icon' className='flex-none rounded-full'>
27           <Picture
28             src=
29             alt='Consumer profile image'
30             width={50}
31             top={50}
32             className='aspect-square rounded-full bg-background object-cover'
33           />
34         </Button>
35       </DropdownMenuTrigger>
36       <DropdownMenuContent className='w-56'>
37         <DropdownMenuLabel> 'Consumer'</DropdownMenuLabel>
38         <DropdownMenuSeparator />
39         <DropdownMenuGroup>
40           <DropdownMenuItem asChild>
41             <Hyperlink href='/settings'>
42               <Settings className='mr-2 h-4 w-4' />
43               <span>Settings</span>
44             </Hyperlink>
45           </DropdownMenuItem>
46           {person.function === 'admin' && (
47             <DropdownMenuItem asChild>
48               <Hyperlink href='/admin'>
49                 <Lock className='mr-2 h-4 w-4' />
50                 Admin
51               </Hyperlink>
52             </DropdownMenuItem>
53           )}
54         </DropdownMenuGroup>
55         <DropdownMenuSeparator />
56         <DropdownMenuItem asChild>
57           <button
58             onClick={() => signOut({ callbackUrl: '/' })}
59             className='flex w-full items-center'
60           >
61             <LogOut className='mr-2 h-4 w-4' /> Signal Out
62           </button>
63         </DropdownMenuItem>
64       </DropdownMenuContent>
65     </DropdownMenu>
66   );
67 }

Navbar Part

Our login part could have three states: loading, register, and an avatar with a dropdown menu. To set this up, we have to comply with these steps:

Here is the way to do it:

1 
2 
3 'use consumer';
4 
5 import { signIn, useSession } from 'next-auth/react';
6 import UserButton from './user-button';
7 import { Button } from './ui/button';
8 
9 const Navbar = () => {
10   const session = useSession();
11   const person = session.information?.person;
12 
13   return (
14     <nav className='flex gap-2 flex-col sm:flex-row w-[60%] sm:w-fit max-sm:mt-8 items-center justify-center'>
15       {person && <UserButton person={person} />}
16       {!person && session.standing === 'loading' && <span>Loading person...</span>}
17       {!person && session.standing !== 'loading' && (
18         <Button onClick={() => signIn()}>Check in</Button>
19       )}
20     </nav>
21   );
22 };
23 export default Navbar;

• useSession hook fetches the present session’s state and information, assigning it to session.
• The person variable extracts the person object from the session information.

Rendering Logic:

If the person is logged in (person exists):

• The UserButton part is rendered, displaying user-related choices (e.g., an avatar with a dropdown menu).

If the session is loading (person state is undetermined):

• It shows “Loading person…” to tell customers that the standing is being fetched.

If no person is logged in (and session isn’t loading):

• It reveals a Check in button, which triggers the signIn perform when clicked.

So as to add the person variable to the session, we have to regulate our structure.tsx barely by wrapping it with our session HOC (Larger Order Part).

Structure Part

1 
2 
3 import sort { Metadata } from "subsequent";
4 import localFont from "subsequent/font/native";
5 import "./globals.css";
6 import { SessionProvider } from 'next-auth/react';
7 import Header from '@/elements/header';
8 
9 const geistSans = localFont({
10   src: "./fonts/GeistVF.woff",
11   variable: "--font-geist-sans",
12   weight: "100 900",
13 });
14 const geistMono = localFont({
15   src: "./fonts/GeistMonoVF.woff",
16   variable: "--font-geist-mono",
17   weight: "100 900",
18 });
19 
20 export const metadata: Metadata = {
21   title: "Create Subsequent App",
22   description: "Generated by create subsequent app",
23 };
24 
25 export default perform RootLayout({
26   youngsters,
27 }: Readonly<{
28   youngsters: React.ReactNode;
29 }>) {
30   return (
31     <html lang="en">
32       <physique
33         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
34       >
35           <SessionProvider>
36             <Header />
37             {youngsters}
38           </SessionProvider>
39       </physique>
40     </html>
41   );
42 }

Declare a module augmentation for next-auth:

Create a file src/varieties/next-auth.d.ts

1 import { DefaultSession } from "next-auth";
2 
3 declare module "next-auth" {
4   interface Session {
5     person: Consumer & DefaultSession["user"];
6   }
7 
8   interface Consumer  null;
10   
11 }

The Session interface is modified so as to add a person object that mixes Consumer and the default construction of person in DefaultSession. This helps TypeScript perceive that your session’s person now consists of the extra properties you outlined within the Consumer interface.

A brand new Consumer interface is outlined, including a job property (sort string | null) to retailer further person function info. That is helpful if you wish to retailer person roles within the session for entry management.

By including these properties, you achieve strongly typed entry to person.function when working with NextAuth periods, which makes it simpler to implement role-based options or entry management in your app.

Declare globalThis.prismaGlobal

Create a file src/lib/prisma.ts

1 import { PrismaClient } from '@prisma/consumer';
2 
3 const prismaClientSingleton = () => {
4   return new PrismaClient();
5 };
6 
7 declare const globalThis: {
8   prismaGlobal: ReturnType<typeof prismaClientSingleton>;
9 } & typeof international;
10 
11 const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
12 
13 export default prisma;
14 
15 if (course of.env.NODE_ENV !== 'manufacturing') globalThis.prismaGlobal = prisma;

In abstract, this code helps keep away from reinitializing Prisma in growth by utilizing a singleton sample, optimizing each growth and manufacturing efficiency.

All that’s left is to create the Header part, the place we’ll mix our emblem and navbar, after which combine it into structure.tsx.

1 
2 
3 import Navbar from './navbar';
4 import Emblem from './ui/emblem';
5 
6 const Header = () => {
7   return (
8     <div className='light-gradient darkish:dark-gradient font-public-sans'>
9       <div className='flex items-center justify-between m-4 sm:mt-2 mt-9 mx-8 flex-col sm:flex-row'>
10         <Emblem />
11         <div className='flex flex-row justify-end gap-14'>
12           <Navbar />
13         </div>
14       </div>
15     </div>
16   );
17 };
18 export default Header;

Check it

npm run dev

Set Up NextAuth

Now, we’ll arrange NextAuth to authenticate customers utilizing Google and GitHub. Within the app/api/auth/[...nextauth] listing, create a brand new folder known as auth and a file known as route.ts.

1 import { handlers } from '@/auth';
2 export const { GET, POST } = handlers;

Within the root listing create 2 information: _middleware.ts and auth.ts

auth.ts

1 
2 
3 import { PrismaAdapter } from '@auth/prisma-adapter';
4 import GitHub from 'next-auth/suppliers/github';
5 import Google from 'next-auth/suppliers/google';
6 import { Adapter } from 'next-auth/adapters';
7 import prisma from './lib/prisma';
8 import NextAuth from 'next-auth';
9 
10 export const { handlers, signIn, signOut, auth } = NextAuth({
11 	trustHost: true,
12 	theme: {
13 		emblem: '/emblem.png',
14 	},
15 	adapter: PrismaAdapter(prisma) as Adapter,
16 	callbacks: {
17 		session({ session, person }) {
18 			session.person.function = person.function;
19 			return session;
20 		},
21 	},
22 	suppliers: [Google, GitHub],
23 });

On this file:

• We outline Google and GitHub as OAuth suppliers.
• We configure the PrismaAdapter to handle information within the database.

_middleware.ts

1 export { auth as middleware } from '@/auth';

Add your Google and GitHub OAuth credentials to the .env file:

1 GOOGLE_CLIENT_ID=your-google-client-id
2 GOOGLE_CLIENT_SECRET=your-google-client-secret
3 GITHUB_CLIENT_ID=your-github-client-id
4 GITHUB_CLIENT_SECRET=your-github-client-secret
5 NEXTAUTH_URL=http://localhost:3000

GitHub OAuth App

Creating a brand new GitHub OAuth App entails just a few steps inside the GitHub developer settings. Right here’s a fast information that will help you set it up:

1. Go to GitHub Developer Settings:

• Log in to your GitHub account.
• Navigate to GitHub Developer Settings by clicking in your profile icon, deciding on Settings, after which Developer settings from the sidebar.

2. Create a New OAuth App:

• Within the OAuth Apps part, click on on New OAuth App.

3. Fill within the OAuth App Particulars:

• Software identify: Enter a reputation on your app, which customers will see when authorizing.
• Homepage URL: Add the principle URL on your utility, equivalent to https://localhost:3000.
• Authorization callback URL: Enter the URL the place GitHub ought to redirect customers after they authorize, sometimes one thing like https://localhost:3000/api/auth/callback/github (relying on how you have arrange your app to deal with callbacks).

4. Register the Software:

• As soon as all fields are crammed in, click on Register utility. GitHub will generate a Consumer ID and Consumer Secret on your OAuth app.

5. Safe the Consumer Secret:

• Copy the Consumer ID and Consumer Secret. Preserve these protected, as you’ll want them to configure OAuth in your utility, and don’t expose them publicly.

6. Use in Software:

In your utility code, use the Consumer ID and Consumer Secret to configure GitHub as an authentication supplier (for instance, utilizing NextAuth or the same library).

Your GitHub OAuth App is now prepared! You should utilize it to authenticate customers via GitHub in your utility.

Google OAuth App

To create a brand new Google OAuth App, comply with these steps inside the Google Cloud Console:

1. Go to the Google Cloud Console:

2. Create or Choose a Venture:

• From the highest menu, click on Choose a venture.
• Select an present venture or click on New Venture to create a brand new one particularly on your app.

3. Allow the OAuth API:

• Within the left sidebar, go to APIs & Companies > Library.
• Seek for Google Identification or OAuth and click on Allow on the Google Identification API.

4. Configure the OAuth Consent Display screen:

• Go to APIs & Companies > OAuth consent display screen.
• Choose Exterior in case your app will likely be obtainable to basic customers, or Inside if it’s restricted to your group (G Suite customers solely).
• Fill out the App identify, Consumer help electronic mail, and some other required fields.
• In Scopes for Google APIs, add scopes related to your app (e.g., person profile information).
• Save and proceed to configure the consent display screen.

5. Create OAuth Credentials:

• Navigate to APIs & Companies > Credentials and click on on Create Credentials > OAuth Consumer ID.
• For Software sort, select Internet utility.
• Underneath Approved redirect URIs, add the callback URL on your utility. That is sometimes within the format:
  https://localhost:3000/api/auth/callback/google

Exchange localhost:3000 together with your app’s precise area.

6. Save Your Consumer ID and Consumer Secret:

• After creating the credentials, Google will present a Consumer ID and Consumer Secret.
• Copy these, as you’ll want them to configure Google authentication in your app.

Your Google OAuth App is now configured and prepared to be used in your utility.

We now have one final step: configuring distant picture dealing with in Subsequent.js. To load photos from exterior sources like Google and GitHub in our Subsequent.js app, we have to set trusted picture sources within the subsequent.config.ts configuration file. Right here’s how:

1 
2 const nextConfig = {
3   photos: {
4     remotePatterns: [
5       {
6         protocol: 'https',
7         hostname: 'lh3.googleusercontent.com', 
8       },
9       {
10         protocol: 'https',
11         hostname: 'avatars.githubusercontent.com', 
12       },
13     ],
14   },
15 };
16 
17 export default nextConfig;

The remotePatterns array lists trusted sources for loading photos from exterior domains. That is helpful when customers authenticate with Google or GitHub, permitting us to show their profile photos securely.

Check and Confirm Authentication

After establishing the database, NextAuth configurations, and UI, you’ll be able to check the authentication workflow. When a person indicators in with Google or GitHub, NextAuth will retailer their info within the database by way of Prisma, enabling a seamless authentication expertise throughout periods.

Wrapping Up

With this setup, you’ve established a sturdy person authentication system in Subsequent.js utilizing NextAuth and Prisma. This implementation is scalable, letting you increase person information administration and customise the authentication expertise as wanted. Utilizing NextAuth with Prisma provides flexibility, and the combination with OAuth suppliers like Google and GitHub supplies a easy, safe strategy to deal with authentication in fashionable internet purposes.

Joyful coding!