feat: added callbacks to middleware, session added, token added, role added in token

Author: Harshit Yadav

README.md

@@ -150,6 +150,8 @@ export const getUserById = async (id: string) => {
 
 38. Go to see logs `http://localhost:3000/api/auth/providers`
 
+## middlewares and login
+
 39. Create middleware in `middleware.ts` in root directory
 
 - `middleware.ts` file is nextjs specific file
@@ -292,3 +294,125 @@ export default Settings
 ```
 
 #### Login/Logout completed succesfully
+
+## Callbacks
+
+49. add callbacks in `auth.ts` - to check for tokens
+    `export const {
+handlers: { GET, POST },
+auth,
+signIn,
+signOut,
+} = NextAuth({
+callbacks: {
+async jwt({ token }) {
+console.log({ token });
+return token;
+},
+},
+adapter: PrismaAdapter(db), // prisma adapter is supported on non edge
+session: { strategy: "jwt" },
+...authConfig,
+});`
+
+50. update callback in `auth.ts` file
+
+```
+ async session({ token, session }) {
+      if (token.sub && session.user) {
+        session.user.id = token.sub;
+      }
+
+      return session;
+    },
+```
+
+51. Update schema in `schema.prisma` file
+
+```
+role UserRole @default(USER)
+```
+
+52. Close the server
+    - run command `npx prisma generate` and then `npx prisma migrate reset` and then `npx prisma db push`
+    - you can check the db status, users would be 0
+
+### Role based authentication is developed with help of middleware and token in callback
+
+### Query is much faste in case of finding by id rather than by an email
+
+53. Update the callback in `auth.ts` file
+
+```
+async session({ token, session }) {
+      console.log({
+        sessionToken: token,
+      });
+
+      if (token.sub && session.user) {
+        session.user.id = token.sub;
+      }
+
+      return session;
+    },
+
+    async jwt({ token }) {
+      // fecthing the user
+
+      if (!token.sub) return token;
+      const exisitingUser = await getUserById(token.sub);
+      if (!exisitingUser) return token;
+      token.role = exisitingUser.role;
+
+      return token;
+    },
+
+```
+
+#### you must be start seeing the role in the token
+
+54. Update session function
+
+```
+async session({ token, session }) {
+
+      if (token.sub && session.user) {
+        session.user.id = token.sub;
+      }
+
+      if(token.role && session.user){
+        session.user.role = token.role  // you will be seeing here a typescript error
+      }
+
+      return session;
+    },
+```
+
+55. Update in `auth.ts` file
+
+```
+if (token.role && session.user) {
+        session.user.role = token.role as UserRole;
+      }
+```
+
+- and create a `next-auth.d.ts` file in root directory
+- and paste the code
+
+```
+import { UserRole } from "@prisma/client";
+import NextAuth from "next-auth";
+
+export type ExtendedUser = DefaultSession["user"] & {
+role: UserRole;  // this is the type of role
+};
+
+declare module "next-auth" {
+interface Session {
+  user: ExtendedUser;
+}
+}
+
+```
+#### Now you can see the role of the user in the session
+

app/(protected)/settings/page.tsx

@@ -2,13 +2,14 @@ import { auth, signOut } from '@/auth'
 import React from 'react'
 
 const Settings = async () => {
-    const user = await auth()
+    const session = await auth()
+    console.log(JSON.stringify(session?.user.role)) // session can be possibly null, so do optional chaining
     return (
         <div>
-            {JSON.stringify(user)}
+            {JSON.stringify(session)}
             <form action={async () => {
                 'use server'
-                await signOut()
+                await signOut() // exclusively for server actions
             }}>
                 <button type='submit'>
                     Singout

auth.ts

@@ -3,12 +3,40 @@ import NextAuth from "next-auth";
 import authConfig from "@/auth.config";
 import { db } from "./lib/database.connection";
 import { PrismaAdapter } from "@auth/prisma-adapter";
+import { getUserById } from "./lib/actions/user.action";
+import { UserRole } from "@prisma/client";
+
 export const {
   handlers: { GET, POST },
   auth,
   signIn,
   signOut,
 } = NextAuth({
+  callbacks: {
+  
+    async session({ token, session }) {
+      if (token.sub && session.user) {
+        session.user.id = token.sub;
+      }
+
+      if (token.role && session.user) {
+        session.user.role = token.role as UserRole;
+      }
+
+      return session;
+    },
+
+    async jwt({ token }) {
+      // fecthing the user
+
+      if (!token.sub) return token;
+      const exisitingUser = await getUserById(token.sub);
+      if (!exisitingUser) return token;
+      token.role = exisitingUser.role;
+
+      return token;
+    },
+  },
   adapter: PrismaAdapter(db), // prisma adapter is supported on non edge
   session: { strategy: "jwt" },
   ...authConfig,

next-auth.d.ts

@@ -0,0 +1,12 @@
+import { UserRole } from "@prisma/client";
+import NextAuth from "next-auth";
+
+export type ExtendedUser = DefaultSession["user"] & {
+  role: UserRole;
+};
+
+declare module "next-auth" {
+  interface Session {
+    user: ExtendedUser;
+  }
+}

prisma/schema.prisma

@@ -12,6 +12,12 @@ datasource db {
   directUrl = env("DIRECT_URL")
 }
 
+enum UserRole{
+  ADMIN
+  USER
+}
+
+
 model User {
   id            String    @id @default(cuid())
   name          String?
@@ -20,8 +26,11 @@ model User {
   image         String?
   password      String?
   accounts      Account[]
+  role          UserRole @default(USER)
 }
 
+
+
 model Account {
   id                 String  @id @default(cuid())
   userId             String