Аутентификация NextJs с Next-Auth против DRF

Question

У меня есть существующий проект Django, который я пытаюсь перенести с шаблонов на интерфейс NextJs. Я наткнулся на Next-Auth-js, который, кажется, хорош в Next Auth.

Однако документ, похоже, больше ориентирован на внутреннюю аутентификацию JS. Следуя этому примеру, я отправил переменную среды NEXTAUTH_URL на мой локальный хост конечной точки DRF:8002. Пока интерфейс работает на localhost:3000. Пока мой _app.js выглядит так:

<Provider options={{site: process.env.NEXTAUTH_URL,}} session={pageProps.session}  >
  <Component {...pageProps} />
</Provider>

Используя Nav.js для теста, я изменил href входа / выхода, чтобы указать на мои конечные точки Django, но похоже, что next-auth-js игнорирует это и размещает выборку сеанса в моем интерфейсе http://localhost:3000/api/auth/session вместо http://localhost:8002/api/auth/session.

Я буду признателен за любую помощь в том, как я могу правильно / безопасно реализовать эту аутентификацию с помощью Django Rest Framework (DRF).

Answer 1

Я думаю, что так и должно быть, ваш сайт nextjs будет своего рода прокси / промежуточным программным обеспечением для вашего API django client -> nextjs -> DRF, вы должны позволить ему обрабатывать сеансы и для любых действий, которые вам нужно выполнить в вашем API для любого шага аутентификации, поместите код для попадания в эти конечные точки в конфигурации обратных вызовов или событий, я думаю, что этот учебник более точен для вашего варианта использования

из документов

страницы /api/auth/[...nextauth].js

import Providers from `next-auth/providers`
...
providers: [
  Providers.Credentials({
    // The name to display on the sign in form (e.g. 'Sign in with...')
    name: 'Credentials',
    // The credentials is used to generate a suitable form on the sign in page.
    // You can specify whatever fields you are expecting to be submitted.
    // e.g. domain, username, password, 2FA token, etc.
    credentials: {
      username: { label: "Username", type: "text", placeholder: "jsmith" },
      password: {  label: "Password", type: "password" }
    },
    authorize: async (credentials) => {
      // Add logic here to look up the user from the credentials supplied
      const user = { id: 1, name: 'J Smith', email: '[e-mail]' }

      if (user) {
        // call your DRF sign in endpoint here
        // Any object returned will be saved in `user` property of the JWT
        return Promise.resolve(user)
      } else {
        // If you return null or false then the credentials will be rejected
        return Promise.resolve(null)
        // You can also Reject this callback with an Error or with a URL:
        // return Promise.reject(new Error('error message')) // Redirect to error page
        // return Promise.reject('/path/to/redirect')        // Redirect to a URL
      }
    }
  })
]

...

  events: {
    signOut: async (message) => { /* call your DRF sign out endpoint here */ },
  }

Answer 2

Ты можешь использовать callbacksздесь. https://next-auth.js.org/configuration/callbacks

      callbacks: {
  async signIn(user, account, profile) {
    return true
  },
  async redirect(url, baseUrl) {
    return baseUrl
  },
  async session(session, user) {
    return session
  },
  async jwt(token, user, account, profile, isNewUser) {
    return token
  }
}

в signIn обратного вызова, вы можете получить accessToken и tokenIdиз логина провайдера. Здесь вызовите свой DRF API и передайте эти токены в свой DRF, и когда вы вернете access_token а также refresh_tokenиз DRF. Добавьте их в свой пользовательский экземпляр. А потом в JWT обратный звонок, получите access а также refresh из user и добавьте их в token

Получил это из какого-то блога

Хотя вам также необходимо обработать токен обновления.