Participe do Firebase Summit on-line e presencialmente em 18 de outubro de 2022. Veja como o Firebase pode ajudar você a acelerar o desenvolvimento de apps, lançar seu aplicativo com confiança e fazer o escalonamento facilmente. Inscreva-se agora

Primeiros passos com o Firebase Authentication em sites

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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 os primeiros passos com o 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 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();

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

Antes de ver informações sobre como seu 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 localmente sem implantar serviços é uma ótima ideia se você estiver escolhendo técnicas e provedores de autenticação, testando modelos de dados diferentes com dados públicos e privados usando as regras de segurança do Firebase e do Authentication ou criando protótipos de designs de IU de login.

Um emulador do Authentication faz parte do Pacote de emuladores locais, que permite ao seu app interagir 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 alguns passos:

  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 use a API REST do emulador do Authentication para fazer testes não interativos.

Veja um guia detalhado em Conecte seu aplicativo ao emulador de autenticação. 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:

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

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:

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 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 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óximas etapas

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