Merge branch '@invertase/v7-development' of https://github.com/firebase/firebaseui-web into @invertase/shadcn-registry

Author: Ehesp

GEMINI.md

@@ -0,0 +1,49 @@
+# Firebase UI for Web
+
+A library for building UIs with Firebase, with first class support for Angular and shad (with Shadcn).
+
+## General rules
+
+- The workspace is managed with pnpm. Always use pnpm commands for installation and execution.
+- This is a monorepo, with `packages` and `examples` sub-directories.
+- Linting is controlled by ESLint, via a root flatconfig `eslint.config.ts` file. Run `pnpm lint:check` for linting errors.
+- Formatting is controlled vi Prettier integrated with ESLint via the `.prettierrc` file. Run `pnpm format:check` for formatting errors.
+- The workspace uses pnpm cataloges to ensure dependency version alignment. If a dependency exists twice, it should be cataloged.
+- Tests can be run for the entire workspace via `pnpm test` or scoped to a package via `test:<name>`.
+
+## Structure
+
+The project structure is setup in a way which provides a framework agnostic set of packages; `core`, `translations` and `styles`.
+
+- `core`: The main entry-point to the package via `initalizeUI`. Firebase UI provides it's own functional exports, which when called wraps the Firebase JS SDK functionality, however manages state, translated error handling and behaviors (configurable by the user).
+- `translations`: A package exporting utilities and translation mappings for various languages, which `core` depends on.
+- `styles`: A package providing CSS utility classes which frameworks can use to provide consistent styling. The `styles` package works for existing Tailwind users, but also exports a distributable file with compiled "tailwindless" CSS. The CSS styles heavily depend on CSS variables for customization.
+
+Additionally, framework specific packages depend on these agnostic packages to offer full integration with the frameworks:
+
+- `react`: Exposes React UI components (in the form of screens, full page components, or forms, the bare-bones UI forms) & hooks, enabling users to easily build their own UIs or consume the built in ones.
+- `angular`: Exposes Angular UI components (in the form of screens, full page components, or forms, the bare-bones UI forms) & DI functionality, enabling users to easily build their own UIs or consume the built in ones. This package depends directly on AngularFire.
+
+The dependency graph is:
+
+```
+graph TD
+  core --> translations;
+  react --> core;
+  angular --> core;
+  angular --> styles;
+  react --> styles;
+  shadcn --> react;
+```
+
+## Misc
+
+- All packages extend the same base `tsconfig.json` file.
+- Where possible, prefer Vitest testing framework.
+
+## Additional Context
+
+- `core`: @./packages/core/GEMINI.md
+- `react`: @./packages/react/GEMINI.md
+- `styles`: @./packages/styles/GEMINI.md
+- `translations`: @./packages/translations/GEMINI.md

README.md

@@ -202,12 +202,11 @@ The initializeUI function accepts an options object that allows you to customize
 ### Type Definition
 
 ```js
-type FirebaseUIConfigurationOptions = {
+type FirebaseUIOptions = {
   app: FirebaseApp;
-  locale?: Locale | undefined;
-  translations?: RegisteredTranslations[] | undefined;
-  behaviors?: Partial<Behavior<keyof BehaviorHandlers>>[] | undefined;
-  recaptchaMode?: 'normal' | 'invisible' | undefined;
+  auth?: Auth;
+  locale?: Locale;
+  behaviors?: Behavior<any>[];
 };
 ```
 
