Kevin Powell - Community•3mo ago

next-auth redirecting to the same page over and over again

Hello, I am using next-auth, i have a custom login page and i have a dashboard page that is a protected route so you need to be authenticated in order to see it, when i try to access it it redirects me to the custom login page, so far so good, but when i enter the right username and password it redirects me to, the login form again?? and that happens in a loop. Here is my code. api/auth/[...nextauth]/options.ts

import type { NextAuthOptions } from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import CredentialsProvider from "next-auth/providers/credentials";

export const options: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      id: "username-login",
      name: "Credentials",
      credentials: {},
      async authorize(credentials, req) {
        const res = await fetch("api/auth/login", {
          method: "POST",
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" },
        });
        const data = await res.json();

        if (res.ok) {
          return data;
        }

        return null;
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/login",
    newUser: "/register",
  },
};

import type { NextAuthOptions } from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import CredentialsProvider from "next-auth/providers/credentials";

export const options: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      id: "username-login",
      name: "Credentials",
      credentials: {},
      async authorize(credentials, req) {
        const res = await fetch("api/auth/login", {
          method: "POST",
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" },
        });
        const data = await res.json();

        if (res.ok) {
          return data;
        }

        return null;
      },
    }),
  ],
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: "/login",
    newUser: "/register",
  },
};

api/auth/[...nextauth]/route.ts

import NextAuth from "next-auth";
import { options } from "./options";

const handler = NextAuth(options);

export { handler as GET, handler as POST };

import NextAuth from "next-auth";
import { options } from "./options";

const handler = NextAuth(options);

export { handler as GET, handler as POST };

/login.tsx

"use client";

import { signIn } from "next-auth/react";

export default function Login() {

  const submit = async (data: any) => {
    const { identifier, password } = data;

    try {
      const res = await signIn("credentials", { data });
    } catch (error) {
      console.error("Error:", error);
    }
  };

  return (
    <main className="flex h-full flex-col items-center justify-center">
        // on submit i run the submit function
    </main>
  );
}

"use client";

import { signIn } from "next-auth/react";

export default function Login() {

  const submit = async (data: any) => {
    const { identifier, password } = data;

    try {
      const res = await signIn("credentials", { data });
    } catch (error) {
      console.error("Error:", error);
    }
  };

  return (
    <main className="flex h-full flex-col items-center justify-center">
        // on submit i run the submit function
    </main>
  );
}

Help!!

1 Reply

Alex•3mo ago

I solved this guys how can i mark this as solved? ok i did it thanks anyway guys :)

Gaming

Programming

next-auth redirecting to the same page over and over again