javascript next-auth:login函数重定向到/API/auth/error

5vf7fwbs  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(170)

我遇到了一个问题,NextAuth总是返回到错误页面

它应该按照我下面的代码返回一个用户:***./app/account/login/page. tsx***

"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react";

const Login = () => {
  const router = useRouter();
  const [formSubmitting, setFormSubmitting] = useState(false);

  const handleFormSubmit = async (event: any) => {
    setFormSubmitting(true);
    event.preventDefault();
    try {
        const res = await signIn("credentials", {
            email: "john@gmail.com",
            password: "1234",
            redirect: false,
          });
          console.log(res);
    }
    catch(err) {
        console.error(err);
    }
  };

  return (
    <section id="login" className="flex items-center justify-center h-[100vh]">
      <div className="form-wrapper min-w-[300px] rounded-md">
        <h3 className="block mb-6 text-xl font-bold text-gray-900">Login</h3>
        <form onSubmit={handleFormSubmit}>
          <div className="mb-6">
            <label
              htmlFor="email"
              className="block mb-2 text-sm font-medium text-gray-900"
            >
              Your email
            </label>
            <input
              type="email"
              id="email"
              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              placeholder="name@plator.com"
              required
            />
          </div>
          <div className="mb-6">
            <label
              htmlFor="password"
              className="block mb-2 text-sm font-medium text-gray-900"
            >
              Your password
            </label>
            <input
              type="password"
              id="password"
              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
              required
            />
          </div>
          <div className="flex items-start mb-6">
            <div className="flex items-center h-5">
              <input
                id="remember"
                type="checkbox"
                value=""
                className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
              />
            </div>
            <label
              htmlFor="remember"
              className="ml-2 text-sm font-medium text-gray-900"
            >
              Remember me
            </label>
          </div>
          <div className="flex items-start mb-6">
            <a className="text-sm font-medium text-blue-700" href="#">
              Reset my password
            </a>
          </div>
          {/* <button
                            type="submit"
                            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center"
                        >
                            Login
                        </button> */}
          <div className="flex items-center">
            <SubmitButton
              isSubmitting={formSubmitting}
              onSubmittingLabel={"Logging In"}
              label={"Login"}
            />
          </div>
        </form>
      </div>
    </section>
  );
};

export default Login;

和***./app/api/auth/[... nextauh]. ts***

import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      id: "credentials",
      name: "Credentials",
      type: "credentials",
      credentials: {
        username: { type: "text", label: "Username" },
        password: { type: "text", label: "Password" },
      },
      authorize(credentials, req) {
        //I'm setting it to always return user
        return {
          id: "1234",
          name: "John Doe",
          email: "john@gmail.com",
          role: "admin",
        };
      },
    }),
  ],
  pages: {
    signIn: "/account/login",
    error: "/account/login",
    // signOut: '/auth/signout'
  },
  callbacks: {
    async signIn(user) {
      console.log("user: " + user);

      if (!user) return "/account/login?status=fail";

      return "/";
    },
  },
};

export default NextAuth(authOptions);

我已经关注了这个链接https://next-auth.js.org/configuration/providers/credentials,因为我是Next Auth的初学者,我不确定是什么问题。

hrirmatl

hrirmatl1#

由于您使用的是Next.js 13应用路由器,因此需要按以下方式配置NextAuth:

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

import NextAuth from "next-auth"

const handler = NextAuth({
  ...
})

export { handler as GET, handler as POST }

https://next-auth.js.org/configuration/initialization#route-handlers-app

相关问题