npm install next-auth@beta

// env.localauth_secret=generatetd_random_value

// src/auth.tsimport nextauth from "next-auth"export const config = {  providers: [],}export const { handlers, signin, signout, auth } = nextauth(config)

// src/app/api/auth/[...nextauth]/route.tsimport { handlers } from "@/auth" // referring to the auth.ts we just createdexport const { get, post } = handlers

// src/middleware.tsimport { auth } from "@/auth"export default auth((req) => {　　// add your logic here}export const config = {  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],　//  it's default setting}

// src/app/page.tsximport { auth } from "@/auth"import { redirect } from "next/navigation"export default async function page() {  const session = await auth()  if (!session) {    redirect('/login')  }  return (    
      
hello world!
      @@##@@    
  )}

// src/app/page.tsx"use client"import { usesession } from "next-auth/react"import { userouter } from "next/navigation"export default async function page() {  const { data: session } = usesession()  const router = userouter()  if (!session.user) {    router.push('/login')  }  return (    
      
hello world!
      @@##@@    
  )}// src/app/layout.tsximport type { metadata } from "next";import "./globals.css";import { sessionprovider } from "next-auth/react"export const metadata: metadata = {  title: "create next app",  description: "generated by create next app",};export default function rootlayout({  children,}: readonly) {  return (                            {children}                    );}

/src  /app    /api      /auth        [...nextauth]          /route.ts  // route handler    layout.tsx    page.tsx  auth.ts  // provider, callback, logic etc  middleware.ts  // a function before request

// prisma/schema.prismamodel user {  id            string    @id @default(cuid())  name          string?  email         string?   @unique  emailverified datetime?  image         string?  password      string?  accounts      account[]  sessions      session[]}model account {  // ... (standard auth.js account model)}model session {  // ... (standard auth.js session model)}// ... (other necessary models)

// src/lib/prisma.tsimport { 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

// src/auth.tsimport nextauth from "next-auth";import type { nextauthconfig } from "next-auth";import credentials from "next-auth/providers/credentials"import { prismaadapter } from "@auth/prisma-adapter"import { prisma } from "@/lib/prisma"import bcrypt from 'bcryptjs';export const config = {  adapter: prismaadapter(prisma),  providers: [    credentials({      credentials: {        email: { label: "email", type: "text" },        password: { label: "password", type: "password" }      },      authorize: async (credentials): promise => {        if (!credentials?.email || !credentials?.password) {          return null;        }        try {          const user = await prisma.user.findunique({            where: {              email: credentials.email as string            }          })          if (!user || !user.hashedpassword) {            return null          }          const ispasswordvalid = await bcrypt.compare(            credentials.password as string,            user.hashedpassword          )          if (!ispasswordvalid) {            return null          }          return {            id: user.id as string,            email: user.email as string,            name: user.name as string,          }        } catch (error) {          console.error('error during authentication:', error)          return null         }      }    })  ],  secret: process.env.auth_secret,  pages: {    signin: '/login',  },  session: {    strategy: "jwt",  },  callbacks: {    async jwt({ token, user }) {      if (user) {        token.id = user.id        token.email = user.email        token.name = user.name      }      return token    },    async session({ session, token }) {      if (session.user) {        session.user.id = token.id as string        session.user.email = token.email as string        session.user.name = token.name as string      }      return session    },  },} satisfies nextauthconfig;export const { handlers, auth, signin, signout } = nextauth(config);

// .env.localgoogle_client_id={client_id}google_client_secret={client_secret}

// src/auth.tsimport googleprovider from "next-auth/providers/google"  // add this import.export const { handlers, auth } = nextauth({  adapter: prismaadapter(prisma),  providers: [    credentialsprovider({      // ... (previous credentials configuration)    }),    googleprovider({      clientid: process.env.google_client_id,      clientsecret: process.env.google_client_secret,    }),  ],  // ... other configurations})

