Aggiungi facilmente l'accesso alla tua app web con FirebaseUI

FirebaseUI per il web è un insieme di librerie basate sull'SDK JavaScript di Firebase Authentication che ti aiutano a implementare rapidamente i flussi di autenticazione.

FirebaseUI per il web offre i seguenti vantaggi:

• Supporto dell'SDK modulare moderno con initializeApp(...) e l'SDK Firebase JS attuale.
• Schermi, moduli e pulsanti componibili anziché un singolo widget monolitico.
• Supporto per React, Shadcn e Angular.
• Comportamenti configurabili per i flussi di reindirizzamento e popup, Google One Tap, upgrade anonimo, impostazioni dello smartphone e altro ancora.
• Supporto per la localizzazione tramite @firebase-oss/ui-translations.
• Supporto integrato per email/password, link email, autenticazione telefonica, provider OAuth e flussi di autenticazione a più fattori.

Questa guida illustra l'installazione, l'inizializzazione, i metodi di accesso e la configurazione comune per le app React, Shadcn e Angular.

Prima di iniziare

1. Aggiungi Firebase alla tua app web:

   Attiva Authentication nella Console Firebase.

   Installa firebase se non è già presente nel tuo progetto:

   npm install firebase
   

   Utilizza l'SDK Firebase JS modulare:

   import { initializeApp } from 'firebase/app';
   
   const app = initializeApp({
     /* your Firebase config */
   });
   

2. Scegli la tua piattaforma e installa FirebaseUI:

   Per le app React basate su shadcn/ui, aggiungi il registro Firebase a components.json:

   {
     "registries": {
       "@firebase": "https://firebaseopensource.com/r/{name}.json"
     }
   }
   

   I componenti di autenticazione utilizzati in questa guida sono disponibili in questo registro, inclusi sign-in-auth-screen, sign-up-auth-screen, email-link-auth-screen, oauth-screen, phone-auth-screen, google-sign-in-button, apple-sign-in-button e github-sign-in-button.

   Poi aggiungi i componenti che vuoi utilizzare:

   npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
   

   In questo modo vengono installate le dipendenze FirebaseUI di React sottostanti.

   Per le app React senza shadcn/ui, installa:

   npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
   

   Per le app Angular, installa:

   npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
   

Inizializza FirebaseUI

Crea un archivio UI condiviso con initializeUI(...), quindi passalo all'integrazione del framework.

React

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

Shadcn

Shadcn utilizza la stessa configurazione di React, perché utilizza anche @firebase-oss/ui-react sotto il cofano:

import { initializeApp } from 'firebase/app';
import { initializeUI } from '@firebase-oss/ui-core';
import { FirebaseUIProvider } from '@firebase-oss/ui-react';

const app = initializeApp({
  /* your Firebase config */
});

const ui = initializeUI({
  app,
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <FirebaseUIProvider ui={ui}>{children}</FirebaseUIProvider>;
}

Questi componenti utilizzano gli stili shadcn esistenti; in genere non importi il CSS in bundle di FirebaseUI quando utilizzi il registro shadcn.

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirebaseUI } from '@firebase-oss/ui-angular';
import { initializeUI } from '@firebase-oss/ui-core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() =>
      initializeApp({
        /* your Firebase config */
      }),
    ),
    provideFirebaseUI((apps) =>
      initializeUI({
        app: apps[0],
      }),
    ),
  ],
};

Includi stili

FirebaseUI dispone di componenti dell'interfaccia utente predefiniti per React e Angular. Per utilizzare i componenti, devi includere il relativo CSS:

Se utilizzi Tailwind con React o Angular:

In caso contrario, includi gli stili di FirebaseUI:

@import '@firebase-oss/ui-styles/dist.min.css';

FirebaseUI per il web supporta la personalizzazione dei temi tramite gli override delle variabili CSS. Per ulteriori dettagli, consulta la documentazione sui temi.

Configurare i metodi di accesso

Prima che gli utenti possano accedere, attiva ogni provider che vuoi in Autenticazione -> Metodo di accesso nella console Firebase.

