Configurando Next Auth y proveedores

Hola compañeros del futuro, (21/3/2022) la dependencia next-auth se actualizo a la v4, cambiaron un par de cosas que están en la documentación, pero les dejo aquí el código funcionando hasta el final de esta clase, la cookie se genera correctamente 😄.

PD. No olviden colocar sus el archivo .env para las variables de entorno y todo funcione correctamente.

https://github.com/onedrako/next_course_auth
En el commit: curso_auth_next class 4 working with next-auth v4
o : 8719c9f5dfe72eb63610b02e2b9e2ee68bc505ea

Y algunos enlaces:
https://next-auth.js.org/configuration/providers/credentials
https://stackoverflow.com/questions/70712152/how-to-fix-no-secret-warning-thrown-by-next-auth

En esta clase descubri que en el objeto crendentials de la función authorize tiene una clave llamada csrfToken, en este video explican como funcionan. En un futuro puede ser útil saberlo.

https://www.youtube.com/watch?v=CXSE89JGnek

https://stackoverflow.com/questions/5207160/what-is-a-csrf-token-what-is-its-importance-and-how-does-it-work

Al intentar instalar la dependecia me dice que requiere NODE v 16.13.0
Asi que solo actualizen node con nvm install 16.13.0

Recientemente NexthAuth hizo un upgrade a la versión 4.0, donde hubo algunos cambios en la manera de importar algunos providers.

Hasta el momento, jugando un poco con la documentación y con el código realicé lo siguiente:

import NextAuth from 'next-auth'

import type { NextAuthOptions } from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'

const options: NextAuthOptions = {
  debug: true,
  session: {},
  jwt: {},
  providers: [
    CredentialsProvider({
      name: 'Pomodoro',
      credentials: {
        // username: {
        //   label: 'Username',
        //   type: 'text',
        //   placeholder: '[email protected]',
        // },
        password: {
          label: 'Password',
          type: 'password',
          placeholder: '****************',
        },
      },
      async authorize(credentials) {
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/platzi`, {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { 'Content-type': 'application/json' },
        })

        const user = await res.json()

        if (res.ok && user) {
          return user
        }
        return null
      },
    }),
  ],
}

export default NextAuth(options)

Sin embargo, no ejecuta me ejecuta el redirect a home. ¿A alguien le ha pasado algo similar?

Para crear el secret necesario despues de los providers, pueden llamar en su terminal de linux o de wsl el siguiente comando

openssl rand -base64 32

Y utilizar la key obtenida para el NEXTAUTH_SECRET
Asi evitan el warning de no_secret

next-auth/client es ahora next-auth/react https://next-auth.js.org/getting-started/upgrade-v4#next-authreact

En estos casos cuando se adelanta a las clases profesor, si que sería más valioso tener el repo en los recursos…

1.- Install -> yarn add next-auth
2.- Add to .env -> NEXTAUTH_URL=