//// ui pages// src/app/login/loginpage.tsximport link from 'next/link'import { loginform } from '@/components/auth/loginform'import { separator } from '@/components/auth/separator'import { authlayout } from '@/components/auth/authlayout'import { googleauthbutton } from '@/components/auth/googleauthbutton'export default function loginpage() {  return (                            
        
          do not have an account?{' '}                      sign up                  
      
      )}// src/app/signup/signuppage.tsximport link from 'next/link'import { signupform } from '@/components/auth/signupform'import { separator } from '@/components/auth/separator'import { authlayout } from '@/components/auth/authlayout'import { googleauthbutton } from '@/components/auth/googleauthbutton'export default function signuppage() {  return (                            
        
          already have an account?{' '}                      sign in                  
      
      )}

//// components// src/components/auth/authlayout.tsximport react from 'react'interface authlayoutprops {  children: react.reactnode  title: string}export const authlayout: react.fc = ({ children, title }) => {  return (    
      
        
          {title}        
      
      
        
          {children}        
      
    
  )}// src/components/auth/googleauthbutton.tsximport { signin } from "@/auth"import { button } from "@/components/ui/button"interface googleauthbuttonprops {  text: string}export const googleauthbutton: react.fc = ({ text }) => {  return (     {        "use server"        await signin("google", { redirectto: '/' })      }}    >                                                                                {text}            )}// src/components/auth/loginform.tsx'use client'import { usetransition } from "react"import { useform } from "react-hook-form"import {  form,  formcontrol,  formfield,  formitem,  formlabel,  formmessage,} from "@/components/ui/form"import { input } from "@/components/ui/input"import { button } from "@/components/ui/button"import { loginresolver, loginschema } from "@/schema/login"import { usestate } from "react"import { userouter } from "next/navigation"import { formerror } from "@/components/auth/formerror"import { formsuccess } from "@/components/auth/formsuccess"import { login } from "@/app/actions/auth/login"import { loader2 } from "lucide-react"export const loginform = () => {  const [error, seterror] = usestate('')  const [success, setsuccess] = usestate('')  const [ispending, starttransition] = usetransition()  const router = userouter();  const form = useform({    defaultvalues: { email: '', password: ''},    resolver: loginresolver,  })  const onsubmit = (formdata: loginschema) => {     starttransition(() => {      seterror('')      setsuccess('')      login(formdata)        .then((data) => {          if (data.success) {            setsuccess(data.success)            router.push('/setup')          } else if (data.error) {            seterror(data.error)          }        })        .catch((data) => {          seterror(data.error)        })    })  }  return (                  
           (                              email address                                                                                            )}          />           (                              password                                                                                            )}          />                            
                  {ispending ? (                                        loading...                        )}// src/components/auth/signupform.tsx'use client'import { usetransition } from "react"import { useform } from "react-hook-form"import {  form,  formcontrol,  formfield,  formitem,  formlabel,  formmessage,} from "@/components/ui/form"import { input } from "@/components/ui/input"import { button } from "@/components/ui/button"import { signupresolver, signupschema } from "@/schema/signup"import { usestate } from "react"import { userouter } from "next/navigation"import { formerror } from "@/components/auth/formerror"import { formsuccess } from "@/components/auth/formsuccess"import { signup } from "@/app/actions/auth/signup"import { loader2 } from "lucide-react"export const signupform = () => {  const [error, seterror] = usestate('')  const [success, setsuccess] = usestate('')  const [ispending, starttransition] = usetransition()  const router = userouter();  const form = useform({    defaultvalues: { name: '', email: '', password: ''},    resolver: signupresolver,  })  const onsubmit = async (formdata: signupschema) => {     starttransition(() => {      seterror('')      setsuccess('')      signup(formdata)        .then((data) => {          if (data.success) {            setsuccess(data.success)            router.push('/login')          } else if (data.error) {            seterror(data.error)          }        })        .catch((data) => {          seterror(data.error)        })    })  }  return (                  
           (                              username                                                                                            )}          />           (                              email address                                                                                            )}          />           (                              password                                                                                            )}          />                            
                  {ispending ? (                                        loading...                        )}// src/components/auth/formsuccess.tsximport { checkcircledicon } from "@radix-ui/react-icons";interface formsuccessprops {  message?: string;}export const formsuccess = ({ message }: formsuccessprops) => {  if (!message) return null;  return (    
            
{message}
    
  );};// src/components/auth/formerror.tsximport { exclamationtriangleicon } from "@radix-ui/react-icons";interface formerrorprops {  message?: string;}export const formerror = ({ message }: formerrorprops) => {  if (!message) return null;  return (    
            
