NextAuth and role based access control

Can someone explain to me how to modify the the auth.ts file in the server folder when you set up a boilerplate t3 app with next auth in order to enable role based access control? I have been using a profile() callback (https://authjs.dev/guides/basics/role-based-access-control) with a GitHubProvider but I get an error with my prisma schema.
GitHubProvider({
profile(profile) {
return {
...profile,
role: profile.role ?? "user",
id: profile.id.toString(),
image: profile.avatar_url,
}
},
clientId: process.env.GITHUB_ID as string,
clientSecret: process.env.GITHUB_SECRET as string,
}),
GitHubProvider({
profile(profile) {
return {
...profile,
role: profile.role ?? "user",
id: profile.id.toString(),
image: profile.avatar_url,
}
},
clientId: process.env.GITHUB_ID as string,
clientSecret: process.env.GITHUB_SECRET as string,
}),
I added this in my User model role String @default("user") but no luck. Would really appreciate some insight on how to do this.
Role-based access control | Auth.js
There are two ways to add role-based access control (RBAC) to your application, based on the session strategy you choose. Let's see an example for each of these.
2 Replies
Michael
Michael10mo ago
I think I figured this out. The User interface needs to be in the next-auth module that's declared. I also was spreading in the profile object from the GitHubProvider which I think was not compatible with the prisma User Schema. Instead, I just grabbed the values I wanted.
declare module "next-auth" {
interface Session extends DefaultSession {
user: {
id: string;
name: string;
login: string;
// ...other properties
role: string;
} & DefaultSession["user"];
}

//Must include this interface to allow sesssion access to user.role and user.name
interface User {
role: string;
name: string;
}
}
declare module "next-auth" {
interface Session extends DefaultSession {
user: {
id: string;
name: string;
login: string;
// ...other properties
role: string;
} & DefaultSession["user"];
}

//Must include this interface to allow sesssion access to user.role and user.name
interface User {
role: string;
name: string;
}
}
export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(db),
providers: [
GitHubProvider({
profile(profile: GithubProfile) {
return {
//this will populate the user schema based on information pulled from the auth provider
name: profile.login,
email: profile.email,
role: profile.role ?? "user",
id: profile.id.toString(),
image: profile.avatar_url,
}
},
clientId: process.env.GITHUB_ID as string,
clientSecret: process.env.GITHUB_SECRET as string,
}),
],
callbacks: {
session: ({ session, user }) => ({
...session,
user: {
...session.user,
id: user.id,
name: user.name,
role: user.role,
email: user.email
},
}),
async redirect({url, baseUrl}) {
return baseUrl
}
},

};

/**
* Wrapper for `getServerSession` so that you don't need to import the `authOptions` in every file.
*
* @see https://next-auth.js.org/configuration/nextjs
*/
export const getServerAuthSession = () => getServerSession(authOptions);
export const authOptions: NextAuthOptions = {
adapter: PrismaAdapter(db),
providers: [
GitHubProvider({
profile(profile: GithubProfile) {
return {
//this will populate the user schema based on information pulled from the auth provider
name: profile.login,
email: profile.email,
role: profile.role ?? "user",
id: profile.id.toString(),
image: profile.avatar_url,
}
},
clientId: process.env.GITHUB_ID as string,
clientSecret: process.env.GITHUB_SECRET as string,
}),
],
callbacks: {
session: ({ session, user }) => ({
...session,
user: {
...session.user,
id: user.id,
name: user.name,
role: user.role,
email: user.email
},
}),
async redirect({url, baseUrl}) {
return baseUrl
}
},

};

/**
* Wrapper for `getServerSession` so that you don't need to import the `authOptions` in every file.
*
* @see https://next-auth.js.org/configuration/nextjs
*/
export const getServerAuthSession = () => getServerSession(authOptions);
Michael
Michael10mo ago
Here is my full repo if anyone else is struggling to figure this out: https://github.com/DocMDC/RoleBasedAccessControlT3NextAuth
GitHub
GitHub - DocMDC/RoleBasedAccessControlT3NextAuth
Contribute to DocMDC/RoleBasedAccessControlT3NextAuth development by creating an account on GitHub.
Want results from more Discord servers?
Add your server