Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

Introdução ao Firebase Authentication em sites

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

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 por endereço de e-mail e senha, e provedores de identidade federada, como Login do Google e Login do Facebook. Este tutorial é uma introdução ao Firebase Authentication mostrando como adicionar o login de endereço de e-mail e senha ao seu aplicativo.

Adicionar e inicializar o SDK de autenticação

  1. Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .

  2. Adicione o SDK JS do Firebase Authentication 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 o Firebase Local Emulator Suite

Antes de falar sobre como seu aplicativo autentica os 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, experimentar diferentes modelos de dados com dados públicos e privados usando Authentication e Firebase Security Rules ou criar protótipos de designs de IU de login, poder trabalhar localmente sem implantar serviços ao vivo pode ser uma ótima ideia .

Um emulador de autenticação faz parte do Local Emulator Suite, que permite que seu aplicativo interaja com o conteúdo e a configuração do banco de dados emulado, bem como opcionalmente com seus recursos de projeto emulados (funções, outros bancos de dados e regras de segurança).

Usar o emulador de autenticação envolve apenas algumas etapas:

  1. Adicionando uma linha de código à configuração de teste do seu aplicativo para se conectar ao emulador.
  2. A partir da raiz do diretório do projeto local, executando firebase emulators:start .
  3. 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 com como autenticar usuários.

Inscreva-se novos usuários

Crie um formulário que permita que novos usuários se registrem no 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, em seguida, 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;
    // ..
  });

Fazer login de 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;
  });

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 entrada do usuário é alterado.

Anexe o observador usando o método onAuthStateChanged . Quando um usuário entra com êxito, 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: