Primeiros passos com o Firebase Authentication em sites

Você pode usar Firebase Authentication para permitir que os usuários façam login no seu app usando um ou mais métodos de login, incluindo login com endereço de e-mail e senha e provedores de identidade federados, como o Login do Google e do Facebook. Este tutorial mostra uma introdução ao Firebase Authentication e como adicionar no seu app um login com endereço de e-mail e senha.

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:

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

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 Firebase Local Emulator Suite (opcional)

Antes de falar sobre como o app autentica os usuários, confira o pacote de ferramentas que podem ser usadas para criar protótipos e testar a funcionalidade do Authentication: Firebase Local Emulator Suite. 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 Firebase Security Rules ou criando protótipos de designs de IUs de login.

Um emulador Authentication faz parte do Local Emulator Suite, que permite que o app interaja com o conteúdo e a configuração do banco de dados emulado. Além disso, ele também permite interagir 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. Como usar a IU Local Emulator Suite para prototipagem interativa ou a API REST do emulador do Authentication para testes não interativos.

Tenha acesso a um guia detalhado em Conecte seu aplicativo ao emulador do Authentication. Para mais informações, consulte a introdução do Local Emulator Suite.

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:

Web

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

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 atuais

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:

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

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.

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

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: