DEV Community

Cover image for Autenticação no React com Context API e Hooks

Autenticação no React com Context API e Hooks

Rafael Domingues on August 31, 2020

O que é Context API? A Context API, fornece uma maneira de passar os dados de componentes sem ter que passar manualmente em todos os nív...
Collapse
 
andersonmav profile image
Anderson Martins Avila

Conteúdo Incrível, me ajudou demais, muito obrigado de verdade!!

Collapse
 
iltonbarbosa profile image
Ilton Barbosa

Em auth.tsx na linha
export const AuthProvider: React.FC = ({ children } ) => {

Está dando o seguinte erro de typescript: A propriedade 'children' não existe no tipo '{}'.

Collapse
 
iltonbarbosa profile image
Ilton Barbosa • Edited

Resolvi da seguinte forma: - criei uma interface:
interface Props {
children: React.ReactNode;
}

E implementei-a assim:
export const AuthProvider: React.FC<Props> = ({ children }: Props ) => {

Collapse
 
domynikmv057 profile image
Domynik Marcone Vieira

Cara ajudou muito obrigado

Collapse
 
fabimendes profile image
Fabi Mendes

Excelente explicação Rafael, muito bom mesmo! Deu tudo certo na minha aplicação!
Só estou com um "probleminha" que talvez você possa ajudar (ainda mais, kkk).
Quando faço o login, a home carrega normalmente, com os dados do usuário no caminho "/", mas quando clico no refresh da página, os dados do usuário desaparecem e só aparecem de novo se eu sair e logar novamente.
Eu chamei os dados do usuário com "const { user } = useAuth();", se eu coloco dentro de um useEffect, não aceita....tem alguma alternativa pra isso?

Collapse
 
fabimendes profile image
Fabi Mendes

Já consegui... lerdeza minha mesmo kkkk
Lá no auth tava fazendo o setItem do @App:user com "response.data.name" kkkk foi só tirar o ".name" e deu certo kkkk
Mas valeu pelo post mesmo assim! Grande ajuda!

Collapse
 
otaviocapila profile image
Otávio Capila

Excelente post, foi de grande ajuda!

Collapse
 
eduardodarocha profile image
Eduardo Rocha

Olá Rafael. Gostei bastante da sua explicação.
Estou utilizando o tutorial para implementar em um projeto mas não uso typescript, então devo simplesmente ignorar a interface?
AuthContextData {
signed: boolean;
Login(): Promise;
}

E essa constante como ficaria?
const AuthContext = createContext({} as AuthContextData);
Obrigado.

Collapse
 
marlondemelo1 profile image
Marlon de Melo

Muito bom o tutorial, fiz baseado nele usando api do Google Login e funcionou de boa consigo puxar até a foto do user nessa api, mas questão de segurança só armazenando token é o recomendado ? Valeuuu

Collapse
 
igorsallo profile image
igorsallo

Cara esse link que vc coloca na API /login, seria do que ? não consegui entender essa parte. Agradeço

Collapse
 
rafacdomin profile image
Rafael Domingues

É só a rota onde faço autenticação na minha api, neste caso localhost:3333 é a url base da minha api e /login é a rota para autenticação. Como já havia definido na configuração no axios a url base como localhost:3333 preciso somente informar a rota que desejo acessar, então digitei /login em vez de localhost:3333/login

Collapse
 
lucasfrutig0 profile image
lucasfrutig0

ao dar refresh eu perco o login =/

Collapse
 
rafacdomin profile image
Rafael Domingues

Verifica a parte sobre Salvar dados no Storage, a ideia é basicamente salvar o token do usuário no localStorage do navegador após o login ser feito e sempre que o usuário acessar a página buscar esse token no localStorage novamente

Collapse
 
gustavomsevero profile image
Gustavo M. Severo • Edited

Cara, o meu auth.tsx ta apontando erro.
Você sabe qual o problema?

Collapse
 
rafacdomin profile image
Rafael Domingues

Qual erro que está acontecendo?

Collapse
 
iltonbarbosa profile image
Ilton Barbosa

Funcionou, mas o usuário só consegue logar após a segunda tentativa de autenticação

Collapse
 
wallacesf profile image
Wallace Ferreira

Fala brother, tudo bem?
Gostaria de sugerir também a verificação da expiração do token. Uma vez que o token foi expirado, o usuário é deslogado automaticamente.