firebaseui-auth

library0.2.0jsnpmunverified

A Stencil-based web component library that provides a drop-in authentication UI for Firebase Auth. Version 0.2.0 is the current stable release with no established release cadence. It wraps FirebaseUI Web into reusable custom elements for easy integration in any framework (Angular, React, Vue, etc.) via HTML tags. Key differentiators: framework-agnostic, lazy-loaded, and tree-shakeable. However, it depends on firebase (v9+) and firebaseui (v6+), and the Stencil output targets must be configured correctly.

testing

npm install firebaseui-auth

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FIREBASEUI-AUTH

firebaseui-auth

testingjavascriptv0.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FirebaseLogin

✓ import 'firebaseui-auth';

✗ import { FirebaseLogin } from 'firebaseui-auth';

The component is registered as a custom element via side-effect import (Stencil convention). Named exports may not exist.

FirebaseLoginComponent

✓ import { FirebaseLoginComponent } from 'firebaseui-auth/dist/types/components/firebase-login/firebase-login';

✗ import { FirebaseLoginComponent } from 'firebaseui-auth';

For Angular/React wrappers, you may need the component class from the dist/types path.

defineCustomElements

✓ import { defineCustomElements } from 'firebaseui-auth/loader';

✗ import { defineCustomElements } from 'firebaseui-auth';

Must call defineCustomElements() in main.ts for lazy loading (Stencil convention).

FirebaseUISignInSuccessWithAuthResult

✓ import type { FirebaseUISignInSuccessWithAuthResult } from 'firebaseui-auth';

✗ There is no common wrong pattern

TypeScript type for success callback data.

Initializes Firebase Auth, configures FirebaseUI options, and renders the <firebase-login> component with Stencil loader.

import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import * as firebaseui from 'firebaseui'; import 'firebaseui/dist/firebaseui.css'; import { defineCustomElements } from 'firebaseui-auth/loader'; defineCustomElements(); const firebaseConfig = { apiKey: process.env.API_KEY ?? '', authDomain: process.env.AUTH_DOMAIN ?? '' }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const uiConfig = { signInOptions: [ firebaseui.auth.GoogleAuthProvider.PROVIDER_ID, firebaseui.auth.EmailAuthProvider.PROVIDER_ID ], signInFlow: 'popup', callbacks: { signInSuccessWithAuthResult: (authResult: any) => { console.log('Signed in:', authResult.user); return false; }, signInFailure: (error: any) => console.error(error) } }; // In your HTML template: // <firebase-login auth={auth} uiConfig={uiConfig}></firebase-login>

Debug

Known issues

gotchaThe component expects a Firebase Auth v9+ modular instance (getAuth()), not the v8 compat namespaced instance.

fix

Use getAuth(app) from 'firebase/auth' (modular) instead of firebase.auth() (compat).

affects: >=0.2.0

gotchaThe uiConfig object must be passed directly; using two-way binding may cause infinite re-renders in Angular.

fix

Pass uiConfig as a static object or use one-way binding with square brackets in Angular: [uiConfig]="uiConfig".

affects: >=0.2.0

breakingBreaking change: imports may be restructured in future releases; currently no tree-shaking support for components.

fix

Import components individually from the dist/components subpath once available.

affects: >=0.2.0

gotchaThe component uses Stencil lazy loading; custom elements are not available until defineCustomElements() resolves.

fix

Call defineCustomElements() in the application entry point (main.ts) before any component usage.

affects: >=0.2.0

deprecatedThe 'signInSuccess' callback is deprecated in FirebaseUI v6; use 'signInSuccessWithAuthResult' instead.

fix

Use the 'signInSuccessWithAuthResult' output on the component.

affects: >=0.2.0

gotchaThe component may not work with Angular Ivy until the component is added to CUSTOM_ELEMENTS_SCHEMA.

fix

Add CUSTOM_ELEMENTS_SCHEMA to your Angular module's schemas array.

affects: >=0.2.0

Errors

Common errors & fixes

Error: Could not find 'firebaseui' (required by 'firebaseui-auth')

Missing peer dependency 'firebaseui'

fix

Run: npm install firebaseui

Failed to load component: 'firebase-login' is not a known element

Angular does not recognize the custom element

fix

Add CUSTOM_ELEMENTS_SCHEMA to the module: schemas: [CUSTOM_ELEMENTS_SCHEMA]

Uncaught (in promise) Error: The Firebase Auth instance must be provided.

Missing required 'auth' property on <firebase-login>

fix

Pass auth={auth} where auth is from getAuth()

TypeError: Cannot read properties of undefined (reading 'signInOptions')

uiConfig is not passed or is undefined

fix

Ensure uiConfig object is passed as a property, e.g., [uiConfig]="uiConfig"

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

firebaseoptionalFirebase Auth instance must be passed as a property

firebaseuioptionalUnderlying FirebaseUI library for UI flows

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ionic-team/stencil-component-starter ↗

packagefirebaseui-auth ↗

homepagehttps://github.com/ionic-team/stencil-component-starter#readme ↗