Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Ajouter facilement une connexion à votre application Web avec FirebaseUI

FirebaseUI pour le Web est un ensemble de bibliothèques basées sur le SDK JavaScript Firebase Authentication qui vous aident à déployer rapidement des flux d'authentification.

FirebaseUI pour le Web offre les avantages suivants :

Prise en charge des SDK modulaires modernes avec initializeApp(...) et le SDK JS Firebase actuel.
Écrans, formulaires et boutons composables au lieu d'un seul widget monolithique.
Prise en charge de React, Shadcn et Angular.
Comportements configurables pour les flux de redirection et de pop-up, Google One Tap, la mise à niveau anonyme, les paramètres du téléphone et plus encore.
Compatibilité avec la localisation via @firebase-oss/ui-translations.
Prise en charge intégrée de l'authentification par e-mail/mot de passe, lien par e-mail, téléphone, fournisseurs OAuth et flux multifactoriels.

Ce guide explique l'installation, l'initialisation, les méthodes de connexion et la configuration courante pour les applications React, Shadcn et Angular.

Avant de commencer

Ajoutez Firebase à votre application Web :

Activez Authentication dans la console Firebase.

Installez firebase s'il n'est pas déjà dans votre projet :
```
npm install firebase
```
Utilisez le SDK JS Firebase modulaire :
```
import { initializeApp } from 'firebase/app';

const app = initializeApp({
  /* your Firebase config */
});
```
Choisissez votre plate-forme et installez FirebaseUI :

Pour les applications React basées sur shadcn/ui, ajoutez le registre Firebase à components.json :
```
{
  "registries": {
    "@firebase": "https://firebaseopensource.com/r/{name}.json"
  }
}
```
Les composants d'authentification utilisés tout au long de ce guide sont disponibles dans ce registre, y compris 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 et github-sign-in-button.

Ajoutez ensuite les composants que vous souhaitez utiliser :
```
npx shadcn@latest add @firebase/sign-in-auth-screen @firebase/google-sign-in-button
```
Cela installe les dépendances React FirebaseUI sous-jacentes pour vous.

Pour les applications React sans shadcn/ui, installez :
```
npm install @firebase-oss/ui-react@beta @firebase-oss/ui-styles
```
Pour les applications Angular, installez :
```
npm install @angular/fire @firebase-oss/ui-angular@beta @firebase-oss/ui-core@beta @firebase-oss/ui-styles@beta
```

Initialiser FirebaseUI

Créez un magasin d'UI partagé avec initializeUI(...), puis transmettez-le à l'intégration de votre 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 utilise la même configuration que React, car il utilise également @firebase-oss/ui-react en interne :

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

Ces composants utilisent vos styles shadcn existants. En général, vous n'importez pas le CSS groupé de FirebaseUI lorsque vous utilisez le registre 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],
      }),
    ),
  ],
};

Inclure des styles

FirebaseUI propose des composants d'interface utilisateur prédéfinis pour React et Angular. Pour utiliser les composants, vous devez inclure leur CSS :

Si vous utilisez Tailwind avec React ou Angular :

Sinon, incluez les styles FirebaseUI :

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

FirebaseUI pour le Web est compatible avec les thèmes personnalisés via les remplacements de variables CSS. Pour en savoir plus, consultez la documentation sur les thèmes.

Avant que les utilisateurs puissent se connecter, activez chaque fournisseur de votre choix dans Authentication > Sign-in method (Authentification > Méthode de connexion) de la console Firebase.

FirebaseUI pour le Web utilise des écrans, des formulaires et des boutons que vous affichez directement. La configuration partagée de ces flux se trouve dans behaviors transmis à initializeUI(...).

Adresse e-mail et mot de passe

Activez Adresse e-mail/Mot de passe dans la console Firebase.
Affichez SignInAuthScreen ou SignUpAuthScreen dans React, les composants sign-in-auth-screen ou sign-up-auth-screen générés dans Shadcn, ou fui-sign-in-auth-screen ou fui-sign-up-auth-screen dans Angular.

Authentification par lien envoyé par e-mail

Activez Adresse e-mail/Mot de passe et Lien envoyé par e-mail (connexion sans mot de passe) dans la console Firebase.
Affichez EmailLinkAuthScreen dans React, le composant email-link-auth-screen généré dans Shadcn ou fui-email-link-auth-screen dans Angular.
Finalisez la connexion avec l'URL actuelle à l'aide des helpers principaux si nécessaire.

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

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

