Descarga de useAuth - Descargar código fuente useAuth

useAuth

Código Fuente de IA

v2.0.0

Descargar

useatal

La forma más rápida de agregar autenticación a su aplicación React

Empezando

useAuth está diseñado para configurar rápidamente. Necesitará una cuenta con Auth0 o Netlify Identity y las claves de acceso apropiadas.

1. Instale el gancho

 $ yarn add react-use-auth

Descargas de NPM, se suma a su paquete.json, etc. También puede usar NPM.

2. Instale su cliente de autores

useAuth no instala sus propios clientes de autenticación. En cambio, están marcados como dependencias de pares.

Instale auth0-js o netlify-identity-widget dependiendo de lo que le gustaría usar. Más pronto :)

 $ yarn add auth0-js

o

 $ yarn add netlify-identity-widget

Verá advertencias sobre las dependencias de pares faltantes para el cliente que no está utilizando. Eso está bien.

3. Configurar con Authconfig

useAuth utiliza un componente <AuthConfig> para configurar su cliente de autenticación. Utilizamos Xstate detrás de escena para administrar el estado de autenticación para usted.

Asegúrese de que AuthConfig se renderice en cada página.

Con Gatsby, agrégalo a gatsby-browser.js . Con NextJS, _app.js es lo mejor. No necesita envolver su árbol de componentes, pero puede si lo prefiere. Nos aseguramos de que USEAUTH no rompa la representación del lado del servidor. ✌️

 // gatsby-browser.js
import * as React from "react" ;
import { navigate } from "gatsby" ;

import { AuthConfig } from "react-use-auth" ;
import { Auth0 } from "react-use-auth/auth0" ;

export const wrapRootElement = ( { element } ) => (
    < >
        < AuthConfig
            navigate = { navigate }
            authProvider = { Auth0 }
            params = { {
                domain : "useauth.auth0.com" ,
                clientID : "GjWNFNOHqlino7lQNjBwEywalaYtbIzh"
            } }
        />
        { element }
    </ >
) ;

<AuthConfig> Inicializa la máquina de estado XSTATE global, configura un cliente Auth0 y valida las sesiones de usuario en cada carga. Ahora tiene fácil acceso a la autenticación en toda su aplicación :)

Las opciones de configuración son:

navigate : su función de navegación, utilizada para redireccionamientos. Probado con Gatsby, NextJS y React Router. Cualquier cosa debería funcionar.
authProvider : la interfaz usauth a su proveedor de autenticación.
params : parámetros para su proveedor de autenticación

Los envoltorios de clientes useAuth proporcionan valores predeterminados inteligentes.

Más detalles sobre el uso de la configuración personalizada para cada cliente en uso con AUTH0, y use con NetLify Identity. Para aprender sobre cómo funciona esto, vaya a crear un proveedor de autores

PD: No dude en usar mi dominio Auth0 y Clientid para ver si useAuth es una buena opción para usted. ¿Por eso son visibles en el fragmento de código?

4. Crea la página de devolución de llamada

Auth0 y la mayoría de los otros proveedores de autenticación usan OAuth. Eso requiere redirigir a su usuario a su formulario de inicio de sesión. Después de iniciar sesión, el proveedor redirige a los usuarios a su aplicación.

Puede omitir este paso con NetLify Identity. Utiliza una ventana emergente en la página.

Cualquier forma de crear páginas React debería funcionar, aquí está el código que uso para Gatsby:

 import * as React from "react"
import { useAuth } from "react-use-auth"

const Auth0CallbackPage = ( ) => {
    const { handleAuthentication } = useAuth ( )
    React . useEffect ( ( ) => {
        handleAuthentication ( )
    } , [ handleAuthentication ] )

    return (
        < h1 >
            This is the auth callback page,
            you should be redirected immediately!
        </ h1 >
    )
}

export default Auth0CallbackPage

El objetivo es cargar una página, mostrar brevemente algún texto y ejecutar el método handleAuthentication desde useAuth en la carga de la página.

Ese método creará una cookie en el almacenamiento local con la información de su usuario y redirigirá a la página de inicio. Puede pasar un parámetro postLoginRoute para redirigir a una página diferente.

Asegúrese de agregar <domain>/auth0_callback como una URL de devolución de llamada válida en su configuración Auth0.

5. Disfrute de usauth

Estás listo para usar useAuth para la autenticación en su aplicación React. ?

Aquí hay un botón de inicio de sesión, por ejemplo:

 const Login = ( ) => {
    const { isAuthenticated , login , logout } = useAuth ( ) ;

    if ( isAuthenticated ( ) ) {
        return < Button onClick = { logout } > Logout </ Button > ;
    } else {
        return < Button onClick = { login } > Login </ Button > ;
    }
} ;

isAuthenticated es un método que verifica si la cookie del usuario sigue siendo válida.

login y logout activan sus respectivas acciones.

Incluso puedes saludar a tus usuarios:

 // src/pages/index.js

const IndexPage = ( ) => {
  const { isAuthenticated , user } = useAuth ( )

  return (
    < Layout >
      < SEO title = "Home" />
      < h1 > Hi { isAuthenticated ( ) ? user . name : "people" } </ h1 >
  )
}

Compruebe isAuthenticated y luego use el objeto user . ✌️

Para obtener documentos más detallados, visite useeuth.dev

Puede probarlo aquí https://gatsby-useeuth-example.now.sh/

Autor

? Cajero swizec [email protected]

Github: @swizec
Twitter: @swizec
Blog: swizec.com/blog

? Que contribuye

¡Las contribuciones, los problemas y las solicitudes de funciones son bienvenidas!
No dude en verificar la página de problemas.

Estoy buscando apoyar a otros proveedores de autenticación. Por favor ayuda :)

Muestra tu apoyo

¡Dale una osa si este proyecto te ayudó!

Licencia

Este readMe fue generado con ❤️ por ReadMe-MD-Generator

Colaboradores

Gracias a estas maravillosas personas (Key Emoji):

_Dejan	_{Jason Miller}	_{Barbero de Graham}	_{Mateus Gabi}	_{Jorge Galat}	_{Cajero de swizec} ?	_{Nick Richmond}
_{Ollie Monje}	_{Henrik Wenz} ?	_{Max Chehab}	_{Joel Bartlett}	_{Siddik mehdi}	_Cadena ?	_{Jorge Cuadra}
_{Øyvind Marthinsen}	_{Fredrik Søgaard}	_{Artem Rudenko}	_{Travers Pinkerton}	_{Eric Hodges}	_{Devin Fitzsimons}	_{Jason Laster} ?
_{Patrick Arminio}