Firebase Authentication: guida operativa a login social email e phone number • Meteora Web Agency

Stai sviluppando un'app web o mobile e arrivi al punto in cui devi gestire l'autenticazione. E subito iniziano i dubbi: implementi un sistema di login custom? Usi un provider terzo? E la gestione delle sessioni, dei token, della sicurezza?

Noi di Meteora Web abbiamo visto troppi progetti in cui l'autenticazione è stata improvvisata: password salvate in chiaro, token JWT fatti a mano senza rinnovo, social login implementati con librerie non mantenute. Risultato? Vulnerabilità, utenti persi, ore di debug sprecate.

Firebase Authentication risolve tutto questo in modo pulito. Email/password, login social (Google, Facebook, Apple, GitHub) e autenticazione via SMS. Non devi scrivere un singolo endpoint di login. Non devi gestire sessioni server-side. E la sicurezza? Gestita da Google.

In questa guida vediamo come integrare Firebase Authentication in un'app web (con JavaScript) e mobile (React Native / Flutter), con esempi reali per ogni provider. Niente teoria astratta: codici che funzionano, procedure che usiamo nei progetti dei nostri clienti.

Perché Firebase Authentication e non un sistema custom

Costruire un sistema di autenticazione da zero non è difficile all'inizio: basta una tabella utenti, hash delle password, login endpoint. Ma la complessità esplode quando devi: gestire il reset password, prevenire attacchi brute force, supportare OAuth2 per social login, inviare email di verifica, implementare 2FA, gestire refresh token, scalare su milioni di utenti senza rallentamenti.

Firebase fa tutto questo in modo nativo. Noi lo usiamo da anni per progetti web e mobile perché:

Non gestisci server di autenticazione — il backend è serverless con Cloud Functions se vuoi logica custom.
Supporto nativo per tutti i provider social con un SDK leggero.
Integrazione fluida con Firestore, Storage e Cloud Functions — l'utente autenticato è già sincronizzato.
Security Rules pronte per controllare l'accesso ai dati.

Se il tuo progetto prevede solo poche decine di utenti, forse un sistema custom basta. Ma se devi scalare, Firebase Authentication è la scelta giusta.

Configurare Firebase Authentication passo per passo

1. Abilitare i provider nella console Firebase

Prima di scrivere codice, devi attivare i provider nel progetto Firebase. Vai su Console Firebase → Authentication → Sign-in method. Qui trovi:

Email/Password: abilita e scegli se permettere registrazione con password o solo magic link.
Google: devi abilitare il provider e configurare il client ID (se usi Web, Firebase lo genera automaticamente).
Facebook: serve un'app Facebook Developer, un App ID e App Secret.
Apple: obbligatorio per app iOS che accettano login social (linee guida Apple). Su Web funziona con redirect.
Phone: attiva l'autenticazione via SMS. Richiede un account fatturabile perché ogni SMS ha un costo (ma per test usa numeri di test dalla console).

2. Installare e inizializzare l'SDK Firebase

Nel progetto web, installa il pacchetto:

npm install firebase

Poi inizializza nel tuo file principale (es. firebase.js):

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Attenzione: la apiKey è pubblica nel client, ma non è un problema. La sicurezza è garantita dalle regole di Firebase (Security Rules) e dall'autenticazione. Non usare mai secret nel frontend.

Login con email e password

Il più classico. Ecco come registrare e fare login con email/password.

Registrazione

import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "./firebase.js";

async function signUp(email, password) {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("Utente registrato:", userCredential.user);
  } catch (error) {
    console.error("Errore:", error.code, error.message);
  }
}

Login

import { signInWithEmailAndPassword } from "firebase/auth";

async function signIn(email, password) {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("Login riuscito:", userCredential.user);
  } catch (error) {
    console.error("Errore:", error.code, error.message);
  }
}

Firebase gestisce automaticamente il refresh del token. Non serve fare nulla. Da notare: puoi anche usare sendPasswordResetEmail per il reset password. Tutti i metodi sono documentati su Firebase Auth Web docs.

Login con Google

Il login social più comune. L'SDK Firebase si occupa di tutto il flusso OAuth2. Su web puoi usare popup o redirect. Noi consigliamo il popup per un'esperienza più fluida.

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";

const provider = new GoogleAuthProvider();

async function signInWithGoogle() {
  try {
    const result = await signInWithPopup(auth, provider);
    const credential = GoogleAuthProvider.credentialFromResult(result);
    console.log("Utente Google:", result.user);
    // Il token access_token è in credential.accessToken se ti serve
  } catch (error) {
    console.error("Errore Google login:", error.code);
  }
}

Per mobile (React Native / Flutter), usa il pacchetto @react-native-firebase/auth o firebase_auth.

Login con Facebook

Analogamente, Facebook ha il suo provider.

