Skip to main content
Version: v4

role-based-login-strategy

To add role based authentication to your application, you must do three things.

  1. Update your database schema
  2. Add the role to the session object
  3. Check for role in your pages/components

First modify the user table and add a role column with the type of String?.

Below is an example Prisma schema file.

/prisma/schema.prisma
model User {
id String @id @default(cuid())
name String?
email String? @unique
emailVerified DateTime?
image String?
role String? // New Column
accounts Account[]
sessions Session[]
}

Next, implement a custom session callback in the [...nextauth].js file, as shown below.

/pages/api/auth/[...nextauth].js
callbacks: {
async session({ session, token, user }) {
session.user.role = user.role; // Add role value to user object so it is passed along with session
return session;
}
},

Going forward, when using the getSession hook, check that session.user.role matches the required role. The example below assumes the role 'admin' is required.

/pages/admin.js
import { getSession } from "next-auth/react"

export default function Page() {
const session = await getSession({ req })

if (session && session.user.role === "admin") {
return (
<div>
<h1>Admin</h1>
<p>Welcome to the Admin Portal!</p>
</div>
)
} else {
return (
<div>
<h1>You are not authorized to view this page!</h1>
</div>
)
}
}

Then it is up to you how you manage your roles, either through direct database access or building your own role update API.