README.md

@firebase-oss/ui-react

This package contains the React components for the FirebaseUI.

Installation

Install the package from NPM:

npm install @firebase-oss/ui-react

Usage

Importing styles

To use the components, you need to import the styles from the @firebase-oss/ui-styles package.

If using Tailwind CSS, you can import the styles directly into your project.

@import "tailwindcss";
@import "@firebase-oss/ui-styles/src/base.css";

Alternatively, you can import the fully compiled CSS file into your project.

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

Initializing the UI

First, initalize the Firebase JS SDK:

import { initializeApp } from "firebase/app";

const app = initializeApp({ ... });

Then, initialize the FirebaseUI with the configuration:

import { initializeUI } from "@firebase-oss/ui-core";

const ui = initializeUI({
  app,
});

Finally, wrap your app in the FirebaseUIProvider component:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { FirebaseUIProvider } from "@firebase-oss/ui-react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <FirebaseUIProvider ui={ui}>
      <App />
    </FirebaseUIProvider>
  </StrictMode>
);

Importing components

To use the components, you need to import the components from the @firebase-oss/ui-react package.

import { SignInAuthScreen, GoogleSignInButton } from "@firebase-oss/ui-react";

function App() {
  return (
    <SignInAuthScreen>
      <GoogleSignInButton />
    </SignInAuthScreen>
  );
}