useAuth
v2.0.0
useAuth est conçu pour être rapide à configurer. Vous aurez besoin d'un compte avec Auth0 ou Netlify Identity et les clés d'accès appropriées.
$ yarn add react-use-auth
Les téléchargements à partir de NPM, ajoutent à votre package.json, etc. Vous pouvez également utiliser NPM.
useAuth n'installe pas ses propres clients d'authentification. Au lieu de cela, ils sont marqués comme des dépendances par les pairs.
Installez auth0-js ou netlify-identity-widget en fonction de ce que vous souhaitez utiliser. Plus à venir bientôt :)
$ yarn add auth0-js
ou
$ yarn add netlify-identity-widget
Vous verrez des avertissements sur les dépendances par les pairs manquantes pour le client que vous n'utilisez pas. C'est bon.
useAuth utilise un composant <AuthConfig> pour configurer votre client d'authentification. Nous utilisons XState dans les coulisses pour gérer l'état d'authentification pour vous.
Assurez-vous que AuthConfig rende à chaque page.
Avec Gatsby, ajoutez-le à gatsby-browser.js . Avec NextJS, _app.js est le meilleur. Vous n'avez pas besoin d'envelopper votre arbre de composants, mais vous le pouvez si vous préférez. Nous nous assurons que UseAuth ne casse pas le rendu côté serveur. ✌️
// 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> Initialise la machine Global XState State, configure un client Auth0 et valide les sessions utilisateur à chaque charge. Vous avez maintenant un accès facile à l'authentification dans l'ensemble de votre application :)
Les options de configuration sont:
navigate - votre fonction de navigation, utilisée pour les redirections. Testé avec Gatsby, NextJS et React Router. Tout devrait fonctionner.
authProvider - L'interface UseAuth à votre fournisseur d'authentification.
params - Paramètres pour votre fournisseur d'authentification
Les emballages de clients useAuth fournissent des valeurs par défaut intelligentes.
Plus de détails sur l'utilisation de la configuration personnalisée pour chaque client utilisé avec Auth0 et utilisez avec NetLify Identity. Pour savoir comment cela fonctionne, allez pour créer un fournisseur d'autheurs
PS: N'hésitez pas à utiliser mon domaine Auth0 et mon clientId pour voir si useAuth vous convient. C'est pourquoi ils sont visibles dans l'extrait de code?
Auth0 et la plupart des autres fournisseurs d'authentification utilisent OAuth. Cela nécessite de rediriger votre utilisateur vers son formulaire de connexion. Après la connexion, le fournisseur redirige les utilisateurs vers votre application.
Vous pouvez ignorer cette étape avec Netlify Identity. Il utilise une fenêtre contextuelle en page.
Toute façon de créer des pages React devrait fonctionner, voici le code que j'utilise pour 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 L'objectif est de charger une page, d'afficher brièvement du texte et d'exécuter la méthode handleAuthentication à partir de useAuth sur le chargement de la page.
Cette méthode créera un cookie dans le stockage local avec les informations de votre utilisateur et redirigera vers la page d'accueil. Vous pouvez passer un param de postLoginRoute pour rediriger vers une autre page.
Assurez-vous d'ajouter <domain>/auth0_callback comme URL de rappel valide dans votre configuration Auth0.
Vous êtes prêt à utiliser useAuth pour l'authentification dans votre application React. ?
Voici un bouton de connexion par exemple:
const Login = ( ) => {
const { isAuthenticated , login , logout } = useAuth ( ) ;
if ( isAuthenticated ( ) ) {
return < Button onClick = { logout } > Logout </ Button > ;
} else {
return < Button onClick = { login } > Login </ Button > ;
}
} ; isAuthenticated est une méthode qui vérifie si le cookie de l'utilisateur est toujours valide.
login et logout déclenchent leurs actions respectives.
Vous pouvez même dire bonjour à vos utilisateurs:
// src/pages/index.js
const IndexPage = ( ) => {
const { isAuthenticated , user } = useAuth ( )
return (
< Layout >
< SEO title = "Home" />
< h1 > Hi { isAuthenticated ( ) ? user . name : "people" } </ h1 >
)
} Vérifiez isAuthenticated , puis utilisez l'objet user . ✌️
Pour des documents plus détaillés, visitez USUAUTH.DEV
Vous pouvez l'essayer ici https://gatsby-USEAuth-example.now.sh/
? Swizec Teller [email protected]
Les contributions, les problèmes et les demandes de fonctionnalités sont les bienvenus!
N'hésitez pas à vérifier la page des problèmes.
Je cherche à prendre en charge d'autres fournisseurs d'authentification. S'il vous plaît aider :)
Donnez un ️ si ce projet vous a aidé!
Copyright © 2019 Swizec Teller [email protected].
Ce projet est sous licence MIT.
Cette lecture a été générée avec ❤️ par ReadMe-MD-Generator
Merci à ces gens merveilleux (clé emoji):
Dejan | Jason Miller | Graham Barber | Mateus Gabi | Jorge Galat | Swizec Teller ? | Nick Richmond |
Moine d'Ollie | Henrik Wenz ? | Max Chehab | Joel Bartlett | Siddik Mehdi | Jess ? | Jorge Cuadra |
Øyvind Marthinsen | Fredrik Søgaard | Artem Rudenko | Travers Pinkerton | Eric Hodges | Devin Fitzsimons | Jason Laster ? |
Patrick Arminio |
Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!
