Implementación de Login y Logout con NextAuth en React y Node.js
Contenido del curso
Configuración
Autenticación
Otras consideraciones
Implementación de Login y Logout con NextAuth en React y Node.js
Implementación de Login y Logout con NextAuth en React y Node.js
Contenido del curso
Cristian Iñiguez
Jhoan Stiven Zamora Caicedo
Wilson Fabian Pérez Sucuzhañay
Miguel Hernández
Sergio Andrés Majé Franco
Sergio Andrés Majé Franco
Zaidibeth Ramos
Jair Neri
Camilo Pardo
Cristian Guevara
Stivenson Carrillo Sarmiento
Les comparto como se vería el código con la librería actualizada
// components/Header/TopArea.tsx ... const LoginLogout = () => { const { data: session, status } = useSession() // obteniendo status const { t } = useTranslation(['common']) if (status === 'loading') return null // si esta cargando no mostrar nada if (!session) return <Button onClick={() => signIn()}>{t('signIn')}</Button> return ( <> <span>{session.user?.name}</span> <Button onClick={() => signOut()}>{t('signOut')}</Button> </> ) } ...
Otra clase donde se avanza por fuera del curso y no se ponen recursos en el video...
Pero si no quiero la URL por defecto api/signin y quiero algo tipo localhost:3000/signin como se podría hacer ese cambio ?
Claro que si
Pero tiene que configurar los inputs y estilos.
En la sección Example esta un ejemplo de como puede diseñar el signIn personalizado
https://next-auth.js.org/configuration/pages
Esa configuración se hace en el objeto options del [...nextauth].js
solo cambie:
import { getProviders, signIn } from "next-auth/react"
por
import { getProviders, signIn } from "next-auth/client"
Sin embargo la ruta /api/auth/signin seguira funcionando pero haciendo un redirect a la ruta que personalizo.
Puede ver más configuraciones del signIn en:
https://next-auth.js.org/getting-started/client#signin
Hasta el momento es lo que he descubierto : )
lo puedes hacer y se explica en este artículo Además, debes de agregar el arreglo de options lo siguiente:
pages: { signIn: '/signin', error: '/signin' }
Esto para redireccionar a la correcta página de login.
El método signIn también nos permite crear logins personalizados, como se explica en este artículo
Excelente aporte, justo necesitaba esto para cambiar la autenticacion que tengo actualmente en mi aplicacion por next-auth
Dejo mi commit como referencia - Commit link.
Contiene las actualizaciones de la version 4 y los tags para la seccion del login. A la descripcion de la clase le falto ser mas clara, estuve revisando los commits y no encontre uno con el proceso exacto de la clase asi que toco hacerlo a mano.
import { signOut, signIn, useSession } from "next-auth/react"
Cómo podría manejar la aplicación si aparte del login con Oauth, también quiero que el usuario tenga la opción de loguearse con email y contraseña. Tengo Que usar por aparte cada una? las validaciones de contraseña y password y el logueo por Oatuh? Y preguntar por ambas para saber por cuál método se logueo?
Cómo se hacen las formulas de peso molecular