O Firebase oferece serviços de autenticação que permitem registrar e fazer login de usuários com facilidade. Você pode usar e-mail, senhas, números de telefone e provedores de identidade como Google e Facebook.

Neste tutorial, você aprenderá como usar o Firebase Authentication no React para autenticar usuários usando um e-mail e uma senha. Você armazenará os dados do usuário coletados no Firestore, um banco de dados em nuvem NoSQL também do Firebase.

Observe que este tutorial usa o Firebase v9 e o React Router v6.

Criar um aplicativo do Firebase

Para conectar seu aplicativo a Firebase, registre seu aplicativo no Firebase para obter um objeto de configuração. Isso é o que você usará para inicializar o Firebase em seu aplicativo React.

Para criar um aplicativo do Firebase, siga as etapas a seguir.

1. Dirija-se ao Console do Firebase e clique Crie um projeto.
2. Dê um nome ao seu projeto e clique em crio para iniciar o processo.
3. Clique no Rede ícone (
4. Dê ao seu aplicativo um nome de sua escolha e clique em Registrar aplicativo. Você não precisa ativar o Firebase Hosting.
instagram viewer
5. Copie o objeto de configuração em Adicionar SDK do Firebase.

Criar um aplicativo React

Usar criar-reagir-aplicativo para montar um aplicativo React.

npx create-react-app react-auth-firebase

Navegue até a pasta e inicie o aplicativo.

cd react-auth-firebase
npm executar início

Autenticar usuários com funções do Firebase

Antes de usar o Firebase, instale-o.

npm e firebase

Crie um novo arquivo, firebase.js, e inicialize o Firebase.

import { initializeApp } de "firebase/app";
const firebaseConfig = {
 Chave API: ,
 authDomain: ,
 ID do projeto: ,
 armazenamentoBalde: ,
 mensagemSenderId: ,
 appId: 
};
// Inicializa o Firebase
const app = initializeApp (firebaseConfig);

Use o objeto de configuração que você copiou quando registrou o aplicativo.

Em seguida, importe os módulos do Firebase que você usará.

importar {
 getAuth,
 createUserWithEmailAndPassword,
 signInWithEmailAndPassword,
 sair,
} de "firebase/auth";
import { getFirestore, addDoc, collection } from "firebase/firestore";
const db = getFirestore();
const aut = getAuth();

Para autenticar usuários, você precisa criar três funções: signUp, signIn e signOut.

O inscrever-se função passa o e-mail e senha para createUserWithEmailAndPassword para registrar um novo usuário. createUserWithEmailAndPassword retorna os dados do usuário que você usará para criar um novo registro de usuário no banco de dados.

const signUp = async (e-mail, senha) => {
 experimentar {
 const userCredential = await createUserWithEmailAndPassword(
 autenticação,
 o email,
 senha
 );
 const usuário = userCredential.user;
 aguardar addDoc (coleção (db, "usuários"), {
 uid: usuário.uid,
 e-mail: usuario.email,
 });
 retornar verdadeiro
 } pegar (erro) {
 return {erro: error.message}
 }
};

Observe que você não está verificando se o e-mail já está em uso antes do registro porque o Firebase cuida disso para você.

A seguir, no entrar função passar o e-mail e senha para o signInWithEmailAndPassword função para fazer login em um usuário registrado.

const signIn = async (e-mail, senha) => {
 experimentar {
 const userCredential = await signInWithEmailAndPassword(
 autenticação,
 o email,
 senha
 );
 const usuário = userCredential.user;
 retornar verdadeiro
 } pegar (erro) {
 return {erro: error.message}
 }
};

As funções signUp e signOut retornam true se forem bem-sucedidas e uma mensagem de erro se ocorrer um erro.

A função signOut é bastante direta. Ele chama o sair() função do Firebase.

const signOut = async() => {
 experimentar {
 aguardar signOut (auth)
 retornar verdadeiro
 } pegar (erro) {
 retorna falso
 }
};

Criar formulários de reação

Os formulários de login e inscrição coletarão o e-mail e a senha do usuário.

Criar um novo componente Signup.js e adicione o seguinte.

import { useState } de "reagir";
import { Link } de "react-router-dom";
import { signUp } de "./firebase";
const Cadastro = () => {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");
 const [erro, seterror] = useState("");
 const handleSubmit = assíncrono (e) => {
 e.preventDefault();
 if (senha !== senha2) {
 seterror("Senhas não coincidem");
 } outro {
 setEmail("");
 configurar senha("");
 const res = aguardar inscrição (e-mail, senha);
 if (res.error) seterror (res.error)
 }
 };
 Retorna (
 <>
Inscrever-se



 {erro? 
{erro}
: nulo}


 digite="e-mail"
 nome="e-mail"
 valor={e-mail}
 placeholder="Seu e-mail"
 requeridos
 onChange={(e) => setEmail (e.target.value)}
 />
 digite="senha"
 nome="senha"
 valor={senha}
 placeholder="Sua senha"
 requeridos
 onChange={(e) => setPassword (e.target.value)}
 />
Enviar




 já registrado? Conecte-se





 );
};
exportar inscrição padrão;

Aqui você está criando um formulário de inscrição e acompanhando o e-mail e a senha usando o estado. Depois de enviar o formulário, o ao enviar evento aciona o handleSubmit() função que chama o inscrever-se() função de firebase.js. Se a função retornar um erro, atualize o estado de erro e exiba a mensagem de erro.

Para o formulário de login, crie Signin.js e adicione o seguinte.

import { useState } de "reagir";
import { signIn } de "./firebase";
const Login = () => {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");
 const [erro, seterror] = useState("");
 const handleSubmit = assíncrono (e) => {
 e.preventDefault();
 setEmail("");
 configurar senha("");
 const res = aguardar login (e-mail, senha);
 if (res.error) seterror (res.error);
 };
 Retorna (
 <>
 {erro? 
{erro}
: nulo}


 tipo="texto"
 nome="e-mail"
 valor={e-mail}
 placeholder="Seu e-mail"
 onChange={(e) => setEmail (e.target.value)}
 />
 digite="senha"
 nome="senha"
 valor={senha}
 placeholder="Sua senha"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
exportar login padrão;

O formulário de login é bastante semelhante à página de inscrição, exceto que o envio chama o entrar() função.

Por fim, crie a página de perfil. Esta é a página para a qual o aplicativo redirecionará os usuários após a autenticação bem-sucedida.

Crio Perfil.js e adicione o seguinte.

import { signOut } de "./firebase";
const Perfil = () => {
 const handleLogout = assíncrono () => {
 aguarde signOut();
 };
 Retorna (
 <>
Perfil

Sair
 );
};
exportar perfil padrão;

Neste componente, você tem o cabeçalho do Perfil e o botão de logout. O ao clicar manipulador no botão aciona o handleLogout função que desconecta o usuário.

Criar Rotas de Autenticação

Para servir as páginas que você criou no navegador, configure react-router-dom.

Instalar react-router-dom:

npm i react-router-dom

Dentro index.js, configurar react-router-dom:

importe Reagir de "reagir";
importe ReactDOM de "react-dom";
import { BrowserRouter, Routes, Route } de "react-router-dom";
importar App de "./App";
importar Login de "./Login";
importar Perfil de "./Perfil";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("raiz")
);

Até este ponto, o aplicativo pode registrar um usuário, inscrevê-lo e desconectá-lo. Então, como você sabe se um usuário está logado ou não?

Na próxima seção deste tutorial, você verá como usar o contexto React para acompanhar o status de autenticação de um usuário em todo o aplicativo.

Gerenciar autenticação com a API React Context

O React Context é uma ferramenta de gerenciamento de estado que simplifica o compartilhamento de dados entre aplicativos. É uma alternativa melhor à perfuração de suporte, onde os dados passam pela árvore de pai para filho até atingir o componente que precisa deles.

Criar contexto de autenticação

No src pasta, adicionar AuthContext.js arquivo e criar e exportar AuthContext.

import { createContext } de "reagir";
const AuthContext = createContext();
exportar AuthContext padrão;

Em seguida, crie o provedor em AuthProvider.js. Ele permitirá que os componentes usem AuthContext.

import { getAuth, onAuthStateChanged } de "firebase/auth";
import { useState, useEffect } from 'react';
importar AuthContext de './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ filhos }) => {
 const [usuário, setUser] = useState (null);
 useEfeito(() => {
 onAuthStateChanged (auth,(usuário) => {
 setUser (usuário)
 })
 }, []);
Retorna (
{crianças}
 );
 };

Aqui, você está obtendo o valor do usuário usando o onAuthStateChanged() método do Firebase. Este método retorna um objeto de usuário se autenticar o usuário e null se não puder. Ao usar o gancho useEffect(), o valor do usuário é atualizado sempre que o status de autenticação é alterado.

Dentro index.js, envolva as rotas com AuthProvider para garantir que todos os componentes acessem o usuário no contexto:

import { AuthProvider } de "./AuthProvider";
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById("raiz")
);

Criar rotas protegidas

Para proteger rotas sensíveis, verifique o status de autenticação de um usuário que está tentando navegar para uma página protegida, como a página de perfil.

Modificar Perfil.js para redirecionar um usuário se ele não estiver autenticado.

import { useContext } de "reagir";
importe AuthContext de "./AuthContext";
import { useNavigate, Navigate } de "react-router-dom";
import { signOut } de "./firebase";
const Perfil = () => {
 const { usuário } = useContext(AuthContext);
 const navegue = useNavegar();
 const handleLogout = assíncrono () => {
 aguarde signOut();
 };
 if (!usuário) {
 Retorna ;
 }
 Retorna (
 <>
Perfil

Sair
 );
};
exportar perfil padrão;

A aplicação renderiza condicionalmente a página de perfil redirecionando o usuário para a página de login se ele não estiver autenticado.

Indo além com o Firebase Authentication

Neste tutorial, você usou o Firebase para autenticar usuários usando seu e-mail e senha. Você também criou registros de usuário no Firestore. O Firebase fornece funções para trabalhar com provedores de autenticação como Google, Facebook e Twitter.

10 melhores práticas de reação que você precisa seguir em 2022

Leia a seguir

Sobre o autor