https://authjs.dev/reference/adapter/prisma
chmod -R 777 /Users/poojas/Downloads/my-saas-boilerplate-z
Main Setup
npx shadcn-ui@latest init
(Shadcn is a component library built on radix ui and tailwind css)
npm install prisma
npx prisma init
--datasource-provider mysqlInstallations
.env and other changes
Instructions
import { PrismaClient } from "@prisma/client";
import "server-only";
declare global {
// eslint-disable-next-line no-var, no-unused-vars
var cachedPrisma: PrismaClient;
}
export let prisma: PrismaClient;
if (process.env.NODE_ENV === "production") {
prisma = new PrismaClient();
} else {
if (!**global.cachedPrisma**) {
global.cachedPrisma = new PrismaClient();
}
prisma = global.cachedPrisma;
}
create Account, Session and User models in schema.prisma (Copy from nextjs prisma adapter website)
npx prisma db push (sync up the entire mysql database with whatever configurations we write in schema.prisma)
In lib → create “auth*.ts”*
npm install next-auth
For session → we’re using jwt tokens
callbacks → bunch of functions
jwt function itself ({token}) → we’re gonna destructure the token from it
session
Using the token returned, set
session.user.id = token.id;
session.user.name = token.name;
session.user.email = token.email;
session.user.image = token.picture;
session.user.credits = token.credits;
Return Session
(Before that, set the types of them)
declare module "next-auth" {
interface Session extends DefaultSession {
user: {
id: string;
credits: number;
} & DefaultSession["user"];
}
}
The token itself we must extend the types. So we tell it the interface of JWT
declare module "next-auth/jwt" {
interface JWT {
id: string;
credits: number;
}
}
in .env → NEXTAUTH_SECRET
```
adapter: PrismaAdapter(prisma), //Set prisma adapter
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
}),
```
2. Go to console.cloud.google.com 1. New project 2. Credentials→configure consent screen 1. user type: external (allow anyone to login) 2. Enter app name 3. add email under Developer contact information 4. leave scope empty 5. no test users 3. Create new credentials → oauth client ID 1. Authorized JavaScript origins: http://localhost:3001 2. Authorized redirect URIs: http://localhost:3001/api/auth/callback/google 3. Add to .env
4. Create next auth endpoint in route.ts:
1. create: **/app/api/auth/[...nextauth]/route.ts**
```
import { authOptions } from "@/lib/auth";
import NextAuth from "next-auth/next";
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
```
npm install next-themes
npx shadcn-ui@latest add dropdown-menu
Auth screen:
npm install react-icons react-hot-toast react-hook-form axios
copy paste
api/sign-in folder
components/ auth-components folder
to use useSession()
add componets/ provider.tsx
wrap main layout.tsx within provider
npx shadcn-ui@latest add avatar
{session?.user ? (
<UserAccountNav user={session.user} /> //user name, sign out and redirect
) : (
<SignInButton /> // sign in and redirect
)}
signOut({ callbackUrl: '/' })
Add images to next.config.js