dev-resources.site

for different kinds of informations.

Implementing auth.js v5 with Prisma and Supabase in Next.js

Published at

9/17/2024

Setting up Prisma

Install Prisma npm install prisma --save-dev
Initialize prisma npx prisma init
This will creates a new prisma directory with a schema.prisma file and configures PostgresSQL as your database also creating .env file with DATABASE_URL

Initialize Supabase

Create organization in supabase (optional if you are individual developer)
Create database
Get connection string by clicking connect button.

Click ORMS and in Prisma, copy the .env.local into .env
Click prisma/schema.prisma and copy the code inside your prisma.

Note. Prisma doesn't work on .env.local and it only works with .env so make sure to change the correct .env file

Setting NextAuth

Install auth.js v5
Adding NEXTAUTH_SECRET in env file npx auth secret
Add auth.ts file under src folder

// auth.ts
import NextAuth from 'next-auth';
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [],
})

Add a route handler under app/api/auth/[...nextauth]/route.ts

// app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

Add a middleware to keep session alive.

// middleware.ts
export { auth as middleware } from "@/auth"

Add PrismaAdapter The Prisma Adapter in NextAuth.js is a tool that allows NextAuth to store and manage authentication data (such as user accounts, sessions, verification tokens, etc.) in a Prisma-managed database.

npm install @prisma/client @auth/prisma-adapter

To improve performance using Prisma ORM, we can set up the Prisma instance to ensure only one instance is created throughout the project and then import it from any file as needed. This approach avoids recreating instances of PrismaClient every time it is used.

// prisma.ts
import { PrismaClient } from "@prisma/client"
const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
export const prisma = globalForPrisma.prisma || new PrismaClient()
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

Add prisma Adapter in auth.ts

// auth.ts
import NextAuth from "next-auth"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { prisma } from "@/prisma"
export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [],
})

Define database tables for authentication by adding this in prisma/schema.prisma

// prisma/schema.prisma
model User {
  id            String          @id @default(cuid())
  firstName     String?
  lastName      String?
  email         String          @unique
  password      String? // Make sure this field exists in your schema
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  // Optional for WebAuthn support
  Authenticator Authenticator[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
model Account {
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String?
  access_token      String?
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String?
  session_state     String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
  @@id([provider, providerAccountId])
}
model Session {
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
model VerificationToken {
  identifier String
  token      String
  expires    DateTime
  @@id([identifier, token])
}
// Optional for WebAuthn support
model Authenticator {
  credentialID         String  @unique
  userId               String
  providerAccountId    String
  credentialPublicKey  String
  counter              Int
  credentialDeviceType String
  credentialBackedUp   Boolean
  transports           String?
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
  @@id([userId, credentialID])
}

Perform migration

In prisma, migrations need to perform except MongoDB.

A migration in the context of databases refers to the process of modifying the database schema in a controlled, versioned manner. This allows developers to make changes to the database structure (such as adding or removing tables, changing columns, or creating relationships) while keeping track of the changes. Migrations help ensure consistency across environments (like development, testing, and production) and make it easier to manage schema changes over time.

And in order to create SQL migration file,
npx prisma migrate dev

Note: Migration need to perform only when the schema changes

This will take a while if we are using Supabase URL and will prompt to ask migration name and after finished running this command, all the changes in schema will be updated in supabase and also creating migrations folder inside prisma/migrations

Note: In order to sync the migrations with supabase, don’t delete migrations folder.

npx prisma migrate dev will also generate the Prisma client so the developer who is using this command may not need to run npx prisma generate.

But developers who pull from git will need to run npx prisma generate first to generate Prisma client.

Setting SessionProvider

We need to set session provider so that the client can use useSession hook.

Note: Need to add SessionProvider for all parent layout

// app/layout.tsx
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { auth } from "@/auth";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await auth();

  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <SessionProvider session={session}>{children}</SessionProvider>
      </body>
    </html>
  );
}

Calling session from server pages or from api

import { auth } from '@/auth';
const session = await auth();

Calling session from client components

"use client";
import { useSession } from 'next-auth/react';
const { data: session, status } = useSession();

Conclusion

By combining the power of Prisma, Auth.js v5 and Supabase (as database), we can easily manage authentication in a Next.js app with minimal configuration but I haven't added any providers yet. This is the initial setup for now and will share about others providers later.

My GitHub Repo for next-auth Repo

Integrating LinkedIn Authentication Link

Integrating GitHub Authentication Link

Happy Coding ^_^

authjs Article's

30 articles in total