Аутентификация API пользователя приложения NextJS Dashboard

Я пытаюсь пройти этот учебник, но вместо получения данных через запрос PostgreSQL я хотел бы использовать API.

Я вызываю асинхронную функцию с помощью await, но она возвращает мне сначала неопределенное значение, а затем, когда API ответил, имя пользователя. Я хочу вернуть пользователя только один раз, чтобы аутентификация работала.

Вот мой код:

import Credentials from 'next-auth/providers/credentials';
import NextAuth from 'next-auth';
import type { User } from '@/app/lib/definitions';
import { authConfig } from './auth.config';
import { z } from 'zod';

async function getUser(email: string, password: string): Promise<User | undefined> {
  const axios = require('axios');
  axios
    .post(`http://localhost:4000/v1/auth/`, {email, password})
    .then((response: { data: any; }) => {
      console.info("response.data.user:", response.data.user);
      const userAuthenticated: User = {
        id: response.data.user.id,
        name: response.data.user.first_name + ' ' + response.data.user.last_name,
        email: response.data.user.email,
        password: ''
      };
      console.info("return userAuthenticated", userAuthenticated);
      return userAuthenticated;
    })
    .catch((error: { response: { data: { error: any; }; }; }) => {
      console.info("error:", error.response/*.data.error*/);
    })
    console.info("end of getUser");
}
 
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);
 
        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email, password);
          console.info('await getUser:', user);
          if (!user) {
            console.info('no user');
            return null;
          } else {
            console.info('user:', user);
            return user;
          }
        }
 
        return null;
      },
    }),
  ],
});

И что у меня в логах:

end of getUser
await getUser: undefined
no user
[auth][error] CredentialsSignin: Read more at https://errors.authjs.dev#credentialssignin
    at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:263:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AuthInternal (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/index.js:67:24)
    at async Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:126:34)
    at async signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:57:17)
    at async authenticate (webpack-internal:///(action-browser)/./app/lib/actions.ts:107:9)
    at async /Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:489
    at async tX (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:37:5207)
    at async rl (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:22994)
    at async doRender (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/base-server.js:1407:30)
    at async cacheEntry.responseCache.get.routeKind (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/base-server.js:1571:28)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/base-server.js:1479:28)
    at async DevServer.renderPageComponent (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/base-server.js:1850:24)
    at async DevServer.renderToResponseImpl (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/base-server.js:1888:32)
    at async DevServer.pipeImpl (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/base-server.js:902:25)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/next-server.js:266:17)
    at async DevServer.handleRequestImpl (/Users/adrien/Dev/iothings/pam-front/node_modules/next/dist/server/base-server.js:798:17)
response.data.user: {
  id: '6621ff2bc4d8d576d3cb6eae',
  first_name: 'Adrien',
  last_name: 'Chapelet',
  email: '[email protected]',
}
return userAuthenticated {
  id: '6621ff2bc4d8d576d3cb6eae',
  name: 'Adrien Chapelet',
  email: '[email protected]',
  password: ''
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Я уже сталкивался с подобной проблемой раньше. Попробуйте добавить ключевое слово return при вызове запроса axios, т.е.

return axios.post(...).then(...).catch(...)

Другие вопросы по теме