{"id":41090,"library":"firebaseui-auth","title":"FirebaseUI Auth","description":"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.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/ionic-team/stencil-component-starter","tags":["javascript","login","stencil","firebase","auth","firebase auth","authentication","angular","firebaseauthentication","typescript"],"install":[{"cmd":"npm install firebaseui-auth","lang":"bash","label":"npm"},{"cmd":"yarn add firebaseui-auth","lang":"bash","label":"yarn"},{"cmd":"pnpm add firebaseui-auth","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Firebase Auth instance must be passed as a property","package":"firebase","optional":true},{"reason":"Underlying FirebaseUI library for UI flows","package":"firebaseui","optional":true}],"imports":[{"note":"The component is registered as a custom element via side-effect import (Stencil convention). Named exports may not exist.","wrong":"import { FirebaseLogin } from 'firebaseui-auth';","symbol":"FirebaseLogin","correct":"import 'firebaseui-auth';"},{"note":"For Angular/React wrappers, you may need the component class from the dist/types path.","wrong":"import { FirebaseLoginComponent } from 'firebaseui-auth';","symbol":"FirebaseLoginComponent","correct":"import { FirebaseLoginComponent } from 'firebaseui-auth/dist/types/components/firebase-login/firebase-login';"},{"note":"Must call defineCustomElements() in main.ts for lazy loading (Stencil convention).","wrong":"import { defineCustomElements } from 'firebaseui-auth';","symbol":"defineCustomElements","correct":"import { defineCustomElements } from 'firebaseui-auth/loader';"},{"note":"TypeScript type for success callback data.","wrong":"There is no common wrong pattern","symbol":"FirebaseUISignInSuccessWithAuthResult","correct":"import type { FirebaseUISignInSuccessWithAuthResult } from 'firebaseui-auth';"}],"quickstart":{"code":"import { initializeApp } from 'firebase/app';\nimport { getAuth } from 'firebase/auth';\nimport * as firebaseui from 'firebaseui';\nimport 'firebaseui/dist/firebaseui.css';\nimport { defineCustomElements } from 'firebaseui-auth/loader';\n\ndefineCustomElements();\n\nconst firebaseConfig = {\n  apiKey: process.env.API_KEY ?? '',\n  authDomain: process.env.AUTH_DOMAIN ?? ''\n};\nconst app = initializeApp(firebaseConfig);\nconst auth = getAuth(app);\n\nconst uiConfig = {\n  signInOptions: [\n    firebaseui.auth.GoogleAuthProvider.PROVIDER_ID,\n    firebaseui.auth.EmailAuthProvider.PROVIDER_ID\n  ],\n  signInFlow: 'popup',\n  callbacks: {\n    signInSuccessWithAuthResult: (authResult: any) => {\n      console.log('Signed in:', authResult.user);\n      return false;\n    },\n    signInFailure: (error: any) => console.error(error)\n  }\n};\n\n// In your HTML template:\n// <firebase-login auth={auth} uiConfig={uiConfig}></firebase-login>","lang":"typescript","description":"Initializes Firebase Auth, configures FirebaseUI options, and renders the <firebase-login> component with Stencil loader."},"warnings":[{"fix":"Use getAuth(app) from 'firebase/auth' (modular) instead of firebase.auth() (compat).","message":"The component expects a Firebase Auth v9+ modular instance (getAuth()), not the v8 compat namespaced instance.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Pass uiConfig as a static object or use one-way binding with square brackets in Angular: [uiConfig]=\"uiConfig\".","message":"The uiConfig object must be passed directly; using two-way binding may cause infinite re-renders in Angular.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Import components individually from the dist/components subpath once available.","message":"Breaking change: imports may be restructured in future releases; currently no tree-shaking support for components.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Call defineCustomElements() in the application entry point (main.ts) before any component usage.","message":"The component uses Stencil lazy loading; custom elements are not available until defineCustomElements() resolves.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use the 'signInSuccessWithAuthResult' output on the component.","message":"The 'signInSuccess' callback is deprecated in FirebaseUI v6; use 'signInSuccessWithAuthResult' instead.","severity":"deprecated","affected_versions":">=0.2.0"},{"fix":"Add CUSTOM_ELEMENTS_SCHEMA to your Angular module's schemas array.","message":"The component may not work with Angular Ivy until the component is added to CUSTOM_ELEMENTS_SCHEMA.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"search_vec":"'0.2.0':22 'agnost':58 'angular':47,92 'auth':2,20,88,90 'authent':16,91 'base':6 'cadenc':32 'compon':8 'configur':82 'correct':83 'current':25 'custom':39 'depend':68 'differenti':55 'drop':14 'drop-in':13 'easi':42 'element':40 'establish':30 'etc':50 'firebas':19,70,87,89 'firebaseauthent':93 'firebaseui':1,35,73 'framework':46,57 'framework-agnost':56 'howev':66 'html':52 'integr':43 'javascript':84 'key':54 'lazi':60 'lazy-load':59 'librari':9 'load':61 'login':85 'must':80 'output':78 'provid':11 'react':48 'releas':27,31 'reusabl':38 'shakeabl':65 'stabl':26 'stencil':5,77,86 'stencil-bas':4 'tag':53 'target':79 'tree':64 'tree-shak':63 'typescript':94 'ui':17 'v6':74 'v9':71 'version':21 'via':51 'vue':49 'web':7,36 'wrap':34","created_at":"2026-06-04T18:50:43.517969+00:00","updated_at":"2026-06-04T18:50:43.517969+00:00","problems":[{"fix":"Run: npm install firebaseui","cause":"Missing peer dependency 'firebaseui'","error":"Error: Could not find 'firebaseui' (required by 'firebaseui-auth')"},{"fix":"Add CUSTOM_ELEMENTS_SCHEMA to the module: schemas: [CUSTOM_ELEMENTS_SCHEMA]","cause":"Angular does not recognize the custom element","error":"Failed to load component: 'firebase-login' is not a known element"},{"fix":"Pass auth={auth} where auth is from getAuth()","cause":"Missing required 'auth' property on <firebase-login>","error":"Uncaught (in promise) Error: The Firebase Auth instance must be provided."},{"fix":"Ensure uiConfig object is passed as a property, e.g., [uiConfig]=\"uiConfig\"","cause":"uiConfig is not passed or is undefined","error":"TypeError: Cannot read properties of undefined (reading 'signInOptions')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/ionic-team/stencil-component-starter#readme","github":"https://github.com/ionic-team/stencil-component-starter","docs":null,"changelog":null,"pypi":null,"npm":"firebaseui-auth","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}