import { FacebookAuthProvider, signInWithPopup } from "firebase/auth";

const provider = new FacebookAuthProvider();

async function signInWithFacebook() {
  try {
    const result = await signInWithPopup(auth, provider);
    console.log("Utente Facebook:", result.user);
  } catch (error) {
    console.error("Errore Facebook login:", error.code);
  }
}

Prima abilita il provider nella console Firebase e inserisci le credenziali dell'app Facebook.

Login con Apple (Sign in with Apple)

Apple è obbligatorio se pubblichi un'app sull'App Store che usa social login. Su web, funziona con redirect o popup.

import { OAuthProvider, signInWithPopup } from "firebase/auth";

const provider = new OAuthProvider("apple.com");

async function signInWithApple() {
  try {
    const result = await signInWithPopup(auth, provider);
    console.log("Utente Apple:", result.user);
  } catch (error) {
    console.error("Errore Apple login:", error.code);
  }
}

Per iOS, usa signInWithRedirect e gestisci il reindirizzamento correttamente.

Autenticazione via SMS (Phone Number)

L'utente inserisce il numero di telefono, Firebase invia un SMS con un codice OTP (One-Time Password). Ottimo per app mobile o per 2FA.

Configurazione

Nella console Firebase, attiva Phone. Poi nel codice:

import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";

async function sendSMS(phoneNumber) {
  // Crea il reCAPTCHA invisibile o visibile
  window.recaptchaVerifier = new RecaptchaVerifier(auth, "recaptcha-container", {
    size: "invisible", // o "normal" per visuale
  });

  try {
    const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, window.recaptchaVerifier);
    window.confirmationResult = confirmationResult;
    console.log("SMS inviato");
  } catch (error) {
    console.error("Errore invio SMS:", error);
  }
}

async function verifyCode(code) {
  try {
    const result = await window.confirmationResult.confirm(code);
    console.log("Utente verificato:", result.user);
  } catch (error) {
    console.error("Codice errato:", error);
  }
}

Attenzione: per usare Phone Auth su Web devi avere un dominio HTTPS (o localhost per sviluppo). Il reCAPTCHA è obbligatorio per prevenire abusi.

Gestire lo stato dell'autenticazione

Una volta che l'utente effettua login, vuoi sapere se è autenticato e reagire ai cambi di stato.

import { onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("Utente loggato:", user.uid);
    // Aggiorna UI, carica dati
  } else {
    console.log("Nessun utente");
    // Mostra login screen
  }
});

Questo è un observable: si attiva ogni volta che lo stato cambia (login, logout, refresh token scaduto). Usalo nel componente principale dell'app.

Errori comuni e come evitarli

1. Provider non abilitato

Prima di testare, assicurati di aver abilitato il provider nella console Firebase. L'errore sarà auth/operation-not-allowed.

2. ReCAPTCHA non configurato per Phone Auth

Dimenticare il reCAPTCHA impedisce l'invio SMS. Assicurati di avere un elemento <div id="recaptcha-container"></div> nel DOM.

3. Credenziali Facebook errate

Facebook richiede un App valida con dominio OAuth configurato. Aggiungi il tuo dominio nella Facebook Developer Console.

4. Gestione dei token

Firebase rinnova automaticamente il token ID ogni ora. Non devi implementare refresh manuale. Ma se devi passare il token al tuo backend, usa user.getIdToken().

Integrazione con backend custom

A volte hai un backend che deve verificare l'identità dell'utente. Invece di copiare il database utenti, usa il token ID di Firebase. Il backend verifica il token con l'SDK Admin di Firebase.

// Backend (Node.js con Firebase Admin SDK)
import admin from "firebase-admin";

admin.initializeApp();

app.post("/api/data", async (req, res) => {
  const token = req.headers.authorization?.split("Bearer ")[1];
  try {
    const decodedToken = await admin.auth().verifyIdToken(token);
    const uid = decodedToken.uid;
    // Ora puoi usare uid per autorizzare l'accesso
  } catch (error) {
    res.status(401).send("Token non valido");
  }
});

In sintesi — cosa fare adesso

Vai sulla console Firebase, crea un progetto e abilita i provider che ti servono (email, Google, Facebook, Apple, Phone).
Installa l'SDK Firebase nel tuo progetto web o mobile.
Copiare il codice di inizializzazione e integrare i metodi di login per ogni provider.
Usa onAuthStateChanged per gestire il routing e la UI in base allo stato di autenticazione.
Se hai un backend, configura Firebase Admin SDK e verifica i token ID.

Firebase Authentication elimina la parte più noiosa e rischiosa della gestione utenti. Noi lo usiamo in tutti i progetti che richiedono login, e ha funzionato anche su app con centinaia di migliaia di utenti. Se vuoi approfondire l'intero ecosistema Firebase, leggi la nostra guida pillar completa su Firebase.