Primeiros passos com o Firebase Authentication em sites

Use o Firebase Authentication para permitir que os usuários façam login no seu app com um ou mais métodos de login, inclusive login com endereço de e-mail e senha, além de provedores de identidade federados como o Login do Google e do Facebook. Veja neste tutorial como começar a usar o Firebase Authentication e como adicionar um login com endereço de e-mail e senha ao seu app.

Adicionar e inicializar o SDK do Authentication

  1. Instale o SDK do Firebase para JavaScript e inicialize o Firebase, caso ainda não tenha feito isso.

  2. Adicione o SDK do Firebase Authentication para JavaScript e inicialize o Firebase Authentication:

API modular da Web 

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);

API com namespace da Web 

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();

Criar protótipos e fazer testes com o Pacote de emuladores locais do Firebase (opcional)

Antes de obter informações sobre como o app autentica os usuários, confira o Pacote de emuladores locais do Firebase, um conjunto de ferramentas que podem ser usadas para criar protótipos e testar a funcionalidade do Authentication. Trabalhar no local sem implantar serviços ativos é uma ótima ideia se você estiver escolhendo técnicas e provedores de autenticação, testando modelos diferentes com dados públicos e privados usando o Authentication e as regras de segurança do Firebase ou criando protótipos de designs de IUs de login.

Um emulador do Authentication faz parte do Pacote de emuladores locais, que permite ao app interagir com o conteúdo e a configuração do banco de dados emulado e também com os recursos do projeto emulado (opcional), como funções, outros bancos de dados e regras de segurança.

O uso do emulador do Authentication envolve apenas algumas etapas:

  1. Para se conectar ao emulador, adicione uma linha de código à configuração de teste do app.
  2. Execute firebase emulators:start na raiz do diretório do projeto local.
  3. Use a IU do Pacote de emuladores locais para fazer uma prototipagem interativa ou a API REST do emulador do Authentication para fazer testes não interativos.

Tenha acesso a um guia detalhado em Conecte seu aplicativo ao emulador do Authentication. Para mais informações, consulte Introdução ao Pacote de emuladores locais do Firebase.

Agora veremos como autenticar os usuários.

Login de novos usuários

Crie um formulário que permita que novos usuários se inscrevam no seu app usando endereço de e-mail e senha. Quando um usuário preencher o formulário, valide o endereço de e-mail e a senha informados por ele e envie-os para o método createUserWithEmailAndPassword:

API modular da Web

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;
    // ..
  });
auth_signup_password.js

API com namespace da Web

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
email.js

Login de usuários existentes

Crie um formulário que permita que usuários atuais façam login com um endereço de e-mail e senha. Quando um usuário preencher o formulário, chame o método signInWithEmailAndPassword:

API modular da Web

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;
  });
auth_signin_password.js

API com namespace da Web

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
email.js

Definir um observador do estado de autenticação e coletar dados dos usuários

Para cada página do seu app que precisa de informações sobre o usuário conectado, anexe um observador ao objeto de autenticação global. Este 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 corretamente, você pode coletar informações sobre o usuário no observador.

API modular da Web

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
    // ...
  }
});
auth_state_listener.js

API com namespace da Web

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
    // ...
  }
});
index.js

Próximas etapas

Saiba como adicionar suporte para outros provedores de identidade e contas de convidados anônimos: