Auth.js/NextAuth – Application redirect not working after successful sign in

I am using Auth.js Google Oauth to login the user, then checking if that email exists in my database. If yes, then I route the user to “/dashboard/inventory”. Once sign in is successful, my app is not auto-routing the user to “/dashboard/inventory”. It’s stuck on “/”. I am able to manually go to “/dashboard/inventory” and verify the authentication is successful.

If the user signs out, then the app properly redirects to “/” as I have setup, but that’s probably because I also have a middleware.js in place which is set to redirect to “/” if no user session is found.

app/auth.js

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
import { supabase } from "@/lib/supabase"

export const { handlers, auth, signIn, signOut } = NextAuth({
    providers: [Google],
    callbacks: {
        async signIn({ user }) {
            const { data, error } = await supabase
                .from('stores')
                .select()
                .eq('email', user.email)
                .single()

            if (error || !data) {
                return '/error'
            }

            return true
        },
    },
    pages: {
        error: '/error'
    }
})

app/utils/auth-utils.js

"use server"
import { signIn, signOut } from '@/auth'

const SignInWithGoogle = async () => {
    await signIn('google', { callbackUrl: "/dashboard/inventory" })
}

const SignOut = async () => {
    await signOut({ callbackUrl: "/" })
}

export { SignInWithGoogle, SignOut }

app/components/AuthComponent.js

"use client"
import { useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { SignInWithGoogle, SignOut } from "@/lib/auth-utils"

const AuthComponent = () => {
    const searchParams = useSearchParams()
    const error = searchParams?.get('error')

    return (
        <div className="flex flex-col w-full h-full justify-center items-center">{error && (
            <p className="text-red-500 mb-4">
                {error}
            </p>
        )}
            <form action={SignInWithGoogle}>
                <Button className="gap-2 font-semibold m-4" variant="secondary">
                    sign in with google
                </Button>
            </form>
            <form action={SignOut}>
            <Button type="submit" variant="secondary">sign out</Button>
            </form>
            </div>
    )
}

export default AuthComponent

app/page.js

import AuthComponent from "@/components/app/AuthComponent"

const HomePage = () => {
    

    return (
        <div className="flex w-full justify-center items-center overflow-hidden flex-col h-dvh p-4">
            <AuthComponent/>
        </div>
    )
}

export default HomePage