Fournisseurs OAuth

FirebaseUI pour le Web est compatible avec les boutons intégrés pour les fournisseurs tels que Google, Apple, Facebook, GitHub, Microsoft et X/Twitter.

Activez le fournisseur dans la console Firebase.
Ajoutez le domaine de votre application à Domaines autorisés si nécessaire.
Affichez OAuthScreen avec les boutons de fournisseur de votre choix, tels que GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton ou TwitterSignInButton dans React, les équivalents shadcn générés dans votre application, ou fui-oauth-screen avec 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 ou fui-twitter-sign-in-button dans Angular.

Numéro de téléphone

Activez Téléphone dans la console Firebase.
Ajoutez le domaine de votre application à Domaines autorisés.
Affichez PhoneAuthScreen ou PhoneAuthForm dans React, les composants phone-auth-screen ou phone-auth-form générés dans Shadcn, ou fui-phone-auth-screen dans Angular.

Facultatif : configurez les pays autorisés, le pays par défaut ou le comportement 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',
    }),
  ],
});

Personnalisation

Configurez le comportement d'authentification partagée dans behaviors transmis à initializeUI(...).

Exiger un nom à afficher lors de l'inscription

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

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

Mettre à niveau les utilisateurs anonymes

Utilisez le comportement autoUpgradeAnonymousUsers(...) pour fusionner une session anonyme dans un compte connecté.

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

Pour en savoir plus sur la migration, consultez MIGRATION.md.

Affichez l'écran d'authentification souhaité et gérez la réussite dans les rappels de composants ou les sorties Angular.

React

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

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

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

Shadcn

Shadcn utilise le même environnement d'exécution et le même flux que React. La seule différence est que vous importez le composant généré depuis votre application au lieu de @firebase-oss/ui-react :

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

Se déconnecter

Pour déconnecter les utilisateurs, utilisez l'API de déconnexion Firebase Authentication standard :

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

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

Choisissez le parcours de connexion du fournisseur avec les comportements :

providerPopupStrategy() pour les flux pop-up
providerRedirectStrategy() pour les flux de redirection

La fenêtre pop-up étant le paramètre par défaut, vous n'avez besoin de configurer la redirection que de manière explicite :

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

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

Pour afficher les boutons OAuth, ajoutez-les à l'écran spécifique à votre plate-forme.

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

Utilisez le comportement oneTapSignIn(...) pour activer 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,
    }),
  ],
});

Assurez-vous que la connexion avec Google est activée dans la console Firebase, puis copiez l'ID client Web à partir des paramètres du fournisseur Google.

Conditions d'utilisation et règles de confidentialité

Associez des liens vers les règles via la configuration du fournisseur de plate-forme.

React

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

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

{children} ; ```

Shadcn

Utilisez la même configuration FirebaseUIProvider que 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',
    })),
  ],
};

Traductions

FirebaseUI pour le Web est compatible avec la localisation via @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,
});

Étapes suivantes

Consultez README.md pour obtenir la documentation de référence complète sur l'API, les comportements et les composants.
Consultez MIGRATION.md si vous migrez une application existante vers FirebaseUI pour le Web.
Consultez la documentation spécifique aux packages dans packages/react/README.md, packages/shadcn/README.md et packages/angular/README.md.
Explorez les exemples dans examples/react, examples/shadcn et examples/angular.

Ajouter facilement une connexion à votre application Web avec FirebaseUI Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Avant de commencer

Initialiser FirebaseUI

React

Shadcn

Angular

Inclure des styles

Configurer des méthodes de connexion

Adresse e-mail et mot de passe

Authentification par lien envoyé par e-mail

Fournisseurs OAuth

Numéro de téléphone

Personnalisation

Exiger un nom à afficher lors de l'inscription

Mettre à niveau les utilisateurs anonymes

Se connecter

React

Shadcn

Angular

Se déconnecter

Fournisseurs OAuth : pop-up ou redirection

React

Shadcn

Angular

Google One Tap

Conditions d'utilisation et règles de confidentialité

React

Shadcn

Angular

Traductions

Étapes suivantes

Ajouter facilement une connexion à votre application Web avec FirebaseUI