Autenticação anônima com o Firebase usando JavaScript

Use o Firebase Authentication para criar e usar contas anônimas temporárias e fazer a autenticação no Firebase. Com essas contas, os usuários que ainda não se registraram no seu app podem trabalhar com os dados protegidos pelas regras de segurança. Se um usuário anônimo se registrar no seu app, vincule as credenciais de login à conta anônima para que ele continue trabalhando com os dados protegidos nas sessões futuras.

Antes de começar

1. Adicione o Firebase ao seu projeto do JavaScript.
2. Caso você ainda não tenha conectado o app ao projeto do Firebase, faça isso no Console do Firebase.
3. Ative a autenticação anônima:
   1. No Console do Firebase, abra a seção Authentication.
   2. Na página Métodos de login, ative o método de login Anônimo.

Fazer a autenticação anônima no Firebase

Quando um usuário não conectado acessar um recurso do app que exige autenticação no Firebase, faça login dele anonimamente executando as seguintes etapas:

1. Chame o método signInAnonymously:

   Versão 9 para a Web

   import { getAuth, signInAnonymously } from "firebase/auth";
   
   const auth = getAuth();
   signInAnonymously(auth)
     .then(() => {
       // Signed in..
     })
     .catch((error) => {
       const errorCode = error.code;
       const errorMessage = error.message;
       // ...
     });
   auth_anon_sign_in.js

   Versão 8 para a Web

   firebase.auth().signInAnonymously()
     .then(() => {
       // Signed in..
     })
     .catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       // ...
     });
   anonymous.js

   Também é nesse local que você identifica e corrige erros. Para ver uma lista de códigos de erro, consulte os documentos de referência de autenticação.
2. Se o método signInAnonymously for concluído sem erros, o observador registrado em onAuthStateChanged será acionado. Em seguida, será possível acessar os dados da conta do usuário anônimo com o objeto User:

   Versão 9 para a 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/firebase.User
       const uid = user.uid;
       // ...
     } else {
       // User is signed out
       // ...
     }
   });
   auth_state_listener.js

   Versão 8 para a 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/firebase.User
       var uid = user.uid;
       // ...
     } else {
       // User is signed out
       // ...
     }
   });
   index.js

Converter uma conta anônima em permanente

Quando um usuário anônimo se registra no seu app, ele pode continuar trabalhando com a nova conta. Por exemplo, você pode deixar no carrinho de compras dessa conta os itens adicionados antes do registro. Para isso, execute as seguintes etapas:

1. Quando o usuário se inscrever, conclua o fluxo de login do provedor de autenticação até a chamada de um dos métodos Auth.signInWith, mas sem incluir essa etapa. Por exemplo, consiga o token do ID do Google, o token de acesso do Facebook ou o endereço de e-mail e a senha do usuário.

2. Consiga um AuthCredential para o novo provedor de autenticação:

   Login do Google

   Versão 9 para a Web

   import { GoogleAuthProvider } from "firebase/auth";
   
   const credential = GoogleAuthProvider.credential(
     googleUser.getAuthResponse().id_token);
   auth_make_google_credential.js

   Versão 8 para a Web

   var credential = firebase.auth.GoogleAuthProvider.credential(
     googleUser.getAuthResponse().id_token);
   index.js

   Login do Facebook

   Versão 9 para a Web

   import { FacebookAuthProvider } from "firebase/auth";
   
   const credential = FacebookAuthProvider.credential(
     response.authResponse.accessToken);
   auth_make_facebook_credential.js

   Versão 8 para a Web

   var credential = firebase.auth.FacebookAuthProvider.credential(
     response.authResponse.accessToken);
   index.js

   Login com e-mail/senha

   Versão 9 para a Web

   import { EmailAuthProvider } from "firebase/auth";
   
   const credential = EmailAuthProvider.credential(email, password);
   auth_make_email_credential.js

   Versão 8 para a Web

   var credential = firebase.auth.EmailAuthProvider.credential(email, password);
   link-multiple-accounts.js

3. Transfira o objeto AuthCredential para o método link do usuário que fez login:

   Versão 9 para a Web

   import { getAuth, linkWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   linkWithCredential(auth.currentUser, credential)
     .then((usercred) => {
       const user = usercred.user;
       console.log("Anonymous account successfully upgraded", user);
     }).catch((error) => {
       console.log("Error upgrading anonymous account", error);
     });
   auth_anonymous_link.js

   Versão 8 para a Web

   auth.currentUser.linkWithCredential(credential)
     .then((usercred) => {
       var user = usercred.user;
       console.log("Anonymous account successfully upgraded", user);
     }).catch((error) => {
       console.log("Error upgrading anonymous account", error);
     });
   link-multiple-accounts.js

Se a chamada para link for concluída, a nova conta do usuário terá acesso aos dados do Firebase da conta anônima.

Próximas etapas

Agora que os usuários podem se autenticar com o Firebase, use as regras do Firebase para controlar os acessos ao banco de dados.