useAuth
v2.0.0
useAuth ist so konzipiert, dass sie schnell eingerichtet werden können. Sie benötigen ein Konto mit Auth0 oder Netlify -Identität und den entsprechenden Zugriffsschlüssel.
$ yarn add react-use-auth
Downloads von NPM, fügt Ihrem Paket hinzu. Json usw. Sie können auch NPM verwenden.
useAuth installiert keine eigenen Authentifizierungsclients. Stattdessen sind sie als Peer -Abhängigkeiten gekennzeichnet.
Installieren Sie auth0-js oder netlify-identity-widget je nachdem, was Sie verwenden möchten. Weitere bald kommen bald :)
$ yarn add auth0-js
oder
$ yarn add netlify-identity-widget
Sie werden Warnungen vor fehlenden Peer -Abhängigkeiten für den Kunden sehen, den Sie nicht verwenden. Das ist okay.
useAuth verwendet eine <AuthConfig> -Komponente, um Ihren Authentifizierungsclient zu konfigurieren. Wir verwenden XState hinter den Kulissen, um den Authentifizierungsstatus für Sie zu verwalten.
Stellen Sie sicher, dass AuthConfig -Renderer auf jeder Seite.
Fügen Sie es mit Gatsby zu gatsby-browser.js hinzu. Mit NextJs ist _app.js am besten. Sie müssen Ihren Komponentenbaum nicht einwickeln , aber Sie können es, wenn Sie es vorziehen. Wir stellen sicher, dass UsEAUTh das Server-Rendering nicht durchbricht. ✌️
// 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> Initialisiert die globale XState -Statusmaschine, setzt einen Auth0 -Client ein und validiert Benutzersitzungen auf jeder Last. Sie haben jetzt einen einfachen Zugriff auf Authentifizierung in Ihrer gesamten App :)
Die Konfigurationsoptionen sind:
navigate - Ihre Navigationsfunktion, die für Umleitungen verwendet wird. Getestet mit Gatsby, NextJs und React Router. Alles sollte funktionieren.
authProvider - Die UseAumh -Schnittstelle zu Ihrem Authentifizierungsanbieter.
params - Parameter für Ihren Authentifizierungsanbieter
useAuth -Client -Verpackungen bieten intelligente Standardeinstellungen an.
Weitere Details zur Verwendung benutzerdefinierter Konfiguration für jeden Client, der mit Auth0 verwendet wird, und mit Netlify -Identität verwenden. Um zu erfahren, wie dies funktioniert
PS: Verwenden Sie meine Auth0 -Domain und ClientID, um festzustellen, ob useAuth gut zu Ihnen passt. Deshalb sind sie im Code -Snippet sichtbar?
Auth0 und die meisten anderen Authentifizierungsanbieter verwenden OAuth. Dies erfordert die Umleitung Ihres Benutzers in das Anmeldeformular. Nach dem Anmeldung leitet der Anbieter Benutzer zu Ihrer App zurück.
Sie können diesen Schritt mit Netlify -Identität überspringen. Es verwendet ein einseitiges Popup.
Jede Möglichkeit zum Erstellen von React -Seiten sollte funktionieren. Hier ist der Code, den ich für Gatsby verwende:
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 Ziel ist es, eine Seite zu laden, einen kurzen Text anzuzeigen und die handleAuthentication von useAuth auf der Seitenlast auszuführen.
Diese Methode erstellt einen Cookie im lokalen Speicher mit den Informationen Ihres Benutzers und leitet sie auf die Homepage zurück. Sie können einen postLoginRoute -Param übergeben, um auf eine andere Seite umzuleiten.
Stellen Sie sicher, dass Sie <domain>/auth0_callback als gültige Rückruf -URL in Ihrer Auth0 -Konfiguration hinzufügen.
Sie sind bereit, useAuth für die Authentifizierung in Ihrer React -App zu verwenden. ?
Hier ist eine Login -Taste zum Beispiel:
const Login = ( ) => {
const { isAuthenticated , login , logout } = useAuth ( ) ;
if ( isAuthenticated ( ) ) {
return < Button onClick = { logout } > Logout </ Button > ;
} else {
return < Button onClick = { login } > Login </ Button > ;
}
} ; isAuthenticated ist eine Methode, die überprüft, ob das Cookie des Benutzers noch gültig ist.
login und logout und lösen Sie ihre jeweiligen Aktionen aus.
Sie können Ihren Benutzern sogar Hallo sagen:
// src/pages/index.js
const IndexPage = ( ) => {
const { isAuthenticated , user } = useAuth ( )
return (
< Layout >
< SEO title = "Home" />
< h1 > Hi { isAuthenticated ( ) ? user . name : "people" } </ h1 >
)
} Überprüfen Sie isAuthenticated und verwenden Sie das user . ✌️
Weitere detaillierte Dokumente finden Sie unter useauth.dev
Sie können es hier ausprobieren.
? Swizec Teller [email protected]
Beiträge, Probleme und Feature -Anfragen sind willkommen!
Fühlen Sie sich frei, Probleme mit der Seite zu überprüfen.
Ich möchte andere Authentifizierungsanbieter unterstützen. Bitte helfen Sie :)
Geben Sie ein ️, wenn dieses Projekt Ihnen geholfen hat!
Copyright © 2019 Swizec Teller [email protected].
Dieses Projekt ist MIT lizenziert.
Dieser Readme wurde mit ❤️ von Readme-MD-Generator generiert
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
Dejan | Jason Miller | Graham Friseur | Mateus Gabi | Jorge Galat | Swizec Teller ? | Nick Richmond |
Ollie Monk | 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 |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
