Você pode usar o Firebase Authentication para permitir que os usuários façam login no seu aplicativo usando um ou mais métodos de login, incluindo login com endereço de e-mail e senha, e provedores de identidade federados, como Login do Google e Login do Facebook. Este tutorial apresenta uma introdução ao Firebase Authentication, mostrando como adicionar endereço de e-mail e login com senha ao seu aplicativo.
Adicione e inicialize o SDK de autenticação
Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .
Adicione o SDK JS do Firebase Authentication e inicialize o Firebase Authentication:
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);
import firebase from "firebase/compat/app";
import "firebase/compat/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 criar protótipos e testar a funcionalidade de autenticação: Firebase Local Emulator Suite. Se você estiver decidindo entre técnicas e provedores de autenticação, experimentando diferentes modelos de dados com dados públicos e privados usando autenticação e regras de segurança do Firebase ou criando protótipos de designs de UI de login, poder trabalhar localmente sem implantar serviços ativos 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).
Usar o emulador de autenticação envolve apenas algumas etapas:
- Adicionando uma linha de código à configuração de teste do seu aplicativo para conectar-se ao emulador.
- Na raiz do diretório local do projeto, executando
firebase emulators:start
. - Usando a IU do Local Emulator Suite 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 explicando como autenticar usuários.
Cadastre novos usuários
Crie um formulário que permita que novos usuários se registrem em seu aplicativo usando seu 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, em seguida, passe-os para o método createUserWithEmailAndPassword
:
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed up
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
// ..
});
Faça login de usuários existentes
Crie um formulário que permita que usuários existentes façam login usando seu endereço de e-mail e senha. Quando um usuário preencher o formulário, chame o método signInWithEmailAndPassword
:
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;
});
firebase.auth().signInWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
// ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
});
Defina um observador de estado de autenticação e obtenha 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 login do usuário muda.
Anexe o observador usando o método onAuthStateChanged
. Quando um usuário faz login com sucesso, você pode obter informações sobre o usuário no observador.
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/auth.user
const uid = user.uid;
// ...
} else {
// User is signed out
// ...
}
});
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/v8/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: