A autenticação é crucial em aplicativos da web hoje. É um recurso que muitos desenvolvedores tiveram que implementar no passado. Felizmente, muitas bibliotecas tornaram esse trabalho mais fácil, oferecendo muitas funcionalidades integradas. Em particular, o Firebase é uma excelente ferramenta para lidar com o gerenciamento e autenticação de usuários.
Neste tutorial, abordaremos como implementar a autenticação usando o Firebase.
O que é Firebase?
Adquirido pelo Google em 2014, Firebase é uma plataforma que oferece um pacote de produtos que inclui, mas não se limita a:
- Realtime Database
- Autenticação
- Cloud Messaging
Esses produtos permitem que os desenvolvedores criem e executem aplicativos com facilidade e rapidez.
Criação de uma conta Firebase
Antes de escrever uma linha de código, você precisará de uma conta Firebase. Acesse aqui para criar um.
No Firebase, se quiser chaves de API, você precisará criar aplicativos. Esses aplicativos devem pertencer a projetos. Como resultado, se você ainda não tem um projeto configurado, você precisa criar um. Depois de fazer isso, crie um aplicativo para obter suas chaves.
Agora, clique no ícone de configurações ao lado de Visão geral do projeto (na parte superior esquerda da tela). Em Configurações do projeto e em Geral , você deve ver seu aplicativo com sua configuração.
Antes de ir para o seu código, você precisará habilitar os métodos de login que deseja usar. Para fazer isso, clique em Autenticação e depois em Métodos de login . Cada um tem configurações diferentes, mas por causa deste tutorial, vou me concentrar no método tradicional de e-mail/senha.
Adicionar ambientes locais ao Next.js
Agora que você tem suas chaves, é hora de adicioná-las ao seu projeto Next.js.
Dica: se você ainda não criou um, não se preocupe. Este comando o ajudará:
npx create-next-app # ou yarn create next-app
Um projeto Next.js ignora automaticamente .env.local graças ao seu arquivo .gitignore , para que você possa copiar/colar suas chaves e não se preocupar se elas serão comprometido com o GitHub acidentalmente.
NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN= NEXT_PUBLIC_FIREBASE_PROJECT_ID=
Não se esqueça: em Next.js, a convenção para nomear variáveis de ambiente é que elas devem começar com NEXT_PUBLIC.
Instalando o Firebase
Vá em frente e instale a biblioteca Firebase.
instalação npm-salvar Firebase # ou yarn adicionar Firebase
Criação de uma instância do Firebase em Next.js
Ótimo! A biblioteca está instalada e suas chaves de API estão configuradas. É hora de usar essas chaves para criar uma instância do Firebase. Claro, o Firebase vem com muitas ferramentas úteis, mas para o propósito deste artigo, vamos nos concentrar apenas na autenticação. Como resultado, você só precisará das credenciais Firebase/auth e apiKey , authDomain e projectId .
importar Firebase de'Firebase/app';
import'Firebase/auth'; const FirebaseCredentials={ apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID
}
//se não existir uma instância do Firebase, crie uma
if (! Firebase.apps.length) { Firebase.initializeApp (FirebaseCredentials)
} exportar Firebase padrão;
Escutando mudanças no Firebase
A primeira coisa que você precisa é de um authUser que possa acessar em todo o seu aplicativo. Essa variável não é útil apenas para gerenciamento de usuários, mas também para redirecionar rotas de acordo.
Por exemplo, se authUser for nulo, significando que o usuário não fez login, quando essa pessoa tenta acessar uma rota protegida (digamos, um painel), você deve redirecioná-la para o login página.
Felizmente, Firebase.auth rastreia o estado e vem com uma função integrada chamada onAuthStateChanged que permite ouvir as mudanças de estado.
Quando o estado mudar, formate o usuário de acordo com suas necessidades e, finalmente, defina-o para sua variável authUser . Use a variável loading para indicar se o Firebase está buscando dados ou não.
import {useState, useEffect} de'react'
importar Firebase de'./Firebase'; const formatAuthUser=(usuário)=> ({ uid: user.uid, email: user.email
}); função padrão de exportação useFirebaseAuth () { const [authUser, setAuthUser]=useState (nulo); const [carregando, setLoading]=useState (true); const authStateChanged=async (authState)=> { if (! authState) { setAuthUser (null) setLoading (false) Retorna; } setLoading (verdadeiro) var formattedUser=formatAuthUser (authState); setAuthUser (formattedUser); setLoading (false); }; //escuta a mudança de estado do Firebase useEffect (()=> { const unsubscribe=Firebase.auth (). onAuthStateChanged (authStateChanged); return ()=> unsubscribe (); }, []); Retorna { authUser, carregando };
}
Criação de um contexto de usuário
Para acessar authUser e variáveis de carregamento em todo o seu aplicativo, você usará a API de contexto.
Dica: não conhece o React Context? Não hesite em verificar os documentos oficiais .
Primeiro, crie seu objeto de contexto com createContext com um valor padrão ( authUser como null e carregando como true ). Em seguida, obtenha as variáveis reais authUser e carregando de useFirebaseAuth e passe-as para o componente do provedor.
Você também deve adicionar um gancho personalizado, neste caso, useAuth , para acessar o valor de contexto atual.
import {createContext, useContext, Context} de'react'
import useFirebaseAuth de'../lib/useFirebaseAuth'; const authUserContext=createContext ({ authUser: null, carregando: verdadeiro
}); função de exportação AuthUserProvider ({children}) { const auth=useFirebaseAuth (); return {children} ;
}
//gancho personalizado para usar o authUserContext e acessar authUser e carregar
exportar const useAuth=()=> useContext (authUserContext);
Então, em nosso _app.js , envolva este provedor em torno de seu aplicativo. Isso garante que os componentes filhos possam acessar seu contexto de usuário.
importar {AuthUserProvider} de'../context/AuthUserContext'; function MyApp ({Component, pageProps}) { retornar
} exportar MyApp padrão
Criação de rotas protegidas
Rotas protegidas são páginas ou seções de seu aplicativo que devem ser acessadas apenas por determinados usuários. Nesse caso, apenas usuários logados devem acessar este conteúdo. Para configurar isso, obtenha o authUser e o loading de seu gancho useAuth () personalizado.
Com essas variáveis em vigor, verifique se o Firebase ainda está buscando dados (ou seja, o carregamento é verdadeiro ) e, se não, se authUser é nulo . Se for esse o caso, o usuário não está conectado e você deve redirecioná-lo para a página de login.
Teste-o em seu aplicativo e verifique se o redirecionamento está acontecendo corretamente.
import {useEffect} de'react';
importar {useRouter} de'próximo/roteador';
import {useAuth} de'../context/AuthUserContext'; import {Container, Row, Col} de'reactstrap'; const LoggedIn=()=> { const {authUser, carregando}=useAuth (); roteador const=useRouter (); //Ouça as mudanças no carregamento e authUser, redirecione se necessário useEffect (()=> { if (! carregando &&! authUser) router.push ('/') }, [authUser, carregando]) Retorna ( //Sua página de login )
} exportar LoggedIn padrão;
Adicionando funcionalidades de login, inscrição e logout no Next.js
Agora, vamos passar para a parte mais suculenta. Uma coisa excelente sobre o Firebase é que ele vem com muitas funções integradas para fazer login, criar usuários e desconectar.
Então, vamos adicioná-los à função useFirebaseAuth. Use Firebase.auth () para acessar as diferentes funções ( signInWithEmailAndPassword , createUserWithEmailAndPassword e signOut ):
função padrão de exportação
useFirebaseAuth () { //... const clear=()=> { setAuthUser (null); setLoading (true); }; const signInWithEmailAndPassword=(e-mail, senha)=> Firebase.auth (). SignInWithEmailAndPassword (e-mail, senha); const createUserWithEmailAndPassword=(email, senha)=> Firebase.auth (). CreateUserWithEmailAndPassword (e-mail, senha); const signOut=()=> Firebase.auth (). SignOut (). Then (clear); useEffect (()=> { const unsubscribe=Firebase.auth (). onAuthStateChanged (authStateChanged); return ()=> unsubscribe (); }, []); Retorna { authUser, carregando, signInWithEmailAndPassword, createUserWithEmailAndPassword, sair };
}
Não se esqueça de atualizar seu valor padrão em seu arquivo de contexto.
const authUserContext=createContext ({ authUser: null, carregando: verdadeiro, signInWithEmailAndPassword: async ()=> {}, createUserWithEmailAndPassword: async ()=> {}, signOut: async ()=> {}
}); função de exportação AuthUserProvider ({children}) { const auth=useFirebaseAuth (); return {children} ;
}
Criação da página de inscrição
Em sua página de inscrição, use o useAuth hook para recuperar sua função para criar um usuário novamente. createUserWithEmailAndPassword aceita dois parâmetros: e-mail e senha.
Depois de terminar a validação do formulário, chame esta função. Se retornar com sucesso com um authUser , você poderá redirecionar o usuário de acordo.
import {useState} de'react';
importar {useRouter} de'próximo/roteador'; import {useAuth} de'../context/AuthUserContext'; import {Container, Row, Col, Button, Form, FormGroup, Label, Input, Alert} from'reactstrap'; const SignUp=()=> { const [email, setEmail]=useState (""); const [passwordOne, setPasswordOne]=useState (""); const [passwordTwo, setPasswordTwo]=useState (""); roteador const=useRouter (); const [erro, setError]=useState (nulo); const {createUserWithEmailAndPassword}=useAuth (); const onSubmit=event=> { setError (null) //verifique se as senhas correspondem. Em caso afirmativo, crie um usuário no Firebase //e redirecionar para sua página de login. if (passwordOne===passwordTwo) createUserWithEmailAndPassword (email, passwordOne) .então (authUser=> { console.log ("Sucesso. O usuário foi criado no Firebase") router.push ("/registrado_in"); }) .catch (erro=> { //Um erro ocorreu. Definir mensagem de erro a ser exibida para o usuário setError (error.message) }); senão setError ("Senha não confere") event.preventDefault (); }; Retorna ( {erro && {erro} }
)
} exportar Inscrição padrão;
Adicionando um botão de desconexão
Sair também é muito simples. Pegue a função signOut () de useAuth () e adicione-a a um botão ou link.
import {useEffect} de'react';
importar {useRouter} de'próximo/roteador';
import {useAuth} de'../context/AuthUserContext'; import {Container, Row, Col, Button} de'reactstrap'; const LoggedIn=()=> { const {authUser, carregando, signOut}=useAuth (); roteador const=useRouter (); //Ouça as mudanças no carregamento e authUser, redirecione se necessário useEffect (()=> { if (! carregando &&! authUser) router.push ('/') }, [authUser, carregando]) Retorna ( //... //... )
} exportar LoggedIn padrão;
Criação de uma página de login
E, finalmente, a funcionalidade de login! É exatamente igual aos dois anteriores. Recupere signInWithEmailAndPassword () de useAuth () e passe o e-mail e a senha do usuário. Se estiverem corretos, redirecione o usuário e, se não, exiba a mensagem de erro correta.
import {useState} de'react';
importar Link de'próximo/link';
importar {useRouter} de'próximo/roteador'; import {useAuth} de'../context/AuthUserContext'; import {Container, Row, Col, Button, Form, FormGroup, Label, Input, Alert} from'reactstrap'; exportar função padrão Home () { const [email, setEmail]=useState (""); const [senha, setPassword]=useState (""); const [erro, setError]=useState (nulo); roteador const=useRouter (); const {signInWithEmailAndPassword}=useAuth (); const onSubmit=event=> { setError (null) signInWithEmailAndPassword (e-mail, senha) .então (authUser=> { router.push ('/logging_in'); }) .catch (erro=> { setError (error.message) }); event.preventDefault (); }; Retorna ( Login
{erro && {erro} } )
}
Conclusão
Neste tutorial, abordamos como criar uma conta, projeto e aplicativo Firebase. Em seguida, aprendemos como usar o React Context para criar um contexto de usuário. A este contexto, adicionamos variáveis de usuário e carregamento junto com funções de registro, inscrição e saída. Por fim, usamos essas funções para implementar a autenticação em nosso aplicativo Next.js graças ao Firebase!
A postagem Implementando autenticação em Next.js com Firebase apareceu primeiro no LogRocket Blog .
