Next.js Discord

Discord Forum

Asking to login in every refresh after i added redirect to login page if session false

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Auth was working fine but i wanted it to redirect to /login if session is false, But after i fixed that it redirects me to login page on every refresh
Any help would be appreciated

Dashboard layout.tsx : 
"use client"
import SidebarDashboard from "./components/sidebar/sidebar";
import NavbarDashboard from "./components/navbar/navbar";
import { useSession, signOut, signIn } from "next-auth/react";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const { data: session } = useSession();
  console.log(session)
  if (!session) {
    return (
        void signIn("login")
    );
  }

  return (
    <section>
      <div className="flex flex-col min-h-screen">
        <NavbarDashboard />
        <div className="flex flex-grow">
          <SidebarDashboard />
          <div className="flex-grow p-8">
            {children}
          </div>
        </div>
      </div>
    </section>
  );
}

10 Replies

Asiatic LionOP
[...nextauth]/route.ts : 
import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcrypt";
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const handler = NextAuth({
    adapter: PrismaAdapter(prisma),
    providers: [
        CredentialsProvider({
            name: "credentials",
            credentials: {
                username: { label: "Username", type: "text", placeholder: "John Smith" },
                password: { label: "Password", type: "password" },
                email: { label: "Email", type: "text", placeholder: "jsmith" }
            },
            async authorize(credentials) {

                if (!credentials?.email || !credentials?.password) {
                    return null;
                }


                const user = await prisma.user.findUnique({
                    where: {
                        email: credentials.email
                    }
                })

                if (!user) {
                    return null;
                }


                const passwordsMatch = await bcrypt.compare(credentials.password, user.hashedPassword!);

                if (!passwordsMatch) {
                    return null;
                }

                return user;
            },
        })
    ],
    session: {
        strategy: "jwt",
    },
    pages: {
        signIn: '/login'
    },
    secret: process.env.NEXTAUTH_SECRET,
    debug: process.env.NODE_ENV === "development",
});

export { handler as GET, handler as POST };
And when i click the login button i get repeatedly :
GET /api/auth/providers 200 in 20ms
GET /api/auth/providers 200 in 18ms
GET /api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fdashboard%2Fhome 302 in 10ms
GET /login?callbackUrl=http%3A%2F%2Flocalhost%3A3001 200 in 48ms
GET /favicon.ico 200 in 6ms
GET /api/auth/session 200 in 22ms
GET /api/auth/session 200 in 16ms
GET /favicon.ico 200 in 20ms
GET /api/auth/session 200 in 20ms
GET /api/auth/session 200 in 27ms
GET /api/auth/session 200 in 18ms
GET /api/auth/providers 200 in 17ms
GET /api/auth/csrf 200 in 11ms
POST /api/auth/callback/credentials 401 in 100ms
And some error responses
I dont get why i get this POST /api/auth/callback/credentials 401 in 100ms
Login page : 
const Login = () => {
  const router = useRouter();
  const [data, setData] = useState({
    email: "",
    password: "",
  });

  const loginUser = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    signIn('credentials', {
        ...data,
        redirect: false,
    });
    router.push("/dashboard/home");
  }
Asiatic LionOP
What do you guys suggest me to check?
I also wrapped it correctly in Providers.tsx : 
'use client'

import {NextUIProvider} from '@nextui-org/react'
import {ThemeProvider as NextThemesProvider} from "next-themes";
import {useRouter} from 'next/navigation'
import { SessionProvider } from "next-auth/react";

interface ProvidersProps {
  children: React.ReactNode;
}

export function Providers({ children }: ProvidersProps) {
  const router = useRouter();
  return (
    <SessionProvider>
      <NextUIProvider navigate={router.push}>
        <NextThemesProvider attribute="class" defaultTheme="dark">
          {children}
        </NextThemesProvider>
      </NextUIProvider>
    </SessionProvider>
  )
}
Asiatic LionOP
Can someone please answer?
Asiatic LionOP
BUMP