Как легко добавить вход в веб-приложение с помощью FirebaseUI

FirebaseUI для веб-сайтов – это набор библиотек, созданных на основе JavaScript SDK аутентификации Firebase, которые помогают быстро реализовать процессы аутентификации.

FirebaseUI для веб-приложений имеет следующие преимущества:

  • Поддержка современных модульных SDK с initializeApp(...) и текущим Firebase JS SDK.
  • Составные экраны, формы и кнопки вместо одного монолитного виджета.
  • Поддержка React, Shadcn и Angular.
  • Настраиваемые варианты поведения для переадресации и всплывающих окон, Google One Tap, анонимного перехода на платную версию, настроек телефона и т. д.
  • Поддержка локализации через @firebase-oss/ui-translations.
  • Встроенная поддержка аутентификации по электронной почте и паролю, ссылке в электронном письме, номеру телефона, через поставщиков OAuth и многофакторной аутентификации.

В этом руководстве описаны установка, инициализация, способы входа и общие настройки для приложений React, Shadcn и Angular.

Подготовка

  1. Добавьте Firebase в веб-приложение:

    Включите аутентификацию в консоли Firebase.

    Установите firebase, если его ещё нет в вашем проекте:

    npm install firebase

    Используйте модульный Firebase JS SDK:

    import { initializeApp } from 'firebase/app';

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

  2. Выберите платформу и установите FirebaseUI:

    Для приложений React на основе shadcn/ui добавьте реестр Firebase в components.json:

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

    Компоненты аутентификации, используемые в этом руководстве, доступны в реестре, включая 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 и github-sign-in-button.

    Затем добавьте нужные компоненты:

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

    Это установит основные зависимости React FirebaseUI.

    Для приложений React без shadcn/ui установите:

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

    Для приложений Angular установите:

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

Инициализация FirebaseUI

Создайте общий магазин интерфейса с помощью initializeUI(...), а затем передайте его в интеграцию фреймворка.

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 использует ту же настройку, что и React, поскольку также использует @firebase-oss/ui-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 не нужно импортировать CSS, входящий в состав FirebaseUI.

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

Включить стили

В FirebaseUI есть готовые компоненты интерфейса для React и Angular. Чтобы использовать компоненты, добавьте их CSS:

Если вы используете Tailwind с React или Angular:

В противном случае добавьте стили FirebaseUI:

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

FirebaseUI для веб-приложений поддерживает пользовательские темы с помощью переопределения переменных CSS. Подробную информацию можно найти в документации по темам.

Как настроить способы входа

Прежде чем пользователи смогут войти в аккаунт, включите нужных поставщиков в разделе Аутентификация -> Способ входа в консоли Firebase.

В FirebaseUI для веб-приложений используются экраны, формы и кнопки, которые вы отрисовываете напрямую. Общая конфигурация для этих потоков находится в behaviors, переданном в initializeUI(...).

Адрес электронной почты и пароль

  1. Включите Email/Password в консоли Firebase.
  2. Отрисовывайте SignInAuthScreen или SignUpAuthScreen в React, сгенерированные компоненты sign-in-auth-screen или sign-up-auth-screen в Shadcn или fui-sign-in-auth-screen или fui-sign-up-auth-screen в Angular.
  1. Включите Электронная почта/пароль и Ссылка на электронную почту (вход без пароля) в консоли Firebase.
  2. Отобразите EmailLinkAuthScreen в React, сгенерированный компонент email-link-auth-screen в Shadcn или fui-email-link-auth-screen в Angular.
  3. Войдите в аккаунт, используя текущий URL и основные вспомогательные функции, если это необходимо.
import { completeEmailLinkSignIn } from '@firebase-oss/ui-core';

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

Поставщики OAuth

FirebaseUI для веб-приложений поддерживает встроенные кнопки для таких поставщиков, как Google, Apple, Facebook, GitHub, Microsoft и X/Twitter.

  1. Включите поставщика в консоли Firebase.
  2. При необходимости добавьте домен приложения в раздел Авторизованные домены.
  3. Отобразите OAuthScreen с нужными кнопками поставщиков, например GoogleSignInButton, AppleSignInButton, FacebookSignInButton, GitHubSignInButton, MicrosoftSignInButton или TwitterSignInButton в React, с эквивалентами shadcn, созданными в вашем приложении, или fui-oauth-screen с 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 или fui-twitter-sign-in-button в Angular.

Номер телефона

  1. Включите Телефон в консоли Firebase.
  2. Добавьте домен приложения в раздел Авторизованные домены.
  3. Отрисовывайте PhoneAuthScreen или PhoneAuthForm в React, сгенерированные компоненты phone-auth-screen или phone-auth-form в Shadcn или fui-phone-auth-screen в Angular.

При необходимости настройте разрешенные страны, страну по умолчанию или поведение 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',
    }),
  ],
});

Настройки

Настройте поведение общего доступа к авторизации в behaviors, переданном в initializeUI(...).

Как требовать указывать отображаемое имя при регистрации

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

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

Как обновить подписку для анонимных пользователей

Используйте поведение autoUpgradeAnonymousUsers(...), чтобы объединить анонимный сеанс с аккаунтом, в который выполнен вход.

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

Подробную информацию о переносе можно найти в файле MIGRATION.md.

Войти

Отобразите нужный экран аутентификации и обработайте успешное выполнение в обратных вызовах компонента или выходных данных 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 использует ту же среду выполнения и тот же поток, что и React. Единственное отличие заключается в том, что сгенерированный компонент импортируется из приложения, а не из @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']);
  }
}

Выйти

Чтобы выйти из аккаунта, используйте стандартный API Firebase Authentication:

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

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

Поставщики OAuth: всплывающее окно или переадресация

Выберите способ входа в аккаунт поставщика контента:

  • providerPopupStrategy() для всплывающих окон
  • providerRedirectStrategy() для переадресации

Всплывающее окно используется по умолчанию, поэтому вам нужно настроить только переадресацию:

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

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

Чтобы отобразить кнопки OAuth, добавьте их на экран, предназначенный для определенной платформы.

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

Чтобы включить вход с аккаунтом Google через One Tap, используйте поведение 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,
    }),
  ],
});

Убедитесь, что в консоли Firebase включен вход через аккаунт Google, а затем скопируйте идентификатор веб-клиента из настроек поставщика Google.

Условия использования и политика конфиденциальности

Добавляйте ссылки на правила через конфигурацию поставщика платформы.

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

Используйте ту же конфигурацию FirebaseUIProvider, что и в 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',
    })),
  ],
};

Переводы

FirebaseUI для веб-приложений поддерживает локализацию с помощью @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,
});

Дальнейшие действия