Comece a usar o Firebase Authentication em sites

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

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:

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:

1. Adicionando uma linha de código à configuração de teste do seu aplicativo para conectar-se ao emulador.
2. Na raiz do diretório local do projeto, 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 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;
    // ..
  });
auth_signup_password.js

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

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

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

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

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óximos passos

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

• Login do Google
• Entrar no Facebook
• Entrar no Twitter
• Login do GitHub
• Login anônimo