Introdução ao Firebase Authentication em sites

Você pode usar o Firebase Authentication para permitir que os usuários façam login em seu aplicativo usando um ou mais métodos de login, incluindo endereço de e-mail e senha de login e provedores de identidade federados, como Google Sign-in e Facebook Login. Este tutorial apresenta o Firebase Authentication, mostrando como adicionar endereço de e-mail e login de senha ao seu aplicativo.

Adicionar e inicializar o Authentication SDK

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

2. Adicione o Firebase Authentication JS SDK 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/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 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 prototipar e testar a funcionalidade de autenticação: Firebase Local Emulator Suite. Se você está decidindo entre técnicas e provedores de autenticação, experimentando diferentes modelos de dados com dados públicos e privados usando Autenticação e Firebase Security Rules, ou prototipando designs de interface de usuário de login, poder trabalhar localmente sem implantar serviços ao vivo 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).

O uso do 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. Na raiz do diretório local do projeto, execute firebase emulators:start .
3. Usando a interface do usuário do conjunto de emuladores locais 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.

Cadastrar novos usuários

Crie um formulário que permita que novos usuários se registrem em 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 passe-os para o método createUserWithEmailAndPassword :

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

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

Entrar 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 :

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

Definir um observador de estado de autenticação e obter 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 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/firebase.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/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
• Entrar no GitHub
• Login anônimo