FirebaseUI per il web utilizza schermate, moduli e pulsanti che vengono visualizzati direttamente. La configurazione condivisa per questi flussi si trova in behaviors passato a initializeUI(...).

Indirizzo email e password

1. Attiva Email/Password nella Console Firebase.
2. Esegui il rendering di SignInAuthScreen o SignUpAuthScreen in React, dei componenti sign-in-auth-screen o sign-up-auth-screen generati in Shadcn oppure di fui-sign-in-auth-screen o fui-sign-up-auth-screen in Angular.

Autenticazione tramite link email

1. Attiva Email/Password e Link via email (accesso senza password) nella console Firebase.
2. Esegui il rendering di EmailLinkAuthScreen in React, del componente email-link-auth-screen generato in Shadcn o di fui-email-link-auth-screen in Angular.
3. Completa l'accesso con l'URL corrente utilizzando gli helper principali, se necessario.

import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';

await completeEmailLinkSignIn(ui, window.location.href);

Fornitori OAuth

FirebaseUI per il web supporta pulsanti integrati per provider come Google, Apple, Facebook, GitHub, Microsoft e X/Twitter.

1. Attiva il provider nella console Firebase.
2. Aggiungi il dominio dell'app a Domini autorizzati, se necessario.
3. Esegui il rendering di OAuthScreen con i pulsanti del fornitore che preferisci, ad esempio GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton o TwitterSignInButton in React, gli equivalenti shadcn generati nella tua app o fui-oauth-screen con fui-google-sign-in-button, fui-apple-sign-in-button, fui-facebook-sign-in-button, fui-github-sign-in-button, fui-microsoft-sign-in-button o fui-twitter-sign-in-button in Angular.

Numero di telefono

1. Attiva Telefono nella console Firebase.
2. Aggiungi il dominio dell'app a Domini autorizzati.
3. Esegui il rendering di PhoneAuthScreen o PhoneAuthForm in React, dei componenti phone-auth-screen o phone-auth-form generati in Shadcn o di fui-phone-auth-screen in Angular.

(Facoltativo) Configura i paesi consentiti, il paese predefinito o il comportamento di reCAPTCHA:

import {
  countryCodes,
  initializeUI,
  recaptchaVerification,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    countryCodes({
      allowedCountries: ['GB', 'US', 'FR'],
      defaultCountry: 'GB',
    }),
    recaptchaVerification({
      size: 'compact',
      theme: 'light',
    }),
  ],
});

Personalizzazione

Configura il comportamento di autenticazione condivisa in behaviors passato a initializeUI(...).

Richiedere un nome visualizzato durante la registrazione

import { initializeUI, requireDisplayName } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [requireDisplayName()],
});

Esegui l'upgrade degli utenti anonimi

Utilizza il comportamento autoUpgradeAnonymousUsers(...) per unire una sessione anonima in un account con accesso.

import {
  autoUpgradeAnonymousUsers,
  initializeUI,
} from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    autoUpgradeAnonymousUsers({
      async onUpgrade(ui, oldUserId, credential) {
        // Migrate or merge user data here if needed.
      },
    }),
  ],
});

Per maggiori dettagli sulla migrazione, vedi MIGRATION.md.

Accedi

Visualizza la schermata di autenticazione che preferisci e gestisci l'esito positivo nei callback dei componenti o negli output di Angular.

React

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Shadcn

Shadcn utilizza lo stesso runtime e lo stesso flusso di React. L'unica differenza è che importi il componente generato dalla tua app anziché da @firebase-oss/ui-react:

export function SignInPage() { const navigate = useNavigate();

return ( { navigate('/dashboard'); }} /> ); } ```

Angular

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { SignInAuthScreenComponent } from '@firebase-oss/ui-angular';
import type { User } from '@angular/fire/auth';

@Component({
  selector: 'app-sign-in-page',
  standalone: true,
  imports: [SignInAuthScreenComponent],
  template: `
    <fui-sign-in-auth-screen (signIn)="onSignIn($event)" />
  `,
})
export class SignInPageComponent {
  constructor(private router: Router) {}

  onSignIn(user: User) {
    this.router.navigate(['/dashboard']);
  }
}

Esci

Per disconnettere gli utenti, utilizza l'API di disconnessione standard di Firebase Authentication:

import { getAuth, signOut } from 'firebase/auth';

const auth = getAuth(app);
await signOut(auth);

Provider OAuth: popup e reindirizzamento

Scegli il flusso di accesso del fornitore con i comportamenti:

• providerPopupStrategy() per i flussi popup
• providerRedirectStrategy() per i flussi di reindirizzamento

Il popup è l'impostazione predefinita, quindi devi configurare il reindirizzamento in modo esplicito:

import { initializeUI, providerRedirectStrategy } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [providerRedirectStrategy()],
});

Per eseguire il rendering dei pulsanti OAuth, aggiungili alla schermata specifica della piattaforma.

React

import {
  GitHubSignInButton,
  GoogleSignInButton,
  OAuthScreen,
} from '@firebase-oss/ui-react';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Shadcn

import { GitHubSignInButton } from '@/components/github-sign-in-button';
import { GoogleSignInButton } from '@/components/google-sign-in-button';
import { OAuthScreen } from '@/components/oauth-screen';

export function OAuthPage() {
  return (
    <OAuthScreen>
      <GoogleSignInButton />
      <GitHubSignInButton />
    </OAuthScreen>
  );
}

Angular

import { Component } from '@angular/core';
import {
  GithubSignInButtonComponent,
  GoogleSignInButtonComponent,
  OAuthScreenComponent,
} from '@firebase-oss/ui-angular';

@Component({
  selector: 'app-oauth-page',
  standalone: true,
  imports: [
    OAuthScreenComponent,
    GoogleSignInButtonComponent,
    GithubSignInButtonComponent,
  ],
  template: `
    <fui-oauth-screen>
      <fui-google-sign-in-button />
      <fui-github-sign-in-button />
    </fui-oauth-screen>
  `,
})
export class OAuthPageComponent {}

Google One Tap

Utilizza il comportamento oneTapSignIn(...) per attivare Google One Tap:

import { initializeUI, oneTapSignIn } from '@firebase-oss/ui-core';

const ui = initializeUI({
  app,
  behaviors: [
    oneTapSignIn({
      clientId: 'YOUR_GOOGLE_WEB_CLIENT_ID',
      autoSelect: false,
      cancelOnTapOutside: false,
    }),
  ],
});

Assicurati che l'accesso con Google sia abilitato nella console Firebase, poi copia l'ID client web dalle impostazioni del provider Google.

Termini di servizio e norme sulla privacy

Allega i link alle norme tramite la configurazione del fornitore della piattaforma.

React

<FirebaseUIProvider ui={ui} policies={{ termsOfServiceUrl: 'https://example.com/terms', privacyPolicyUrl: 'https://example.com/privacy', }}

{children} ; ```

Shadcn

Utilizza la stessa configurazione FirebaseUIProvider di React.

Angular

import { type ApplicationConfig } from '@angular/core';
import { provideFirebaseUIPolicies } from '@firebase-oss/ui-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseUIPolicies(() => ({
      termsOfServiceUrl: 'https://example.com/terms',
      privacyPolicyUrl: 'https://example.com/privacy',
    })),
  ],
};

Traduzioni

FirebaseUI per il web supporta la localizzazione tramite @firebase-oss/ui-translations.

import { initializeUI } from '@firebase-oss/ui-core';
import { registerLocale } from '@firebase-oss/ui-translations';

const enUsCustom = registerLocale('en-US', {
  labels: {
    signIn: 'Continue',
  },
});

const ui = initializeUI({
  app,
  locale: enUsCustom,
});

Passaggi successivi

• Leggi README.md per il riferimento completo ad API, comportamenti e componenti.
• Leggi MIGRATION.md se stai eseguendo la migrazione di un'app esistente a FirebaseUI per il web.
• Consulta la documentazione specifica del pacchetto in packages/react/README.md, packages/shadcn/README.md e packages/angular/README.md.
• Esplora gli esempi in examples/react, examples/shadcn e examples/angular.