Mit FirebaseUI ganz einfach Anmeldeinformationen zu Ihrer Webanwendung hinzufügen

FirebaseUI for Web ist eine Reihe von Bibliotheken, die auf dem Firebase Authentication JavaScript SDK basieren und Ihnen helfen, Authentifizierungsabläufe schnell zu implementieren.

FirebaseUI für das Web bietet folgende Vorteile:

  • Unterstützung für moderne modulare SDKs mit initializeApp(...) und dem aktuellen Firebase JS SDK.
  • Zusammensetzbare Bildschirme, Formulare und Schaltflächen anstelle eines einzelnen monolithischen Widgets.
  • Unterstützung für React, Shadcn und Angular.
  • Konfigurierbares Verhalten für Weiterleitungs- und Pop-up-Abläufe, Google One Tap, anonymes Upgrade, Telefoneinstellungen und mehr.
  • Unterstützung für die Lokalisierung über @firebase-oss/ui-translations.
  • Integrierte Unterstützung für E‑Mail/Passwort, E‑Mail-Link, Telefonauthentifizierung, OAuth-Anbieter und Multi-Faktor-Abläufe.

In diesem Leitfaden werden die Installation, Initialisierung, Anmeldemethoden und allgemeine Konfiguration für React-, Shadcn- und Angular-Apps beschrieben.

Hinweis

  1. Firebase zu Ihrer Web-App hinzufügen:

    Aktivieren Sie Authentifizierung in der Firebase Console.

    Installieren Sie firebase, falls es noch nicht in Ihrem Projekt enthalten ist:

    npm install firebase

    Modulares Firebase JS SDK verwenden:

    import { initializeApp } from 'firebase/app';

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

  2. Wählen Sie Ihre Plattform aus und installieren Sie FirebaseUI:

    Fügen Sie für auf shadcn/ui basierende React-Apps die Firebase-Registrierung zu components.json hinzu:

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

    Die in diesem Leitfaden verwendeten Authentifizierungskomponenten sind in dieser Registry verfügbar, darunter 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 und github-sign-in-button.

    Fügen Sie dann die gewünschten Komponenten hinzu:

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

    Dadurch werden die zugrunde liegenden React FirebaseUI-Abhängigkeiten installiert.

    Für React-Apps ohne shadcn/ui installieren Sie:

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

    Installieren Sie für Angular-Apps:

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

FirebaseUI initialisieren

Erstellen Sie mit initializeUI(...) einen gemeinsamen UI-Speicher und übergeben Sie ihn dann an Ihre Framework-Integration.

Reagieren

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 verwendet dieselbe Einrichtung wie React, da es auch @firebase-oss/ui-react verwendet:

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>;
}

Diese Komponenten verwenden Ihre vorhandenen shadcn-Stile. In der Regel importieren Sie das gebündelte CSS von FirebaseUI nicht, wenn Sie die shadcn-Registrierung verwenden.

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],
      }),
    ),
  ],
};

Stile einbeziehen

FirebaseUI bietet vorgefertigte UI-Komponenten für React und Angular. Wenn Sie die Komponenten verwenden möchten, müssen Sie ihr CSS einbinden:

Wenn Sie Tailwind mit React oder Angular verwenden:

Andernfalls fügen Sie die FirebaseUI-Stile ein:

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

FirebaseUI für das Web unterstützt benutzerdefinierte Designs über CSS-Variablenüberschreibungen. Weitere Informationen finden Sie in der Dokumentation zum Theming.

Anmeldemethoden einrichten

Bevor sich Nutzer anmelden können, müssen Sie jeden gewünschten Anbieter in der Firebase Console unter Authentifizierung -> Anmeldemethode aktivieren.

FirebaseUI für Web verwendet Bildschirme, Formulare und Schaltflächen, die Sie direkt rendern. Die gemeinsame Konfiguration für diese Abläufe befindet sich in behaviors, das an initializeUI(...) übergeben wird.

E-Mail-Adresse und Passwort

  1. Aktivieren Sie E-Mail/Passwort in der Firebase Console.
  2. Rendern Sie SignInAuthScreen oder SignUpAuthScreen in React, die generierten sign-in-auth-screen- oder sign-up-auth-screen-Komponenten in Shadcn oder fui-sign-in-auth-screen oder fui-sign-up-auth-screen in Angular.
  1. Aktivieren Sie in der Firebase Console E-Mail-Adresse/Passwort und E-Mail-Link (Anmeldung ohne Passwort).
  2. Rendern Sie EmailLinkAuthScreen in React, die generierte email-link-auth-screen-Komponente in Shadcn oder fui-email-link-auth-screen in Angular.
  3. Schließen Sie die Anmeldung mit der aktuellen URL ab. Verwenden Sie dazu bei Bedarf die Core-Helper-Funktionen.
