主页 / coding / 问题 / 78930048
Accepted
Carlos
Asked: 2024-08-30 08:08:44 +0800 CST

使用 Next-auth v5 在 Next.js 上成功登录后重定向用户的问题

  • 772

我正在使用 Next.js 14.2.5、tRPC 和 Next-auth 5.0.0-beta.20（或 Auth.js）制作一个应用程序进行身份验证。用户登录应用程序后，我想将他重定向到另一个页面，但是，当我尝试这样做时，会出现 NEXT_REDIRECT 错误，应用程序什么也不做。据我所知，这个错误是预料之中的，你应该把它抛到 catch 块的末尾，这样 next.js 就可以继续重定向，但这是行不通的。

这是我用于登录的 tRPC 端点的代码：

loginProcedure: publicProcedure.input(LoginSchema).mutation(async (opts) => {
    const { input } = opts;
    const validatedFields = LoginSchema.safeParse(input);
    if (!validatedFields.success) {
      throw new TRPCError({ code: "PARSE_ERROR" }); //"invalid fields"
    }
    const { email, password } = validatedFields.data;
    try {
      await signIn("credentials", {
        email,
        password,
        redirectTo: DEFAULT_LOGIN_REDIRECT,
      });
    } catch (error) {
      if (error instanceof AuthError) {
        switch (error.type) {
          case "CredentialsSignin":
            throw new TRPCError({
              code: "UNAUTHORIZED",
              message: "Invalid credentials",
            });

          default:
            throw new TRPCError({
              code: "UNAUTHORIZED",
              message: "Something went wrong",
            });
        }
      }
      console.log(error)
      throw error;
    }
  }),

这是我的 middleware.ts

import { auth } from "@/auth";
import {
  DEFAULT_LOGIN_REDIRECT,
  apiAuthPrefix,
  authRoutes,
  publicRoutes,
} from "@/routes";

export default auth((req) => {
  const { nextUrl } = req;
  const isLoggedIn = !!req.auth;

  const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
  const isPublicRoute = publicRoutes.includes(nextUrl.pathname);
  const isAuthRoute = authRoutes.includes(nextUrl.pathname);

  if (isApiAuthRoute) {
    return ;
  }
  if(isAuthRoute){
    if (isLoggedIn){
      return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl))
    }
    return ;
  }
  if(!isLoggedIn && !isPublicRoute){
    return Response.redirect(new URL("/login", nextUrl))
  }
});

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    // Always run for API routes
    "/(api|trpc)(.*)",
  ],
};

如果我输入了正确的凭据，登录就不会出现问题，我可以获取当前会话，但重定向永远不会发生。这是 Next.js 错误还是我遗漏了什么？

我也尝试了几种解决方案，主要是这个 github 线程中的那些。

authentication

1 个回答

  1. Best Answer

    我使用以下代码创建了一个 action.ts 文件：

    "use server";

export async function doCredentialLogin(formData: FormData) {
  try {
    const response = await signIn("credentials", {
      email: formData.get("email"),
      password: formData.get("password"),
      redirect: false,
    });

    revalidatePath("/");
    return response;
  } catch (err) {
    console.error("*** doCredentialLogin Error ***", err);
    return err;
  }
}

    然后，在我的登录表单组件（LoginForm.tsx）中，我有以下代码：

    "use client";

import { doCredentialLogin } from "@/app/actions";
import { useRouter } from "next/navigation";
// ...

const router = useRouter();

// ...
const formData = new FormData();
formData.append("email", email);
formData.append("password", password);
await doCredentialLogin(formData);
// After successful login, redirect the user
router.push("/dashboard");

    • 0

相关问题