@@ -290,7 +289,7 @@ const ui = initializeUI({
 Configuration Type:
 
 ```js
-type FirebaseUIConfigurationOptions = {
+type FirebaseUIOptions = {
   app: FirebaseApp;
   locale?: Locale | undefined;
   translations?: RegisteredTranslations[] | undefined;
@@ -303,61 +302,61 @@ type FirebaseUIConfigurationOptions = {
 
 **signInWithEmailAndPassword**: Signs in the user based on an email/password credential.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _email_: string
 - _password_: string
 
 **createUserWithEmailAndPassword**: Creates a user account based on an email/password credential.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _email_: string
 - _password_: string
 
 **signInWithPhoneNumber**: Signs in the user based on a provided phone number, using ReCaptcha to verify the sign-in.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _phoneNumber_: string
 - _recaptchaVerifier_: string
 
 **confirmPhoneNumber**: Verifies the phonenumber credential and signs in the user.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _confirmationResult_: [ConfirmationResult](https://firebase.google.com/docs/reference/node/firebase.auth.ConfirmationResult)
 - _verificationCode_: string
 
 **sendPasswordResetEmail**: Sends password reset instructions to an email account.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _email_: string
 
 **sendSignInLinkToEmail**: Send an sign-in links to an email account.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _email_: string
 
 **signInWithEmailLink**: Signs in with the user with the email link. If `autoUpgradeAnonymousCredential` then a pending credential will be handled.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _email_: string
 - _link_: string
 
 **signInAnonymously**: Signs in as an anonymous user.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 
 **signInWithOAuth**: Signs in with a provider such as Google via a redirect link. If `autoUpgradeAnonymousCredential` then the account will upgraded.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _provider_: [AuthProvider](https://firebase.google.com/docs/reference/node/firebase.auth.AuthProvider)
 
 **completeEmailLinkSignIn**: Completes the signing process based on a user signing in with an email link.
 
-- _ui_: FirebaseUIConfiguration
+- _ui_: FirebaseUI
 - _currentUrl_: string
 
 #### Provide a Store via Context
 
-Using the returned `FirebaseUIConfiguration`, it is reccomended to use local context/providers/dependency-injection to expose the FirebaseUIConfiguration to the application. Here is an example context wrapper which accepts the configuration as a `ui` parameter:
+Using the returned `FirebaseUI`, it is reccomended to use local context/providers/dependency-injection to expose the FirebaseUI to the application. Here is an example context wrapper which accepts the configuration as a `ui` parameter:
 
 ```js
 /** Creates a framework-agnostic context for Firebase UI configuration **/
@@ -391,7 +390,7 @@ export function createFirebaseUIContext(initialConfig) {
 FirebaseUI Configuration Type:
 
 ```js
-export type FirebaseUIConfiguration = {
+export type FirebaseUI = {
   app: FirebaseApp,
   getAuth: () => Auth,
   setLocale: (locale: Locale) => void,
@@ -556,7 +555,7 @@ The core library provides a function for handling errors.
 
 ```js
 export function handleFirebaseError(
-  ui: FirebaseUIConfiguration,
+  ui: FirebaseUI,
   error: any,
   opts?: {
     enableHandleExistingCredential?: boolean;

eslint.config.ts

@@ -7,6 +7,7 @@ import tseslint from "typescript-eslint";
 import pluginPrettier from "eslint-plugin-prettier";
 import pluginReact from "eslint-plugin-react";
 import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginAngular from "angular-eslint";
 
 const config: any[] = [
   globalIgnores([
@@ -16,6 +17,7 @@ const config: any[] = [
     "**/.next/**",
     "**/.angular/**",
     "**/releases/**",
+    "**/shadcn/public-dev/**",
     "packages/styles/dist.css",
     "packages/angular/**",
     "packages/shadcn/public",
@@ -30,8 +32,21 @@ const config: any[] = [
       "prettier/prettier": "error",
       "arrow-body-style": "off",
       "prefer-arrow-callback": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "error",
+        {
+          disallowTypeAnnotations: false,
+          prefer: "type-imports",
+          fixStyle: "inline-type-imports",
+        },
+      ],
     },
   },
+  {
+    // Angular package specific rules
+    files: ["packages/angular/src/**/*.{ts,tsx}"],
+    processor: pluginAngular.processInlineTemplates,
+  },
   {
     // React package specific rules
     files: ["packages/react/src/**/*.{ts,tsx}", "packages/shadcn/src/**/*.{ts,tsx}"],
@@ -60,6 +75,7 @@ const config: any[] = [
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/consistent-type-imports": "off",
     },
   },
 ];

examples/angular/src/app/app.config.server.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { mergeApplicationConfig, ApplicationConfig } from "@angular/core";
+import { mergeApplicationConfig, type ApplicationConfig } from "@angular/core";
 import { provideServerRendering, withRoutes } from "@angular/ssr";
 import { serverRoutes } from "./app.routes.server";
 import { appConfig } from "./app.config";

examples/angular/src/app/app.config.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ApplicationConfig, provideZoneChangeDetection, isDevMode } from "@angular/core";
+import { type ApplicationConfig, provideZoneChangeDetection, isDevMode } from "@angular/core";
 import { provideRouter } from "@angular/router";
 
 import { routes } from "./app.routes";
@@ -26,7 +26,12 @@ import { provideFirebaseUI, provideFirebaseUIPolicies } from "@firebase-ui/angul
 import { initializeUI } from "@firebase-ui/core";
 
 const firebaseConfig = {
-  // your Firebase config here
+  apiKey: "AIzaSyCvMftIUCD9lUQ3BzIrimfSfBbCUQYZf-I",
+  authDomain: "fir-ui-rework.firebaseapp.com",
+  projectId: "fir-ui-rework",
+  storageBucket: "fir-ui-rework.firebasestorage.app",
+  messagingSenderId: "200312857118",
+  appId: "1:200312857118:web:94e3f69b0e0a4a863f040f",
 };
 
 export const appConfig: ApplicationConfig = {

examples/angular/src/app/app.routes.server.ts

@@ -14,47 +14,56 @@
  * limitations under the License.
  */
 
-import { RenderMode, ServerRoute } from "@angular/ssr";
+import { RenderMode, type ServerRoute } from "@angular/ssr";
 
 export const serverRoutes: ServerRoute[] = [
   /** Home page - perfect for SSG as it's a static landing page */
   {
     path: "",
     renderMode: RenderMode.Prerender,
   },
-  /** Key auth screen demos - good for SSG as they showcase Firebase UI components */
+  /** Static auth demos - good for SSG as they showcase Firebase UI components */
   {
-    path: "screens/sign-in-auth-screen",
+    path: "sign-in",
     renderMode: RenderMode.Prerender,
   },
   {
-    path: "screens/oauth-screen",
+    path: "oauth",
     renderMode: RenderMode.Prerender,
   },
+  /** Interactive auth routes - better as CSR for user interaction */
   {
-    path: "screens/sign-up-auth-screen",
-    renderMode: RenderMode.Prerender,
+    path: "sign-up",
+    renderMode: RenderMode.Client,
   },
   {
-    path: "screens/email-link-auth-screen",
-    renderMode: RenderMode.Prerender,
+    path: "forgot-password",
+    renderMode: RenderMode.Client,
   },
+  /** Dynamic auth routes - good for SSR as they may need server-side data */
   {
-    path: "screens/phone-auth-screen",
-    renderMode: RenderMode.Prerender,
+    path: "email-link",
+    renderMode: RenderMode.Server,
   },
-  /** Interactive auth routes - better as CSR for user interaction */
   {
-    path: "sign-in",
-    renderMode: RenderMode.Client,
+    path: "email-link-oauth",
+    renderMode: RenderMode.Server,
   },
   {
-    path: "register",
-    renderMode: RenderMode.Client,
+    path: "phone",
+    renderMode: RenderMode.Server,
   },
   {
-    path: "forgot-password",
-    renderMode: RenderMode.Client,
+    path: "phone-oauth",
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: "sign-in-oauth",
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: "sign-up-oauth",
+    renderMode: RenderMode.Server,
   },
   /** All other routes will be rendered on the server (SSR) */
   {