{message}
    
  );};// src/components/auth/separator.tsxexport const separator = () => {  return (    
      
        
      
      
        or continue with      
    
  )}

//// actions// src/app/actions/auth/login.ts'use server'import { loginschema, loginschema } from '@/schema/login'import { signin } from '@/auth'export const login = async (formdata: loginschema) => {  const email = formdata['email'] as string  const password = formdata['password'] as string  const validatedfields = loginschema.safeparse({    email: formdata.email as string,    password: formdata.password as string,  })  if (!validatedfields.success) {    return {       errors: validatedfields.error.flatten().fielderrors,      message: 'login failed. please check your input.'    }  }  try {    const result = await signin('credentials', {      redirect: false,      callbackurl: '/setup',      email,      password    })    if (result?.error) {      return { error : 'invalid email or password'}    } else {      return { success : 'login successfully'}    }  } catch {    return { error : 'login failed'}  }}// src/app/actions/auth/signup.ts'use server'import bcrypt from 'bcryptjs'import { signupschema, signupschema } from "@/schema/signup"import { prisma } from '@/lib/prisma';export const signup = async (formdata: signupschema) => {  const validatedfields = signupschema.safeparse({    name: formdata.name as string,    email: formdata.email as string,    password: formdata.password as string,  })  if (!validatedfields.success) {    return {       errors: validatedfields.error.flatten().fielderrors,      message: 'sign up failed. please check your input.'    }  }  try {    const hashedpassword = await bcrypt.hash(validatedfields.data.password, 10);    const existinguser = await prisma.user.findunique({      where: { email: validatedfields.data.email }    })    if (existinguser) {      return { error: 'user already exists!' }    }    await prisma.user.create({      data: {        name:  validatedfields.data.name,        email:  validatedfields.data.email,        hashedpassword: hashedpassword,      },    });    return { success: 'user created successfully!' }  } catch (error) {    return { error : `sign up failed`}  }}

//// validations// src/schema/login.tsimport * as z from 'zod';import { zodresolver } from '@hookform/resolvers/zod'; export const loginschema = z.object({  email: z.string().email('this is not valid email address'),  password: z    .string()    .min(8, { message: 'password must contain at least 8 characters' }),});export type loginschema = z.infer;export const loginresolver = zodresolver(loginschema);// src/schema/signup.tsimport * as z from 'zod';import { zodresolver } from '@hookform/resolvers/zod'; export const signupschema = z.object({  name: z.string().min(1, {    message: 'name is required'  }),  email: z.string().email('this is not valid email address'),  password: z    .string()    .min(8, { message: 'password must contain at least 8 characters' }),});export type signupschema = z.infer;export const signupresolver = zodresolver(signupschema);

// src/middleware.tsimport { nextresponse } from 'next/server'import { auth } from "@/auth"export default auth((req) => {  const { nexturl, auth: session } = req  const isloggedin = !!session  const isloginpage = nexturl.pathname === "/login"  const issignuppage = nexturl.pathname === "/signup"  const issetuppage = nexturl.pathname === "/setup"  // if trying to access /setup while not logged in  if (!isloggedin && issetuppage) {    const loginurl = new url("/login", nexturl.origin)    return nextresponse.redirect(loginurl)  }  // if trying to access /login or /signup while already logged in  if (isloggedin && (isloginpage || issignuppage)) {    const dashboardurl = new url("/", nexturl.origin)    return nextresponse.redirect(dashboardurl)  }  // for all other cases, allow the request to pass through  return nextresponse.next()})export const config = {  matcher: ["/login","/signup", "/setup", "/"],};

/src  /app    /actions      /login.ts  // Login Action      /signup.ts  // Signup Action    /api      /auth        [...nextauth]          /route.ts    /login      page.tsx  // Login Page    /signup      page.tsx  // Sign Up Page    layout.tsx    page.tsx  /components    /auth      AuthLayout.tsx      GoogleAuthButton.tsx      LoginForm.tsx      SignupForm.tsx      FormSuccess.tsx      FormError.tsx      Separator.tsx  /schema    login.ts    signup.ts  auth.ts  // in src folder  middleware.ts  // in src folder