import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';

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

OAuth-Anbieter

FirebaseUI für Web unterstützt integrierte Schaltflächen für Anbieter wie Google, Apple, Facebook, GitHub, Microsoft und X/Twitter.

  1. Aktivieren Sie den Anbieter in der Firebase Console.
  2. Fügen Sie die App-Domain bei Bedarf zu Autorisierte Domains hinzu.
  3. Rendern Sie OAuthScreen mit den gewünschten Anbieter-Schaltflächen, z. B. GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton oder TwitterSignInButton in React, den generierten shadcn-Entsprechungen in Ihrer App oder fui-oauth-screen mit 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 oder fui-twitter-sign-in-button in Angular.

Telefonnummer

  1. Aktivieren Sie Telefon in der Firebase Console.
  2. Fügen Sie die App-Domain zu Autorisierte Domains hinzu.
  3. Rendern Sie PhoneAuthScreen oder PhoneAuthForm in React, die generierten phone-auth-screen- oder phone-auth-form-Komponenten in Shadcn oder fui-phone-auth-screen in Angular.

Optional: Konfigurieren Sie zulässige Länder, das Standardland oder das reCAPTCHA-Verhalten:

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',
    }),
  ],
});

Anpassung

Konfigurieren Sie das Verhalten der gemeinsamen Authentifizierung in behaviors, das an initializeUI(...) übergeben wird.

Bei der Registrierung einen Anzeigenamen angeben

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

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

Upgrade für anonyme Nutzer durchführen

Mit dem autoUpgradeAnonymousUsers(...)-Verhalten können Sie eine anonyme Sitzung in ein angemeldetes Konto zusammenführen.

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.
      },
    }),
  ],
});

Weitere Informationen zur Migration finden Sie unter MIGRATION.md.

Anmelden

Rendern Sie den gewünschten Authentifizierungsbildschirm und verarbeiten Sie den Erfolg in Komponenten-Callbacks oder Angular-Ausgaben.

Reagieren

```tsx import { SignInAuthScreen } from '@firebase-oss/ui-react'; import { useNavigate } from 'react-router';

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

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

Shadcn

Shadcn verwendet dieselbe Laufzeit und denselben Ablauf wie React. Der einzige Unterschied besteht darin, dass Sie die generierte Komponente aus Ihrer App anstelle von @firebase-oss/ui-react importieren:

```tsx import { SignInAuthScreen } from '@/components/sign-in-auth-screen'; import { useNavigate } from 'react-router';

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']);
  }
}

Abmelden

Verwenden Sie zum Abmelden von Nutzern die standardmäßige Firebase Authentication-Abmelde-API:

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

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

OAuth-Anbieter: Pop-up oder Weiterleitung

Wählen Sie den Anmeldevorgang des Anbieters mit Verhaltensweisen aus:

  • providerPopupStrategy() für Pop-up-Abläufe
  • providerRedirectStrategy() für Weiterleitungsabläufe

Das Pop-up ist die Standardeinstellung. Sie müssen die Weiterleitung also nur explizit konfigurieren:

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

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

Wenn Sie OAuth-Schaltflächen rendern möchten, fügen Sie sie dem plattformspezifischen Bildschirm hinzu.

Reagieren

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

So aktivieren Sie Google One Tap mit dem Verhalten oneTapSignIn(...):

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

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

Achten Sie darauf, dass die Google-Anmeldung in der Firebase Console aktiviert ist. Kopieren Sie dann die Webclient-ID aus den Google-Anbietereinstellungen.

Nutzungsbedingungen und Datenschutzerklärung

Richtlinienlinks über die Konfiguration des Plattformanbieters anhängen

Reagieren

```tsx import { FirebaseUIProvider } from '@firebase-oss/ui-react';

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

{children} ; ```

Shadcn

Verwenden Sie dieselbe FirebaseUIProvider-Konfiguration wie 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',
    })),
  ],
};

Übersetzungen

FirebaseUI für das Web unterstützt die Lokalisierung über @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,
});

Nächste Schritte