如何将 api 错误返回到 NextAuth.js 中的登录组件

Posted 2023-02-21

【中文标题】如何将 api 错误返回到 NextAuth.js 中的登录组件

【英文标题】：How to return api errors to Login Component in NextAuth.js

【发布时间】：2022-01-20 22:44:17

【问题描述】：

如何将 API 错误返回到 NextAuth.js 中的登录组件。实际上，我正在尝试将错误传递回 NextAuth（凭据提供程序）中的登录组件。我在控制台error: "CredentialsSignin" ok: false status: 401 url: null [[Prototype]]: Object 中获取此对象，一切正常，就像我能够登录一样，但是当我尝试处理来自 API 的错误时，我无法处理它们。

[...nextauth.js] 文件

export default (req, res) =>
NextAuth(req, res, 
    providers: [
      CredentialsProvider(
            authorize: async (credentials) => 
                try 
                    const data = 
                        email: credentials.email,
                        password: credentials.password
                    
                    const user = await login(data);
                    console.log("401 Error",user.data);
                    if (user.data.status==200) 
                        console.log("200 data",user.data);
                         return Promise.resolve(user.data);
                      else if(user.data.status==401)
                        // Here I wants to Handle Errors and return them back to My login Compenent
                      
                 catch (error) 
                    if (error.response) 
                        console.log(error.response);
                        Promise.reject(new Error('Invalid Username  and Password combination'));
                    
                     
            ,
             

        ),
        GoogleProvider(
          clientId: process.env.GOOGLE_ID,
          clientSecret: process.env.GOOGLE_SECRET,
        ),
    ],
    pages: 
      signIn: '/login',
    ,
    callbacks: 
        jwt: async (token,user)=>
            
            if(user)
                token.userid = user.id; 
                token.name = user.username;
                token.token = user.token;
            
            return token;
        ,
        session: (session,token)=>
            return session;  
        
      ,
      secret:"test",
      jwt:
          secret:"test",
          encryption:true,
      ,
    site: process.env.NEXTAUTH_URL || "http://localhost:3000",
    session: 
        jwt: true, 
        maxAge: 1 * 3 * 60 * 60, // 3 hrs
        updateAge: 24 * 60 * 60, // 24 hours
      

);

 const login = async data => 
     
var config = 
    headers: 
        'Content-Type': "application/json; charset=utf-8",
        'corsOrigin': '*',
        "Access-Control-Allow-Origin": "*"
    
;
const url = 'api/auth/login';
const result = await axios.post(url,data,config);
return result;

;

登录组件

const LoginSubmit = async (event) => 
    event.preventDefault();
    const enteredEmail = inputText.email;
    const enteredPassword = inputText.password;
   // console.log(enteredEmail);
    const result = await signIn("credentials", 
      redirect: false,
      email: enteredEmail,
      password: enteredPassword,
    );
     console.log("Final Result",result);
  ;

【参考方案1】：

是的，你可以做到： 试试看：

    // component.js
    const res = await signIn("credentials", 
    email: inputs.email,
    password: inputs.password,
    callbackUrl: `/`,
    redirect: false,
  );

  if (res?.error) 
    setLoading(false);
    Swal.fire("Invalid Login", "username or password is incorrect");
  

并且在 Nextauth 文件中，如果用户输入了无效的凭据，您必须抛出错误！

    //[...nextauth].js
     const providers = [
        Providers.Credentials(
         name: "credentials",
         authorize: async (credentials) => 
         //statr try
        try 
          const user = await 
          axios.post(`$API_URL/auth/local`, 
           identifier: credentials.email,
           password: credentials.password,
           );

        if (user) 
           return  status: "success", 
                 data:user.data ;
      
      catch (e) 
      throw new Error("Not found ");
     
     ,
   ),
   ];

【讨论】：

它不起作用...因为我从 API 收到错误...

你用的是哪个api？

在登录函数中使用 try 和 cach 块，你应该返回一个像空数组一样的值，然后检查登录函数的结果是否为空数组然后抛出错误。

try const 结果 = await axios.post(url,data,config);返回结果； catch 返回 []