useAuth
v2.0.0
useAuth foi projetado para ser rápido para configurar. Você precisará de uma conta com a identidade auth0 ou netlify e as teclas de acesso apropriadas.
$ yarn add react-use-auth
Downloads do NPM, adiciona ao seu package.json, etc. Você também pode usar o NPM.
useAuth não instala seus próprios clientes de autenticação. Em vez disso, eles são marcados como dependências de pares.
Instale o Widget auth0-js ou netlify-identity-widget dependendo do que você gostaria de usar. Mais em breve :)
$ yarn add auth0-js
ou
$ yarn add netlify-identity-widget
Você verá avisos sobre a falta de dependências de pares para o cliente que você não está usando. Tudo bem.
useAuth usa um componente <AuthConfig> para configurar seu cliente de autenticação. Usamos o XSTATE nos bastidores para gerenciar o estado de autenticação para você.
Verifique se AuthConfig renderiza em todas as páginas.
Com Gatsby, adicione-o ao gatsby-browser.js . Com o NextJS, _app.js é o melhor. Você não precisa embrulhar sua árvore de componentes, mas pode se preferir. Garantimos que o USEAuth não quebre a renderização do lado do 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 a máquina global de estado XState, configura um cliente auth0 e valida as sessões de usuário em cada carga. Agora você tem acesso fácil à autenticação em todo o seu aplicativo :)
As opções de configuração são:
navigate - sua função de navegação, usada para redirecionamentos. Testado com Gatsby, NextJs e React Router. Qualquer coisa deve funcionar.
authProvider - a interface USEAuth para o seu provedor de autenticação.
params - Parâmetros para o seu provedor de autenticação
Os invólucros de clientes useAuth fornecem padrões inteligentes.
Mais detalhes sobre o uso da configuração personalizada para cada cliente em uso com o Auth0 e use com a identidade do netlify. Para aprender sobre como isso funciona, vá para criar um provedor de autenticação
PS: Sinta -se à vontade para usar meu domínio Auth0 e ClientID para ver se useAuth é um bom ajuste para você. É por isso que eles são visíveis no trecho de código?
Auth0 e a maioria dos outros provedores de autenticação usa OAuth. Isso requer redirecionar seu usuário para o formulário de login. Após o login, o provedor redireciona os usuários de volta ao seu aplicativo.
Você pode pular esta etapa com a identidade Netlify. Ele usa um pop-up na página.
Qualquer maneira de criar páginas de reação deve funcionar, aqui está o código que eu 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 O objetivo é carregar uma página, mostrar brevemente algum texto e executar o método handleAuthentication a partir de useAuth no carregamento da página.
Esse método criará um cookie no armazenamento local com as informações do seu usuário e redirecionará de volta para a página inicial. Você pode passar por um param postLoginRoute para redirecionar para uma página diferente.
Certifique -se de adicionar <domain>/auth0_callback como um URL de retorno de chamada válido na sua configuração auth0.
Você está pronto para usar useAuth para autenticação no seu aplicativo React. ?
Aqui está um botão de login, por exemplo:
const Login = ( ) => {
const { isAuthenticated , login , logout } = useAuth ( ) ;
if ( isAuthenticated ( ) ) {
return < Button onClick = { logout } > Logout </ Button > ;
} else {
return < Button onClick = { login } > Login </ Button > ;
}
} ; isAuthenticated é um método que verifica se o cookie do usuário ainda é válido.
login e logout desencadeiam suas respectivas ações.
Você pode até dizer olá aos seus usuários:
// src/pages/index.js
const IndexPage = ( ) => {
const { isAuthenticated , user } = useAuth ( )
return (
< Layout >
< SEO title = "Home" />
< h1 > Hi { isAuthenticated ( ) ? user . name : "people" } </ h1 >
)
} Verifique isAuthenticated e use o objeto user . ✌️
Para documentos mais detalhados, visite useauth.dev
Você pode experimentar aqui https://gatsby-useauth-example.now.sh/
? Swizec Teller [email protected]
Contribuições, questões e solicitações de recursos são bem -vindos!
Sinta -se à vontade para verificar a página de problemas.
Estou procurando apoiar outros provedores de autenticação. Por favor me ajude :)
Dê a um ️ se este projeto o ajudar!
Copyright © 2019 Swizec Teller [email protected].
Este projeto está licenciado pelo MIT.
Este readme foi gerado com ❤️ por readme-md-gerador
Obrigado a essas pessoas maravilhosas (key emoji):
Dejan | Jason Miller | Graham Barber | 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 |
Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!
