Você pode usar o Firebase Authentication para permitir que os usuários façam login em seu aplicativo usando um ou mais métodos de login, incluindo endereço de e-mail e senha de login e provedores de identidade federados, como Google Sign-in e Facebook Login. Este tutorial apresenta o Firebase Authentication, mostrando como adicionar endereço de e-mail e login de senha ao seu aplicativo.
Adicionar e inicializar o Authentication SDK
Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .
Adicione o Firebase Authentication JS SDK e inicialize o Firebase Authentication:
Web version 9
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = getAuth(app);
Web version 8
import firebase from "firebase/app"; import "firebase/auth"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Firebase Authentication and get a reference to the service const auth = firebase.auth();
(Opcional) Protótipo e teste com Firebase Local Emulator Suite
Antes de falar sobre como seu aplicativo autentica usuários, vamos apresentar um conjunto de ferramentas que você pode usar para prototipar e testar a funcionalidade de autenticação: Firebase Local Emulator Suite. Se você está decidindo entre técnicas e provedores de autenticação, experimentando diferentes modelos de dados com dados públicos e privados usando Autenticação e Firebase Security Rules, ou prototipando designs de interface de usuário de login, poder trabalhar localmente sem implantar serviços ao vivo pode ser uma ótima ideia .
Um emulador de autenticação faz parte do conjunto de emuladores locais, que permite que seu aplicativo interaja com o conteúdo e a configuração do banco de dados emulado, bem como, opcionalmente, com os recursos do projeto emulado (funções, outros bancos de dados e regras de segurança).
O uso do emulador de autenticação envolve apenas algumas etapas:
- Adicionando uma linha de código à configuração de teste do seu aplicativo para se conectar ao emulador.
- Na raiz do diretório local do projeto, execute
firebase emulators:start
. - Usando a interface do usuário do conjunto de emuladores locais para prototipagem interativa ou a API REST do emulador de autenticação para testes não interativos.
Um guia detalhado está disponível em Conecte seu aplicativo ao emulador de autenticação . Para obter mais informações, consulte a introdução do Local Emulator Suite .
Agora vamos continuar com como autenticar usuários.
Cadastrar novos usuários
Crie um formulário que permita que novos usuários se registrem em seu aplicativo usando o endereço de e-mail e uma senha. Quando um usuário preencher o formulário, valide o endereço de e-mail e a senha fornecidos pelo usuário e passe-os para o método createUserWithEmailAndPassword
:
Web version 9
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });
Web version 8
firebase.auth().createUserWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; // .. });
Entrar usuários existentes
Crie um formulário que permita que os usuários existentes entrem usando seu endereço de e-mail e senha. Quando um usuário preencher o formulário, chame o método signInWithEmailAndPassword
:
Web version 9
import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });
Web version 8
firebase.auth().signInWithEmailAndPassword(email, password) .then((userCredential) => { // Signed in var user = userCredential.user; // ... }) .catch((error) => { var errorCode = error.code; var errorMessage = error.message; });
Definir um observador de estado de autenticação e obter dados do usuário
Para cada página do seu aplicativo que precisa de informações sobre o usuário conectado, anexe um observador ao objeto de autenticação global. Esse observador é chamado sempre que o estado de entrada do usuário é alterado.
Anexe o observador usando o método onAuthStateChanged
. Quando um usuário entra com sucesso, você pode obter informações sobre o usuário no observador.
Web version 9
import { getAuth, onAuthStateChanged } from "firebase/auth"; const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User const uid = user.uid; // ... } else { // User is signed out // ... } });
Web version 8
firebase.auth().onAuthStateChanged((user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User var uid = user.uid; // ... } else { // User is signed out // ... } });
Próximos passos
Saiba como adicionar suporte para outros provedores de identidade e contas de convidados anônimos: