{"id":13404114,"url":"https://github.com/firebase/firebaseui-web","last_synced_at":"2025-05-13T22:00:23.181Z","repository":{"id":37728217,"uuid":"58566630","full_name":"firebase/firebaseui-web","owner":"firebase","description":"FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.","archived":false,"fork":false,"pushed_at":"2025-05-05T20:18:39.000Z","size":11366,"stargazers_count":4698,"open_issues_count":224,"forks_count":1081,"subscribers_count":212,"default_branch":"master","last_synced_at":"2025-05-06T21:09:49.882Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://firebase.google.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firebase.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-05-11T17:34:56.000Z","updated_at":"2025-05-06T18:27:46.000Z","dependencies_parsed_at":"2023-02-08T06:05:13.035Z","dependency_job_id":"d64fefe1-b795-4436-b3d3-22ce7fccea2c","html_url":"https://github.com/firebase/firebaseui-web","commit_stats":{"total_commits":367,"total_committers":57,"mean_commits":6.43859649122807,"dds":0.8392370572207084,"last_synced_commit":"5ff6fde2324d95d976e35ef1986ac5f241d3774e"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firebase%2Ffirebaseui-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firebase","download_url":"https://codeload.github.com/firebase/firebaseui-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253625854,"owners_count":21938209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:01:39.248Z","updated_at":"2025-05-13T22:00:23.037Z","avatar_url":"https://github.com/firebase.png","language":"JavaScript","readme":"# FirebaseUI for Web — Auth\n\nFirebaseUI is an open-source JavaScript library for Web that provides simple,\ncustomizable UI bindings on top of [Firebase](https://firebase.google.com) SDKs\nto eliminate boilerplate code and promote best practices.\n\n---\n\n## **Update**: [Announcing FirebaseUI v7 (alpha)](https://github.com/firebase/firebaseui-web/issues/1144), a rewrite of this library to support the modular Firebase JS SDK, theming, and easier integration in popular web frameworks.\n\n---\n\nFirebaseUI Auth provides a drop-in auth solution that handles the UI flows for\nsigning in users with email addresses and passwords, phone numbers, Identity\nProvider Sign In including Google, Facebook, GitHub, Twitter, Apple, Microsoft,\nYahoo, OpenID Connect (OIDC) providers and SAML providers. It is built on top of\n[Firebase Auth](https://firebase.google.com/docs/auth).\n\nThe FirebaseUI component implements best practices for authentication on mobile\ndevices and websites, helping to sign-in and sign-up conversion for your app. It\nalso handles cases like account recovery and account linking that can be\nsecurity sensitive and error-prone to handle.\n\nFirebaseUI Auth clients are also available for\n[iOS](https://github.com/firebase/firebaseui-ios) and\n[Android](https://github.com/firebase/firebaseui-android).\n\nFirebaseUI fully supports all recent browsers. Signing in with federated\nproviders (Google, Facebook, Twitter, GitHub, Apple, Microsoft, Yahoo, OIDC,\nSAML) is also supported in Cordova/Ionic environments. Additional non-browser\nenvironments(React Native...) or Chrome extensions will be added once the\nunderlying Firebase core SDK supports them in a way that is compatible with\nFirebaseUI.\n\n## Table of Contents\n\n1. [Demo](#demo)\n2. [Installation](#installation)\n3. [Usage instructions](#using-firebaseui-for-authentication)\n4. [Configuration](#configuration)\n5. [Customization](#customizing-firebaseui-for-authentication)\n6. [Advanced](#advanced)\n7. [Developer Setup](#developer-setup)\n8. [IAP External Identities Support with FirebaseUI](#iap-external-identities-support-with-firebaseui)\n9. [Cordova Setup](#cordova-setup)\n10. [React DOM Setup](#react-dom-setup)\n11. [Angular Setup](#angular-setup)\n12. [Known issues](#known-issues)\n13. [Deprecated APIs](#deprecated-apis)\n14. [Release Notes](#release-notes)\n\n## Demo\n\nAccessible here:\n[https://fir-ui-demo-84a6c.firebaseapp.com](https://fir-ui-demo-84a6c.firebaseapp.com).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"demo/screenshot.png\" width=\"300\" title=\"Screenshot\"\u003e\n\u003c/p\u003e\n\n## Installation\n\n### Option 1: CDN\n\nYou just need to include the following script and CSS file in the `\u003chead\u003e` tag\nof your page, below the initialization snippet from the Firebase Console:\n\n```html\n\u003cscript src=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js\"\u003e\u003c/script\u003e\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css\" /\u003e\n```\n\n#### Localized Widget\n\nLocalized versions of the widget are available through the CDN. To use a\nlocalized widget, load the localized JS library instead of the default library:\n\n```html\n\u003cscript src=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth__{LANGUAGE_CODE}.js\"\u003e\u003c/script\u003e\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css\" /\u003e\n```\n\nwhere `{LANGUAGE_CODE}` is replaced by the code of the language you want. For example, the French\nversion of the library is available at\n`https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth__fr.js`. The list of available\nlanguages and their respective language codes can be found at [LANGUAGES.md](LANGUAGES.md).\n\nRight-to-left languages also require the right-to-left version of the stylesheet, available at\n`https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth-rtl.css`, instead of the default\nstylesheet. The supported right-to-left languages are Arabic (ar), Farsi (fa), and Hebrew (iw).\n\n### Option 2: npm Module\n\nInstall FirebaseUI and its peer-dependency Firebase via npm using the following\ncommands:\n\n```bash\n$ npm install firebase firebaseui --save\n```\n\nYou can then `import` the following modules within your source files:\n\n```javascript\nimport firebase from 'firebase/compat/app';\nimport * as firebaseui from 'firebaseui'\nimport 'firebaseui/dist/firebaseui.css'\n```\n\n### Option 3: Bower component\n\nInstall FirebaseUI and its dependencies via Bower using the following command:\n\n```bash\n$ bower install firebaseui --save\n```\n\nYou can then include the required files in your HTML, if your HTTP Server serves\nthe files within `bower_components/`:\n\n```html\n\u003cscript src=\"bower_components/firebaseui/dist/firebaseui.js\"\u003e\u003c/script\u003e\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"bower_components/firebaseui/dist/firebaseui.css\" /\u003e\n```\n\n## Using FirebaseUI for Authentication\n\nFirebaseUI includes the following flows:\n\n1. Interaction with Identity Providers such as Google and Facebook\n2. Phone number based authentication\n3. Sign-up and sign-in with email accounts (email/password and email link)\n4. Password reset\n5. Prevention of account duplication (activated when\n*\"One account per email address\"* setting is enabled in the\n[Firebase console](https://console.firebase.google.com). This setting is enabled\nby default.)\n6. Integration with\n[one-tap sign-up](https://developers.google.com/identity/one-tap/web/)\n7. Ability to upgrade anonymous users through sign-in/sign-up.\n8. Sign-in as a guest\n\n### Configuring sign-in providers\n\nTo use FirebaseUI to authenticate users you first need to configure each\nprovider you want to use in their own developer app settings. Please read the\n*Before you begin* section of Firebase Authentication at the following links:\n\n- [Phone number](https://firebase.google.com/docs/auth/web/phone-auth)\n- [Email and password](https://firebase.google.com/docs/auth/web/password-auth#before_you_begin)\n- [Google](https://firebase.google.com/docs/auth/web/google-signin#before_you_begin)\n- [Facebook](https://firebase.google.com/docs/auth/web/facebook-login#before_you_begin)\n- [Twitter](https://firebase.google.com/docs/auth/web/twitter-login#before_you_begin)\n- [Github](https://firebase.google.com/docs/auth/web/github-auth#before_you_begin)\n- [Anonymous](https://firebase.google.com/docs/auth/web/anonymous-auth#before_you_begin)\n- [Email link](https://firebase.google.com/docs/auth/web/email-link-auth#before_you_begin)\n- [Apple](https://firebase.google.com/docs/auth/web/apple)\n- [Microsoft](https://firebase.google.com/docs/auth/web/microsoft-oauth)\n- [Yahoo](https://firebase.google.com/docs/auth/web/yahoo-oauth)\n\nFor [Google Cloud's Identity Platform (GCIP)](https://cloud.google.com/identity-cp/)\ndevelopers, you can also enable SAML and OIDC providers following the\ninstructions:\n\n- [SAML](https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-saml)\n- [OIDC](https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-oidc)\n\n### Starting the sign-in flow\n\nYou first need to initialize your\n[Firebase app](https://firebase.google.com/docs/web/setup). The\n`firebase.auth.Auth` instance should be passed to the constructor of\n`firebaseui.auth.AuthUI`. You can then call the `start` method with the CSS\nselector that determines where to create the widget, and a configuration object.\n\nThe following example shows how to set up a sign-in screen with all supported\nproviders. Please refer to the [demo application in the examples folder](demo/)\nfor a more in-depth example, showcasing a Single Page Application mode.\n\n\u003e Firebase and FirebaseUI do not work when executed directly from a file (i.e.\n\u003e opening the file in your browser, not through a web server). Always run\n\u003e `firebase serve` (or your preferred local server) to test your app locally.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eSample FirebaseUI App\u003c/title\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-auth-compat.js\"\u003e\u003c/script\u003e\n    \u003c!-- *******************************************************************************************\n       * TODO(DEVELOPER): Paste the initialization snippet from this dialog box:\n       * Firebase Console \u003e Project Settings \u003e Add App \u003e Web.\n       ***************************************************************************************** --\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js\"\u003e\u003c/script\u003e\n    \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css\" /\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      // FirebaseUI config.\n      var uiConfig = {\n        signInSuccessUrl: '\u003curl-to-redirect-to-on-success\u003e',\n        signInOptions: [\n          // Leave the lines as is for the providers you want to offer your users.\n          firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n          firebase.auth.FacebookAuthProvider.PROVIDER_ID,\n          firebase.auth.TwitterAuthProvider.PROVIDER_ID,\n          firebase.auth.GithubAuthProvider.PROVIDER_ID,\n          firebase.auth.EmailAuthProvider.PROVIDER_ID,\n          firebase.auth.PhoneAuthProvider.PROVIDER_ID,\n          firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID\n        ],\n        // tosUrl and privacyPolicyUrl accept either url string or a callback\n        // function.\n        // Terms of service url/callback.\n        tosUrl: '\u003cyour-tos-url\u003e',\n        // Privacy policy url/callback.\n        privacyPolicyUrl: function() {\n          window.location.assign('\u003cyour-privacy-policy-url\u003e');\n        }\n      };\n\n      // Initialize the FirebaseUI Widget using Firebase.\n      var ui = new firebaseui.auth.AuthUI(firebase.auth());\n      // The start method will wait until the DOM is loaded.\n      ui.start('#firebaseui-auth-container', uiConfig);\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- The surrounding HTML is left untouched by FirebaseUI.\n         Your app may use that space for branding, controls and other customizations.--\u003e\n    \u003ch1\u003eWelcome to My Awesome App\u003c/h1\u003e\n    \u003cdiv id=\"firebaseui-auth-container\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**This is only relevant for single page apps or apps where the sign-in UI is\nrendered conditionally (e.g. button click)**\n\nWhen redirecting back from Identity Providers like Google\nand Facebook or email link sign-in, `start()` method needs to be called to\nfinish the sign-in flow.\nIf it requires a user interaction to start the initial sign-in process, you need\nto check if there is a pending redirect operation going on on page load to check\nwhether `start()` needs to be called.\n\nTo check if there is a pending redirect operation to complete a sign-in attempt,\ncheck `isPendingRedirect()` before deciding whether to render FirebaseUI\nvia `start()`.\n\n```javascript\nif (ui.isPendingRedirect()) {\n  ui.start('#firebaseui-auth-container', uiConfig);\n}\n```\n\nHere is how you would track the Auth state across all your pages:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eSample FirebaseUI App\u003c/title\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-auth-compat.js\"\u003e\u003c/script\u003e\n    \u003c!-- *******************************************************************************************\n       * TODO(DEVELOPER): Paste the initialization snippet from:\n       * Firebase Console \u003e Overview \u003e Add Firebase to your web app. *\n       ***************************************************************************************** --\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      initApp = function() {\n        firebase.auth().onAuthStateChanged(function(user) {\n          if (user) {\n            // User is signed in.\n            var displayName = user.displayName;\n            var email = user.email;\n            var emailVerified = user.emailVerified;\n            var photoURL = user.photoURL;\n            var uid = user.uid;\n            var phoneNumber = user.phoneNumber;\n            var providerData = user.providerData;\n            user.getIdToken().then(function(accessToken) {\n              document.getElementById('sign-in-status').textContent = 'Signed in';\n              document.getElementById('sign-in').textContent = 'Sign out';\n              document.getElementById('account-details').textContent = JSON.stringify({\n                displayName: displayName,\n                email: email,\n                emailVerified: emailVerified,\n                phoneNumber: phoneNumber,\n                photoURL: photoURL,\n                uid: uid,\n                accessToken: accessToken,\n                providerData: providerData\n              }, null, '  ');\n            });\n          } else {\n            // User is signed out.\n            document.getElementById('sign-in-status').textContent = 'Signed out';\n            document.getElementById('sign-in').textContent = 'Sign in';\n            document.getElementById('account-details').textContent = 'null';\n          }\n        }, function(error) {\n          console.log(error);\n        });\n      };\n\n      window.addEventListener('load', function() {\n        initApp()\n      });\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eWelcome to My Awesome App\u003c/h1\u003e\n    \u003cdiv id=\"sign-in-status\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"sign-in\"\u003e\u003c/div\u003e\n    \u003cpre id=\"account-details\"\u003e\u003c/pre\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n## Configuration\n\nFirebaseUI supports the following configuration parameters.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eautoUpgradeAnonymousUsers\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  Whether to automatically upgrade existing anonymous users on sign-in/sign-up.\n  See \u003ca href=\"#upgrading-anonymous-users\"\u003eUpgrading anonymous users\u003c/a\u003e.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003efalse\u003c/code\u003e\n  When set to \u003ccode\u003etrue\u003c/code\u003e, \u003ccode\u003esignInFailure\u003c/code\u003e callback is\n  required to be provided to handle merge conflicts.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ecallbacks\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  An object of developers' \u003ca href=\"#available-callbacks\"\u003ecallbacks\u003c/a\u003e after\n  specific events.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e \u003ccode\u003e{}\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ecredentialHelper\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The Credential Helper to use.\n  See \u003ca href=\"#credential-helper\"\u003eCredential Helper\u003c/a\u003e.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003efirebaseui.auth.CredentialHelper.NONE\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003equeryParameterForSignInSuccessUrl\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The redirect URL parameter name for the sign-in success URL. See\n  \u003ca href=\"#overwriting-the-sign-in-success-url\"\u003eOverwriting the sign-in success URL\u003c/a\u003e.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e \u003ccode\u003e\"signInSuccessUrl\"\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003equeryParameterForWidgetMode\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The redirect URL parameter name for the “mode” of the Widget.\n  See \u003ca href=\"#firebaseui-widget-modes\"\u003eFirebaseUI widget modes\u003c/a\u003e.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e \u003ccode\u003e\"mode\"\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003esignInFlow\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The sign-in flow to use for IDP providers: \u003ccode\u003eredirect\u003c/code\u003e or\n  \u003ccode\u003epopup\u003c/code\u003e.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e \u003ccode\u003e\"redirect\"\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eimmediateFederatedRedirect\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  A boolean which determines whether to immediately redirect to the provider's\n  site or instead show the default 'Sign in with Provider' button when there is\n  only a single federated provider in \u003ccode\u003esignInOptions\u003c/code\u003e. In order for\n  this option to take effect, the \u003ccode\u003esignInOptions\u003c/code\u003e must only hold a\n  single federated provider (like 'google.com') and signInFlow must be set to\n  'redirect'.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003esignInOptions\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  The list of \u003ca href=\"#available-providers\"\u003eproviders\u003c/a\u003e enabled for signing\n  into your app. The order you specify them will be the order they are displayed\n  on the sign-in provider selection screen.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003esignInSuccessUrl\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The URL where to redirect the user after a successful sign-in.\n  \u003cstrong\u003eRequired\u003c/strong\u003e when the \u003ccode\u003esignInSuccessWithAuthResult\u003c/code\u003e\n  callback is not used or when it returns \u003ccode\u003etrue\u003c/code\u003e.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003etosUrl\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  The URL of the Terms of Service page or a callback function to be invoked\n  when Terms of Service link is clicked.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eprivacyPolicyUrl\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  The URL of the Privacy Policy page or a callback function to be invoked\n  when Privacy Policy link is clicked.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eadminRestrictedOperation\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  This setting is only applicable to \"Google Cloud Identity Platform\" projects.\n  Learn more about [GCIP](https://cloud.google.com/identity-platform/).\n  The object for configuring `adminRestrictedOperation` options, contains 3\n  fields:\n  `status(boolean)`: This flag should mirror the project user actions\n  (\"Enable create\") settings. When sign-up is disabled in the project settings,\n  this should be set to `true`. Setting this to `true` without disabling sign-up\n  in the project settings will not have any effect. For GCIP projects, this is\n  done by going to the \"Settings\" page in the \"Identity Platform\" section in the\n  Cloud Console. Under the \"USERS\" tab, go to \"User actions\". Uncheck \"Enable\n  create (sign-up)\" and click \"SAVE\".\n  This does not enforce the policy but is rather useful for providing additional\n  instructions to the end user when a user tries to create a new user account\n  and the Auth server blocks the operation. This boolean works on all providers\n  (federated, email/password, email link and phone number).\n  `adminEmail(string|undefined)`: The optional site administrator email to\n  contact for access when sign up is disabled, for example: `admin@example.com`.\n  `helpLink(string|undefined)`: The optional help link to provide information\n  on how to get access to the site when sign up is disabled. For example:\n  `https://www.example.com/trouble_signing_in`.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Credential Helper\n\nThe role of a credential helper is to help your users sign into your website.\nWhen one is enabled, your users will be prompted with email addresses and\nusernames they have saved from your app or other applications.\nFirebaseUI supports the one-tap sign-up credential helper. `accountchooser.com`\nis no longer supported.\n\n#### One-tap sign-up\n\n[One-tap sign-up](https://developers.google.com/identity/one-tap/web/)\nprovides seamless authentication flows to\nyour users with Google's one tap sign-up and automatic sign-in APIs.\nWith one tap sign-up, users are prompted to create an account with a dialog\nthat's inline with FirebaseUI NASCAR screen. With just one tap, they get a\nsecure, token-based, passwordless account with your service, protected by their\nGoogle Account. As the process is frictionless, users are much more likely to\nregister.\nReturning users are signed in automatically, even when they switch devices or\nplatforms, or after their session expires.\nOne-tap sign-up integrates with FirebaseUI and if you request Google OAuth\nscopes, you will still get back the expected Google OAuth access token even if\nthe user goes through the one-tap flow. However, in that case 'redirect' flow is\nalways used even when 'popup' is specified.\nIn addition, if you choose to force prompt for Google sign-in, one-tap auto\nsign-in will be automatically disabled.\nOne-tap is an additive feature and is only supported in the latest evergreen\nmodern browser environments.\nFor more information on how to configure one-tap sign-up, refer to the\n[one-tap get started guide](https://developers.google.com/identity/one-tap/web/guides/get-google-api-clientid).\n\nThe following example shows how to configure one-tap sign-up with FirebaseUI.\nAlong with the corresponding one-tap `credentialHelper`, the  Google OAuth\n`clientId` has to be provided with the Firebase Google provider:\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      // Google provider must be enabled in Firebase Console to support one-tap\n      // sign-up.\n      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n      // Required to enable ID token credentials for this provider.\n      // This can be obtained from the Credentials page of the Google APIs\n      // console. Use the same OAuth client ID used for the Google provider\n      // configured with GCIP or Firebase Auth.\n      clientId: 'xxxxxxxxxxxxxxxxx.apps.googleusercontent.com'\n    },\n    firebase.auth.FacebookAuthProvider.PROVIDER_ID,\n    firebase.auth.TwitterAuthProvider.PROVIDER_ID,\n    firebase.auth.GithubAuthProvider.PROVIDER_ID,\n    firebase.auth.EmailAuthProvider.PROVIDER_ID,\n  ],\n  // Required to enable one-tap sign-up credential helper.\n  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO\n});\n// Auto sign-in for returning users is enabled by default except when prompt is\n// not 'none' in the Google provider custom parameters. To manually disable:\nui.disableAutoSignIn();\n```\n\nAuto sign-in for returning users can be disabled by calling\n`ui.disableAutoSignIn()`. This may be needed if the FirebaseUI sign-in page is\nbeing rendered after the user signs out.\n\nTo see FirebaseUI in action with one-tap sign-up, check out the FirebaseUI\n[demo app](https://fir-ui-demo-84a6c.firebaseapp.com/).\n\n|Credential Helper                 |Value                                                 |\n|----------------------------------|------------------------------------------------------|\n|One-tap sign-up                   |`firebaseui.auth.CredentialHelper.GOOGLE_YOLO`        |\n|None (disable)                    |`firebaseui.auth.CredentialHelper.NONE`               |\n\n### Available providers\n\n|Provider          |Value                                           |\n|------------------|------------------------------------------------|\n|Google            |`firebase.auth.GoogleAuthProvider.PROVIDER_ID`  |\n|Facebook          |`firebase.auth.FacebookAuthProvider.PROVIDER_ID`|\n|Twitter           |`firebase.auth.TwitterAuthProvider.PROVIDER_ID` |\n|Github            |`firebase.auth.GithubAuthProvider.PROVIDER_ID`  |\n|Email and password|`firebase.auth.EmailAuthProvider.PROVIDER_ID`   |\n|Phone number      |`firebase.auth.PhoneAuthProvider.PROVIDER_ID`   |\n|Anonymous         |`firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID`|\n|Apple             |`apple.com`                                 |\n|Microsoft         |`microsoft.com`                                 |\n|Yahoo             |`yahoo.com`                                     |\n|SAML (GCIP only)  |`saml.*********`                               |\n|OIDC (GCIP only)  |`oidc.*********`                               |\n\n### Configure OAuth providers\n\nTo specify custom scopes, or custom OAuth parameters per provider, you can pass\nan object instead of just the provider value:\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n      scopes: [\n        'https://www.googleapis.com/auth/contacts.readonly'\n      ],\n      customParameters: {\n        // Forces account selection even when one account\n        // is available.\n        prompt: 'select_account'\n      }\n    },\n    {\n      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,\n      scopes: [\n        'public_profile',\n        'email',\n        'user_likes',\n        'user_friends'\n      ],\n      customParameters: {\n        // Forces password re-entry.\n        auth_type: 'reauthenticate'\n      }\n    },\n    // Twitter does not support scopes.\n    firebase.auth.TwitterAuthProvider.PROVIDER_ID,\n    // Other providers don't need to be given as object.\n    firebase.auth.EmailAuthProvider.PROVIDER_ID\n  ]\n});\n```\n\n#### Generic OAuth provider\n\nYou can let your users authenticate with FirebaseUI using OAuth providers like\n[Apple](https://firebase.google.com/docs/auth/web/apple),\n[Microsoft Azure Active Directory](https://firebase.google.com/docs/auth/web/microsoft-oauth)\nand [Yahoo](https://firebase.google.com/docs/auth/web/yahoo-oauth)\nby integrating generic OAuth Login into your app.\n\nYou just need to pass the provider ID in `signInOptions`, FirebaseUI provides\nthe default configurations for the sign in button(button color, icon and display\nname):\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    'apple.com',\n    'microsoft.com',\n    'yahoo.com',\n  ]\n});\n```\n\nYou can also override these default configurations with your own custom ones.\nGeneric OAuth providers' `signInOptions` support the following configuration\nparameters.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eprovider\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003eThe provider ID, eg. \u003ccode\u003emicrosoft.com\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eproviderName\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The provider name displayed to end users (sign in button/linking prompt),\n  eg. \"Microsoft\"\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003eprovider ID\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003efullLabel\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The full label of the button. Instead of \"Sign in with $providerName\", this\n  button label will be used.\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003eSign in with $providerName\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebuttonColor\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The color of sign in button. The css of the button can be overwritten with\n  the attribute/value in the HTML element:\n  \u003ccode\u003edata-provider-id=\"providerId\"\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eiconUrl\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The URL of the Identity Provider's icon. This will be displayed on the\n  provider's sign-in button, etc.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003escopes\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The list of additional OAuth 2.0 scopes beyond basic profile that you want to\n  request from the authentication provider.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ecustomParameters\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The list of additional custom OAuth parameters that you want to send with the\n  OAuth request.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eloginHintKey\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The key of the custom parameter, with which the login hint can be passed to\n  the provider. This is useful in case a user previously signs up with an IdP\n  like Microsoft and then tries to sign in with email using the same Microsoft\n  email. FirebaseUI can then ask the user to sign in with that email to the\n  already registered account with Microsoft. For Microsoft and Yahoo,\n  this field is `login_hint`.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: 'microsoft.com',\n      providerName: 'Microsoft',\n      // To override the full label of the button.\n      // fullLabel: 'Login with Microsoft',\n      buttonColor: '#2F2F2F',\n      iconUrl: '\u003cicon-url-of-sign-in-button\u003e',\n      loginHintKey: 'login_hint',\n      scopes: [\n        'mail.read'\n      ],\n      customParameters: {\n        prompt: 'consent'\n      }\n    }\n  ]\n});\n```\n\n### OpenID Connect (OIDC) providers (GCIP only)\n\nFor [GCIP](https://cloud.google.com/identity-cp) customers, you can enable your\napp for\n[OpenID Connect (OIDC)](https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-oidc)\nauthentication with FirebaseUI.\n\nOIDC providers' `signInOptions` support the following configuration parameters.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eprovider\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003eThe provider ID, eg. \u003ccode\u003eoidc.myProvider\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eproviderName\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The provider name displayed to end users (sign in button/linking prompt).\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003eprovider ID\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003efullLabel\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The full label of the button. Instead of \"Sign in with $providerName\", this\n  button label will be used.\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003eSign in with $providerName\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebuttonColor\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  The color of sign in button. The css of the button can be overwritten with\n  attribute/value in the HTML element:\n  \u003ccode\u003edata-provider-id=\"providerId\"\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eiconUrl\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  The URL of the Identity Provider's icon. This will be displayed on the\n  provider's sign-in button, etc.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ecustomParameters\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The list of additional custom parameters that the OIDC provider supports.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: 'oidc.myProvider',\n      providerName: 'MyOIDCProvider',\n      // To override the full label of the button.\n      // fullLabel: 'Employee Login',\n      buttonColor: '#2F2F2F',\n      iconUrl: '\u003cicon-url-of-sign-in-button\u003e',\n      customParameters: {\n        OIDCSupportedParameter: 'value'\n      }\n    }\n  ]\n});\n```\n\n### SAML providers (GCIP only)\n\nFor [GCIP](https://cloud.google.com/identity-cp) customers, you can enable your\napp for\n[SAML](https://cloud.google.com/identity-cp/docs/how-to-enable-application-for-saml)\nauthentication with FirebaseUI.\n\nSAML providers' `signInOptions` support the following configuration parameters.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eprovider\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003eThe provider ID, eg. \u003ccode\u003esaml.myProvider\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eproviderName\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The provider name displayed to end users (sign in button/linking prompt).\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003eprovider ID\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003efullLabel\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The full label of the button. Instead of \"Sign in with $providerName\", this\n  button label will be used.\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003eSign in with $providerName\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ebuttonColor\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  The color of sign in button. The css of the button can be overwritten with\n  attribute/value in the HTML element:\n  \u003ccode\u003edata-provider-id=\"providerId\"\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eiconUrl\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  The URL of the Identity Provider's icon. This will be displayed on the\n  provider's sign-in button, etc.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: 'saml.myProvider',\n      providerName: 'MySAMLProvider',\n      // To override the full label of the button.\n      // fullLabel: 'Constractor Portal',\n      buttonColor: '#2F2F2F',\n      iconUrl: '\u003cicon-url-of-sign-in-button\u003e'\n    }\n  ]\n});\n```\n\n### Configure Email Provider\n\nYou can configure either email/password or email/link sign-in with FirebaseUI by\nproviding the relevant object in the configuration \u003ccode\u003esignInOptions\u003c/code\u003e\narray.\n\nYou can disable new user sign up with email providers by setting the flag\n`disableSignUp.status` to `true`. This will display an error message when new\nusers attempt to sign up.\n\nNote that this flag will only disable sign up from the UI and will not prevent\nsign up via REST API. It is highly recommended that Identity Platform projects\nenforce this policy via one of these 2 mechanisms:\n\n- Blocking functions: Set a `beforeCreate` trigger to disable sign up for email\n  providers.\n- In the Cloud Console / Settings / USERS tab, uncheck `Enable create (sign-up)`\n  checkbox. Though for this setting, sign up for all providers will be disabled.\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eName\u003c/th\u003e\n\u003cth\u003eType\u003c/th\u003e\n\u003cth\u003eRequired\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eprovider\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003eYes\u003c/td\u003e\n\u003ctd\u003e\n  For email sign-in, this should be\n  \u003ccode\u003efirebase.auth.EmailAuthProvider.PROVIDER_ID\u003c/code\u003e.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003erequireDisplayName\u003c/td\u003e\n\u003ctd\u003eboolean\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  Defines whether to require the user to provide a display name during email\n  and password sign up. Note: this has no effect when using the \u003ccode\u003efirebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD\u003c/code\u003e.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e \u003ccode\u003etrue\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003esignInMethod\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  Defines whether to use email and password or email link authentication.\n  This should be\n  \u003ccode\u003efirebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD\u003c/code\u003e\n  for email and password sign-in,\n  \u003ccode\u003efirebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD\u003c/code\u003e for\n  email link authentication.\n  \u003cbr/\u003e\n  \u003cem\u003eDefault:\u003c/em\u003e\n  \u003ccode\u003efirebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eforceSameDevice\u003c/td\u003e\n\u003ctd\u003eboolean\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  Whether to force same device flow. If false, opening the link on a different\n  device will display a message instructing the user to open the link on the\n  same device or browser. This should be true when used with\n  anonymous user upgrade flows. This is only relevant to email link sign-in.\n  \u003cem\u003eDefault:\u003c/em\u003e \u003ccode\u003efalse\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eemailLinkSignIn\u003c/td\u003e\n\u003ctd\u003efunction\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  Defines the optional callback function to return\n  \u003ccode\u003efirebase.auth.ActionCodeSettings\u003c/code\u003e configuration to use when\n  sending the link. This provides the ability to specify how the link can be\n  handled, custom dynamic link, additional state in the deep link, etc.\n  When not provided, the current URL is used and a web only flow is triggered.\n  This is only relevant to email link sign-in.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003edisableSignUp\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003efirebaseui.auth.DisableSignUpConfig\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eNo\u003c/td\u003e\n\u003ctd\u003e\n  The object for configuring `disableSignUp` options, contains 3 fields:\n  `status(boolean)`: Whether disable user from signing up with email providers\n  (email/password or email link).\n  `adminEmail(string|undefined)`: The optional site administrator email to\n  contact for access when sign up is disabled, for example: `admin@example.com`.\n  `helpLink(string|undefined)`: The optional help link to provide information\n  on how to get access to the site when sign up is disabled. For example:\n  `https://www.example.com/trouble_signing_in`.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Email and Password\n\nEmail and password authentication is the default sign-in method for Email\nproviders.\nThe `EmailAuthProvider` with email and password can be configured to require the\nuser to enter a display name (defaults to `true`).\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,\n      requireDisplayName: false\n    }\n  ]\n});\n```\n\n#### Email Link Authentication\n\nFirebaseUI supports sign-in and sign-up with email links.\nUsing email link sign-in with FirebaseUI comes with the following benefits:\n\n- End to end support for email link sign-in with only a few configuration lines.\n- Enforces security and privacy best practices.\n- Ability to force same device flows or allow cross device flows where a user\n  can start the flow on one device and end it on another. This also covers\n  Android where email link sign-in is also supported with\n  [FirebaseUI-android](https://github.com/firebase/firebaseui-android/) and\n  [FirebaseUI-ios](https://github.com/firebase/firebaseui-ios/)\n  for iOS support.\n- Ability to switch to email link sign-in while continuing to sign-in existing\n  users with email and password.\n- Ability to support account linking, where an existing email link user signing\n  in with Facebook for the first time using the same email will have\n  both accounts merged so they can sign in with either (Facebook or email link)\n  going forward.\n- Ability to support anonymous user upgrade as long as the flow starts and ends\n  on the same device. Users opening the link on a different device will be\n  notified to open the link on the same device where the flow started.\n\n\nThe sample code below demonstrates how to configure email link sign-in with\nFirebaseUI. In this example, cross device flows are allowed and additional state\nis passed in the URL, as well as the ability to configure the link to open via\nmobile application too.\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,\n      // Use email link authentication and do not require password.\n      // Note this setting affects new users only.\n      // For pre-existing users, they will still be prompted to provide their\n      // passwords on sign-in.\n      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,\n      // Allow the user the ability to complete sign-in cross device, including\n      // the mobile apps specified in the ActionCodeSettings object below.\n      forceSameDevice: false,\n      // Used to define the optional firebase.auth.ActionCodeSettings if\n      // additional state needs to be passed along request and whether to open\n      // the link in a mobile app if it is installed.\n      emailLinkSignIn: function() {\n        return {\n          // Additional state showPromo=1234 can be retrieved from URL on\n          // sign-in completion in signInSuccess callback by checking\n          // window.location.href.\n          // If you are using a fragment in the URL, additional FirebaseUI\n          // parameters will be appended to the query string component instead\n          // of the fragment.\n          // So for a url: https://www.example.com/#/signin\n          // The completion URL will take the form:\n          // https://www.example.com/?uid_sid=xyz\u0026ui_sd=0#/signin\n          // This should be taken into account when using frameworks with \"hash\n          // routing\".\n          url: 'https://www.example.com/completeSignIn?showPromo=1234',\n          // Custom FDL domain.\n          dynamicLinkDomain: 'example.page.link',\n          // Always true for email link sign-in.\n          handleCodeInApp: true,\n          // Whether to handle link in iOS app if installed.\n          iOS: {\n            bundleId: 'com.example.ios'\n          },\n          // Whether to handle link in Android app if opened in an Android\n          // device.\n          android: {\n            packageName: 'com.example.android',\n            installApp: true,\n            minimumVersion: '12'\n          }\n        };\n      }\n    }\n  ]\n});\n```\n\nWhen rendering the sign-in UI conditionally (relevant for single page apps),\nuse `ui.isPendingRedirect()` to detect if the URL corresponds to a sign-in with\nemail link and the UI needs to be rendered to complete sign-in.\nYou can also just use\n[firebase.auth().isSignInWithEmailLink(window.location.href)](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#isSignInWithEmailLink).\n\n```javascript\n// Is there an email link sign-in?\nif (ui.isPendingRedirect()) {\n  ui.start('#firebaseui-auth-container', uiConfig);\n}\n// This can also be done via:\nif (firebase.auth().isSignInWithEmailLink(window.location.href)) {\n  ui.start('#firebaseui-auth-container', uiConfig);\n}\n```\n\nAdditional state passed in the \u003ccode\u003eurl\u003c/code\u003e can be retrieved on sign-in\ncompletion via the signInSuccess callbacks.\n\nIf you are using a fragment in the URL, additional FirebaseUI parameters will be\nappended to the query string component instead of the fragment.\nSo for a url `https://www.example.com/#/signin`, the completion URL will take\nthe form `https://www.example.com/?uid_sid=xyz\u0026ui_sd=0#/signin`.\nThis should be taken into account when using frameworks with \"hash routing\".\n\n```javascript\n// ...\nsignInSuccessWithAuthResult: function(authResult, redirectUrl) {\n  // If a user signed in with email link, ?showPromo=1234 can be obtained from\n  // window.location.href.\n  // ...\n  return false;\n}\n```\n\nFirebaseUI uses the\n[history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) to\nclear the URL from query parameters related to email link sign-in after the\none-time code is processed. This prevents the user from re-triggering the\nsign-in completion flow again on page reload or if the user signs out and tries\nto sign in again in a single page application, etc.\n\nWhen same device flows are not enforced, a user going through account linking\nflow (eg. user signing in with Facebook with an email that belongs to an\nexisting email link user) opening the link on a different device would be given\nthe choice to continue sign-in with email link without merging the Facebook\ncredential or instructed to open the link on the same device where the flow was\ninitiated to successfully merge both accounts.\n\nYou cannot use email/password and email/link sign-in at the same time. Only one\nmode can be configured at a time. However, if you previously signed up users\nwith passwords. Switching to email/link will only apply to new users and\nexisting password users will continue to be prompted for password on sign-in.\n\n### Configure Phone Provider\n\nThe `PhoneAuthProvider` can be configured with custom reCAPTCHA parameters\nwhether reCAPTCHA is visible or invisible (defaults to `normal`). Refer to the\n[reCAPTCHA API docs](https://developers.google.com/recaptcha/docs/display) for\nmore details.\n\nThe default country to select in the phone number input can also be set.\n[List of supported country codes](javascript/data/README.md). If unspecified,\nthe phone number input will default to the United States (+1).\n\nThe countries to select can also be configured with `blacklistedCountries` or\n`whitelistedCountries`. It accepts either ISO (alpha-2) or E164\n(prefix with '+') formatted country code. Invalid country code will be ignored.\n`whitelistedCountries` and `blacklistedCountries` cannot be specified at the\nsame time.\n\nThe following options are currently supported. Any other\nparameters will be ignored.\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,\n      recaptchaParameters: {\n        type: 'image', // 'audio'\n        size: 'normal', // 'invisible' or 'compact'\n        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.\n      },\n      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).\n      // For prefilling the national number, set defaultNationNumber.\n      // This will only be observed if only phone Auth provider is used since\n      // for multiple providers, the NASCAR screen will always render first\n      // with a 'sign in with phone number' button.\n      defaultNationalNumber: '1234567890',\n      // You can also pass the full phone number string instead of the\n      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,\n      // the first country ID that matches the country code will be used to\n      // populate the country selector. So for countries that share the same\n      // country code, the selected country may not be the expected one.\n      // In that case, pass the 'defaultCountry' instead to ensure the exact\n      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'\n      // will always have higher priority than 'loginHint' which will be ignored\n      // in their favor. In this case, the default country will be 'GB' even\n      // though 'loginHint' specified the country code as '+1'.\n      loginHint: '+11234567890',\n      // You can provide a 'whitelistedCountries' or 'blacklistedCountries' for\n      // countries to select. It takes an array of either ISO (alpha-2) or\n      // E164 (prefix with '+') formatted country codes. If 'defaultCountry' is\n      // not whitelisted or is blacklisted, the default country will be set to\n      // the first country available (alphabetical order). Notice that\n      // 'whitelistedCountries' and 'blacklistedCountries' cannot be specified\n      // at the same time.\n      whitelistedCountries: ['US', '+44']\n    }\n  ]\n});\n```\n\n### Configure Anonymous Provider\n\nThe `AnonymousAuthProvider` can be enabled to let users continue as a guest. If\na user is already signed in anonymously, clicking this sign-in option will keep\nthe same current anonymous user. In addition, when auto-upgrade for anonymous\nusers is enabled in addition to this option and a user is already signed in\nanonymously, clicking this sign-in option will also keep the same current\nanonymous user.\n\n```javascript\nui.start('#firebaseui-auth-container', {\n  signInOptions: [\n    {\n      provider: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID\n    }\n  ]\n});\n```\n\n### Sign In Flows\n\nTwo sign in flows are available:\n\n- `redirect`, the default, will perform a full page redirect to the sign-in page\n  of the provider (Google, Facebook...). This is recommended for mobile apps.\n- The `popup` flow will open a popup to the sign-in page of the provider. If the\n  popup is blocked by the browser, it will fall back to a full page redirect.\n\n### Available callbacks\n\n#### `signInSuccessWithAuthResult(authResult, redirectUrl)`\n\nThe `signInSuccessWithAuthResult` callback is invoked when user signs in\nsuccessfully.\nThe authResult provided here is a `firebaseui.auth.AuthResult` object, which\nincludes the current logged in user, the credential used to sign in the user,\nadditional user info indicating if the user is new or existing and operation\ntype like 'signIn' or 'link'. This callback will replace `signInSuccess` in\nfuture.\n\n**Parameters:**\n\n|Name         |Type                          | Optional|Description                                                                                                                                                              |\n|-------------|------------------------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n|`authResult`|`firebaseui.auth.AuthResult`   |No       |The AuthResult of successful sign-in operation. The AuthResult object has same signature as `firebase.auth.UserCredential`.|\n|`redirectUrl`|`string`                      |Yes      |The URL where the user is redirected after the callback finishes. It will only be given if you [overwrite the sign-in success URL](#overwriting-the-sign-in-success-url).|\n\n**Should return: `boolean`**\n\nIf the callback returns `true`, then the page is automatically redirected\ndepending on the case:\n\n- If no `signInSuccessUrl` parameter was given in the URL (See:\n  [Overwriting the sign-in success URL](#overwriting-the-sign-in-success-url))\n  then the default `signInSuccessUrl` in config is used.\n- If the value is provided in the URL, that value will be used instead of the\n  static `signInSuccessUrl` in config.\n\nIf the callback returns `false` or nothing, the page is not automatically\nredirected.\n\n#### `signInSuccess(currentUser, credential, redirectUrl)`\n\nThis callback will be deprecated and will be replaced by\n`signInSuccessWithAuthResult` which takes `firebaseui.auth.AuthResult`.\n\n**Parameters:**\n\n|Name         |Type                          | Optional|Description                                                                                                                                                              |\n|-------------|------------------------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n|`currentUser`|`firebase.User`               |No       |The logged in user.                                                                                                                                                      |\n|`credential` |`firebase.auth.AuthCredential`|Yes      |The credential used to sign in the user.                                                                                                                                  |\n|`redirectUrl`|`string`                      |Yes      |The URL where the user is redirected after the callback finishes. It will only be given if you [overwrite the sign-in success URL](#overwriting-the-sign-in-success-url).|\n\n**Should return: `boolean`**\n\nIf the callback returns `true`, then the page is automatically redirected\ndepending on the case:\n\n- If no `signInSuccessUrl` parameter was given in the URL (See:\n  [Overwriting the sign-in success URL](#overwriting-the-sign-in-success-url))\n  then the default `signInSuccessUrl` in config is used.\n- If the value is provided in the URL, that value will be used instead of the\n  static `signInSuccessUrl` in config.\n\nIf the callback returns `false` or nothing, the page is not automatically\nredirected.\n\n#### `signInFailure(error)`\n\nThe `signInFailure` callback is provided to handle any unrecoverable error\nencountered during the sign-in process.\nThe error provided here is a `firebaseui.auth.AuthUIError` error with the\nfollowing properties.\n\n**firebaseui.auth.AuthUIError properties:**\n\n|Name     |Type            |Optional |Description            |\n|---------|----------------|---------|-----------------------|\n|`code`   |`string`        |No       |The corresponding error code. Currently the only error code supported is `firebaseui/anonymous-upgrade-merge-conflict`   |\n|`credential` |`firebase.auth.AuthCredential`|Yes      |The existing non-anonymous user credential the user tried to sign in with.|\n\n**Should return: `Promise\u003cvoid\u003e|void`**\n\nFirebaseUI will wait for the returned promise to handle the reported error\nbefore clearing the UI. If no promise is returned, the UI will be cleared on\ncompletion. Even when this callback resolves, `signInSuccessWithAuthResult`\ncallback will not be triggered.\n\nThis callback is required when `autoUpgradeAnonymousUsers` is enabled.\n\n#### `uiShown()`\n\nThis callback is triggered the first time the widget UI is rendered. This is\nuseful for cases where the application should display a custom loader before\nFirebaseUI is displayed.\n\n### Example with all parameters used\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eSample FirebaseUI App\u003c/title\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-auth-compat.js\"\u003e\u003c/script\u003e\n    \u003c!-- *******************************************************************************************\n       * TODO(DEVELOPER): Paste the initialization snippet from:\n       * Firebase Console \u003e Overview \u003e Add Firebase to your web app. *\n       ***************************************************************************************** --\u003e\n    \u003cscript src=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js\"\u003e\u003c/script\u003e\n    \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css\" /\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      // FirebaseUI config.\n      var uiConfig = {\n        callbacks: {\n          signInSuccessWithAuthResult: function(authResult, redirectUrl) {\n            var user = authResult.user;\n            var credential = authResult.credential;\n            var isNewUser = authResult.additionalUserInfo.isNewUser;\n            var providerId = authResult.additionalUserInfo.providerId;\n            var operationType = authResult.operationType;\n            // Do something with the returned AuthResult.\n            // Return type determines whether we continue the redirect\n            // automatically or whether we leave that to developer to handle.\n            return true;\n          },\n          signInFailure: function(error) {\n            // Some unrecoverable error occurred during sign-in.\n            // Return a promise when error handling is completed and FirebaseUI\n            // will reset, clearing any UI. This commonly occurs for error code\n            // 'firebaseui/anonymous-upgrade-merge-conflict' when merge conflict\n            // occurs. Check below for more details on this.\n            return handleUIError(error);\n          },\n          uiShown: function() {\n            // The widget is rendered.\n            // Hide the loader.\n            document.getElementById('loader').style.display = 'none';\n          }\n        },\n        credentialHelper: firebaseui.auth.CredentialHelper.NONE,\n        // Query parameter name for mode.\n        queryParameterForWidgetMode: 'mode',\n        // Query parameter name for sign in success url.\n        queryParameterForSignInSuccessUrl: 'signInSuccessUrl',\n        // Will use popup for IDP Providers sign-in flow instead of the default, redirect.\n        signInFlow: 'popup',\n        signInSuccessUrl: '\u003curl-to-redirect-to-on-success\u003e',\n        signInOptions: [\n          // Leave the lines as is for the providers you want to offer your users.\n          firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n          firebase.auth.FacebookAuthProvider.PROVIDER_ID,\n          firebase.auth.TwitterAuthProvider.PROVIDER_ID,\n          {\n            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,\n            // Whether the display name should be displayed in the Sign Up page.\n            requireDisplayName: true\n          },\n          {\n            provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,\n            // Invisible reCAPTCHA with image challenge and bottom left badge.\n            recaptchaParameters: {\n              type: 'image',\n              size: 'invisible',\n              badge: 'bottomleft'\n            }\n          },\n          firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID\n        ],\n        // Set to true if you only have a single federated provider like\n        // firebase.auth.GoogleAuthProvider.PROVIDER_ID and you would like to\n        // immediately redirect to the provider's site instead of showing a\n        // 'Sign in with Provider' button first. In order for this to take\n        // effect, the signInFlow option must also be set to 'redirect'.\n        immediateFederatedRedirect: false,\n        // tosUrl and privacyPolicyUrl accept either url string or a callback\n        // function.\n        // Terms of service url/callback.\n        tosUrl: '\u003cyour-tos-url\u003e',\n        // Privacy policy url/callback.\n        privacyPolicyUrl: function() {\n          window.location.assign('\u003cyour-privacy-policy-url\u003e');\n        }\n      };\n\n      var ui = new firebaseui.auth.AuthUI(firebase.auth());\n      // The start method will wait until the DOM is loaded.\n      ui.start('#firebaseui-auth-container', uiConfig);\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- The surrounding HTML is left untouched by FirebaseUI.\n         Your app may use that space for branding, controls and other customizations.--\u003e\n    \u003ch1\u003eWelcome to My Awesome App\u003c/h1\u003e\n    \u003cdiv id=\"firebaseui-auth-container\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"loader\"\u003eLoading...\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Upgrading anonymous users\n\n#### Enabling anonymous user upgrade\n\nWhen an anonymous user signs in or signs up with a permanent account, you want\nto be sure the user can continue with what they were doing before signing up.\nFor example, an anonymous user might have items in their shopping cart.\nAt check-out, you prompt the user to sign in or sign up. After the user is\nsigned in, the user's shopping cart should contain any items the user added\nwhile signed in anonymously.\n\nTo support this behavior, FirebaseUI makes it easy to \"upgrade\" an anonymous\naccount to a permanent account. To do so, simply set `autoUpgradeAnonymousUsers`\nto `true` when you configure the sign-in UI (this option is disabled by\ndefault).\n\nFirebaseUI links the new credential with the anonymous account using Firebase\nAuth's `linkWithCredential` method:\n```javascript\nanonymousUser.linkWithCredential(permanentCredential);\n```\nThe user will retain the same `uid` at the end of the flow and all data keyed\non that identifier would still be associated with that same user.\n\nAnonymous user upgrade is also supported by email link sign-in in FirebaseUI.\nAn anonymous user triggering the email link option will, on return from clicking\nthe link, upgrade to an email link user.\nHowever, `forceSameDevice` must be set to `true` in the email `signInOption`.\nThis is to ensure that when the user clicks the link, it is opened on the same\ndevice/browser where the initial anonymous user exists.\n\n#### Handling anonymous user upgrade merge conflicts\n\nThere are cases when a user, initially signed in anonymously, tries to\nupgrade to an existing Firebase user. For example, a user may have signed up\nwith a Google credential on another device. When trying to upgrade to the\nexisting Google user, an error `auth/credential-already-in-use` will be thrown\nby Firebase Auth as an existing user cannot be linked to another existing user.\nNo two users can share the same credential. In that case, both user data\nhave to be merged before one user is discarded (typically the anonymous user).\nIn the case above, the anonymous user shopping cart will be copied locally,\nthe anonymous user will be deleted and then the user is signed in with the\npermanent credential. The anonymous user data in temporary storage will be\ncopied back to the non-anonymous user.\n\nFirebaseUI will trigger the `signInFailure` callback with an error code\n`firebaseui/anonymous-upgrade-merge-conflict` when the above occurs. The error\nobject will also contain the permanent credential.\nSign-in with the permanent credential should be triggered in the callback to\ncomplete sign-in.\nBefore sign-in can be completed via\n`auth.signInWithCredential(error.credential)`, the data of the anonymous user\nmust be copied and the anonymous user deleted. After sign-in completion, the\ndata has to be copied back to the non-anonymous user. An example below\nillustrates how this flow would work if user data is persisted using Firebase\nRealtime Database.\n\n**Example:**\n\n```javascript\n// Temp variable to hold the anonymous user data if needed.\nvar data = null;\n// Hold a reference to the anonymous current user.\nvar anonymousUser = firebase.auth().currentUser;\nui.start('#firebaseui-auth-container', {\n  // Whether to upgrade anonymous users should be explicitly provided.\n  // The user must already be signed in anonymously before FirebaseUI is\n  // rendered.\n  autoUpgradeAnonymousUsers: true,\n  signInSuccessUrl: '\u003curl-to-redirect-to-on-success\u003e',\n  signInOptions: [\n    firebase.auth.GoogleAuthProvider.PROVIDER_ID,\n    firebase.auth.FacebookAuthProvider.PROVIDER_ID,\n    firebase.auth.EmailAuthProvider.PROVIDER_ID,\n    firebase.auth.PhoneAuthProvider.PROVIDER_ID\n  ],\n  callbacks: {\n    signInSuccessWithAuthResult: function(authResult, redirectUrl) {\n      // Process result. This will not trigger on merge conflicts.\n      // On success redirect to signInSuccessUrl.\n      return true;\n    },\n    // signInFailure callback must be provided to handle merge conflicts which\n    // occur when an existing credential is linked to an anonymous user.\n    signInFailure: function(error) {\n      // For merge conflicts, the error.code will be\n      // 'firebaseui/anonymous-upgrade-merge-conflict'.\n      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {\n        return Promise.resolve();\n      }\n      // The credential the user tried to sign in with.\n      var cred = error.credential;\n      // If using Firebase Realtime Database. The anonymous user data has to be\n      // copied to the non-anonymous user.\n      var app = firebase.app();\n      // Save anonymous user data first.\n      return app.database().ref('users/' + firebase.auth().currentUser.uid)\n          .once('value')\n          .then(function(snapshot) {\n            data = snapshot.val();\n            // This will trigger onAuthStateChanged listener which\n            // could trigger a redirect to another page.\n            // Ensure the upgrade flow is not interrupted by that callback\n            // and that this is given enough time to complete before\n            // redirection.\n            return firebase.auth().signInWithCredential(cred);\n          })\n          .then(function(user) {\n            // Original Anonymous Auth instance now has the new user.\n            return app.database().ref('users/' + user.uid).set(data);\n          })\n          .then(function() {\n            // Delete anonymnous user.\n            return anonymousUser.delete();\n          }).then(function() {\n            // Clear data in case a new user signs in, and the state change\n            // triggers.\n            data = null;\n            // FirebaseUI will reset and the UI cleared when this promise\n            // resolves.\n            // signInSuccessWithAuthResult will not run. Successful sign-in\n            // logic has to be run explicitly.\n            window.location.assign('\u003curl-to-redirect-to-on-success\u003e');\n          });\n\n    }\n  }\n});\n```\n\n### Multi-tenancy support\n\nFor [GCIP](https://cloud.google.com/identity-platform) customers, you can build\na tenant-specific sign-in page with FirebaseUI. Make sure you've enabled\nmulti-tenancy for your project and configured your tenants. See the\n[Multi-tenancy quickstart](https://cloud.google.com/identity-platform/docs/multi-tenancy-quickstart)\nto learn how.\n\nThis feature requires [firebase](https://www.npmjs.com/package/firebase)\nversion 6.6.0 or higher.\n\n\nTo use FirebaseUI with multi-tenancy, you need to set the tenant ID on the\nAuth instance being passed to FirebaseUI before calling `ui.start()`.\n\n```javascript\n// The Firebase Auth instance.\nvar auth = firebase.auth();\n// Initialize FirebaseUI.\nvar ui = new firebaseui.auth.AuthUI(auth);\n// Set the tenant ID on Auth instance.\nauth.tenantId = selectedTenantId;\n// Start the sign-in flow in selected tenant.\n// All sign-in attempts will now use this tenant ID.\nui.start('#firebaseui-auth-container', selectedTenantConfig);\n```\n\nFirebaseUI only handles the sign-in flows for you, you will still need to build\nyour own UI to let the end users select a tenant to sign in with.\nYou can refer to the example in this\n[guide](https://cloud.google.com/identity-platform/docs/multi-tenancy-ui).\n\nThere is also a\n[quickstart](https://cloud.google.com/identity-platform/docs/multi-tenancy-quickstart)\napp available to demonstrate how to build a single sign-in page with the\nFirebaseUI for two tenants which have different sets of identity providers\nenabled.\n\n\n## Customizing FirebaseUI for authentication\n\nCurrently, FirebaseUI does not offer customization out of the box. However, the\nHTML around the widget is not affected by it so you can display everything you\nwant around the widget container.\n\n## Advanced\n\n### FirebaseUI widget modes\n\nUpon initialization, FirebaseUI will look for the `mode` parameter in the URL.\nDepending on the value of this parameter, it will trigger a specific mode. When\nno `mode` parameter is found, it will default to the sign-in mode.\n\nYou can change the name of this parameter with the `queryParameterForWidgetMode`\nconfiguration parameter.\n\n|Query parameter value|Description |\n|---------------------|------------|\n|`?mode=select`       |Sign-in mode|\n\n**Example:**\n\n    https://\u003curl-of-the-widget\u003e?mode=select\n\n### Overwriting the sign-in success URL\n\nYou can pass a query parameter to the widget's URL that will overwrite the URL\nthe user is redirected to after a successful sign-in. If you do so, you must set\nthe configuration `signInSuccessUrl` value (even if it will be overwritten).\nWhen passing the redirect URL this way, the `signInSuccessWithAuthResult`\ncallback will receive the value as the `redirectUrl` argument.\n\nYou **must include the mode explicitly** in the URL when using the\n`signInSuccessUrl` parameter, otherwise FirebaseUI will directly redirect to the\nURL specified.\n\nYou can change the name of this parameter with the\n`queryParameterForSignInSuccessUrl` configuration parameter.\n\n**Example:**\n\n`https://\u003curl-of-the-widget\u003e?mode=select\u0026signInSuccessUrl=signedIn.html` will\nredirect the user to `https://\u003curl-of-the-widget\u003e/signedIn.html` after a\nsuccessful sign-in flow.\n\n## Developer Setup\n\n### Dependencies\n\nTo set up a development environment to build FirebaseUI from source, you must\nhave the following installed:\n- Node.js (\u003e= 6.0.0)\n- npm (should be included with Node.js)\n- Java SE Runtime Environment 8\n\nIn order to run the demo and tests, you must also have:\n- Python (2.7)\n\nDownload the FirebaseUI source and its dependencies with:\n\n```bash\ngit clone https://github.com/firebase/firebaseui-web.git\ncd firebaseui-web\nnpm install\n```\n\n### Building FirebaseUI\n\nTo build the library, run:\n```bash\nnpm run build\n```\n\nThis will create output files in the `dist/` folder.\n\nTo build a localized JavaScript binary, run:\n```bash\nnpm run build build-js-{LANGUAGE_CODE}\n```\nwhere `{LANGUAGE_CODE}` is replaced by the\n[code of the language you want](LANGUAGES.md). For example, the French binary\ncan be built with `npm run build build-js-fr`. This will create a binary\n`firebaseui__fr.js` in the `dist/` folder.\n\nBuild names for language codes with underscores, eg. `zh_tw`, `zh_cn`, `pt_pt`\nwill be mapped to `zh-TW`, `xh-CN`, `pt-PT`. The underscore will be replaced by\na hyphen symbol and the subsequent characters will be capitalized.\n\n```bash\nnpm run build build-js-zh-TW\n```\n\nThis will create a binary `firebaseui__zh_tw.js` in the `dist/` folder.\n\nTo build a localized npm FirebaseUI module, run:\n\n```bash\nnpm run build build-npm-{LANGUAGE_CODE}\n```\n\nMake sure all underscore symbols in the `LANGUAGE_CODE` are replaced with\ndashes.\nThis will generate `dist/npm__{LANGUAGE_CODE}.js`.\nYou can then import/require it:\n```javascript\nimport firebaseui from './npm__{LANGUAGE_CODE}';\n```\n\nBuild names for language codes with underscores, eg. `zh_tw`, `zh_cn`, `pt_pt`\nwill be mapped to `zh-TW`, `xh-CN`, `pt-PT`. The underscore will be replaced by\na hyphen symbol and the subsequent characters will be capitalized.\n\n```bash\nnpm run build build-npm-zh-TW\n```\n\nThis will create a binary `npm__zh_tw.js` in the `dist/` folder.\n\nTo build a localized ES module of FirebaseUI, run:\n\n```bash\nnpm run build build-esm-{LANGUAGE_CODE}\n```\n\nMake sure all underscore symbols in the `LANGUAGE_CODE` are replaced with\ndashes.\nThis will generate `dist/esm__{LANGUAGE_CODE}.js`.\nYou can then import/require it:\n```javascript\nimport firebaseui from './esm__{LANGUAGE_CODE}';\n```\n\nBuild names for language codes with underscores, eg. `zh_tw`, `zh_cn`, `pt_pt`\nwill be mapped to `zh-TW`, `xh-CN`, `pt-PT`. The underscore will be replaced by\na hyphen symbol and the subsequent characters will be capitalized.\n\n```bash\nnpm run build build-esm-zh-TW\n```\n\nThis will create a binary `esm__zh_tw.js` in the `dist/` folder.\n\n### Running the demo app\n\nTo run the demo app, you must have a Firebase project set up on the\n[Firebase Console](https://firebase.google.com/console). Copy\n`demo/public/sample-config.js` to `demo/public/config.js`:\n\n```bash\ncp demo/public/sample-config.js demo/public/config.js\n```\n\nCopy the data from the \"Add Firebase to your web app\" flow in Firebase Console.\nNext, run\n\n```bash\nnpm run demo\n```\n\nThis will start a local server serving a FirebaseUI demo app with all local\nchanges. More details can be found in the [demo app folder](demo/), covering\nhow to configure the app to be deployed on a Firebase Hosting instance.\n\n### Running unit tests.\n\nAll unit tests can be run on the command line (via PhantomJS) with:\n\n```bash\nnpm test\n```\n\nAlternatively, the unit tests can be run manually by running\n\n```bash\nnpm run serve\n```\n\nThen, all unit tests can be run at: http://localhost:4000/buildtools/all_tests.html\nYou can also run tests individually by accessing each HTML file under\n`generated/tests`, for example: http://localhost:4000/generated/tests/javascript/widgets/authui_test.html\n\n### Run tests using SauceLabs\n\n*You need a [SauceLabs](https://saucelabs.com/) account to run tests on\nSauceLabs.*\n\nGo to your SauceLab account, under \"My Account\", and copy paste the access key.\nNow export the following variables, *in two Terminal windows*:\n\n```bash\nexport SAUCE_USERNAME=\u003cyour username\u003e\nexport SAUCE_ACCESS_KEY=\u003cthe copy pasted access key\u003e\n```\n\n Then, in one Terminal window, start SauceConnect:\n\n ```bash\n./buildtools/sauce_connect.sh\n```\n\nTake note of the \"Tunnel Identifier\" value logged in the terminal,at the top. In\nthe other terminal that has the exported variables, run the tests:\n\n```bash\nnpm test -- --saucelabs --tunnelIdentifier=\u003cthe tunnel identifier\u003e\n```\n\n## IAP External Identities Support with FirebaseUI\n\nYou can use FirebaseUI to build the authentication page to use external\nidentities with\n[Google Cloud IAP](https://cloud.google.com/iap/docs/external-identities).\nThe documentation can be found [here](firebaseuihandler/README.md).\n\n## Cordova Setup\n\n### Introduction\n\nFirebaseUI sign-in widget supports Cordova applications. This includes\nemail/password and all OAuth providers (Google, Facebook, Twitter and GitHub).\nPhone authentication is not supported due to the limitation in the underlying\nFirebase core SDK.\nEmail link authentication is not yet supported due to the inability to detect\nthe incoming link when the user clicks it to complete sign-in.\n\n### Available providers\n\n|Provider          |Value                                           |\n|------------------|------------------------------------------------|\n|Google            |`firebase.auth.GoogleAuthProvider.PROVIDER_ID`  |\n|Facebook          |`firebase.auth.FacebookAuthProvider.PROVIDER_ID`|\n|Twitter           |`firebase.auth.TwitterAuthProvider.PROVIDER_ID` |\n|Github            |`firebase.auth.GithubAuthProvider.PROVIDER_ID`  |\n|Email and password|`firebase.auth.EmailAuthProvider.PROVIDER_ID`   |\n|Anonymous         |`firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID`|\n|Microsoft         |`microsoft.com`                                |\n|Yahoo             |`yahoo.com`                                     |\n|SAML (GCIP only)  |`saml.*********`                               |\n|OIDC (GCIP only)  |`oidc.*********`                               |\n\n### Setup and Usage\n\nIn order to integrate FirebaseUI with your Cordova application, you need to\nfollow these steps:\n\n- Install the necessary Cordova plugins, make the necessary Firebase Console\n  changes and update your config.xml file as documented in\n  [OAuth Sign-In for Cordova](https://firebase.google.com/docs/auth/web/cordova)\n- After you have successfully configured your application, you can use\n  FirebaseUI in your Cordova application just like any other traditional browser\n  applications.\n\nKeep in mind the following while you set up the app:\n- Only `redirect` `signInFlow` is supported as Firebase Auth does not support\n  `popup` mode for Cordova.\n- `firebase.auth.PhoneAuthProvider.PROVIDER_ID` is not currently supported.\n- If you are providing a `Content-Security-Policy` make sure you add the\n  appropriate exceptions for FirebaseUI resources (`style-src`, `media-src`,\n  `img-src`, `script-src`, etc.) and underlying Firebase JS SDK.\n\n## React DOM Setup\n\nIn React DOM applications you can use the [FirebaseUI Web React Wrapper](https://github.com/firebase/firebaseui-web-react).\n\n## Angular Setup\n\nIn Angular applications you can use this [FirebaseUI Web Angular Wrapper](https://github.com/RaphaelJenni/firebaseui-angular) from the community.\n\n## Known issues\n\n### Firebase Auth does not work in Safari private browsing\n\nWhen a user has enabled the private browsing mode in Safari, the web storage is\ndisabled. This currently results in an error being thrown upon Firebase Auth\ninitialization. Therefore, when following the snippets above, FirebaseUI will\nnever get initialized and no UI will be displayed.\n\n### Tips for Single Page apps (`UI Widget is already rendered on the page`\nwarning)\n\nWhen re-rendering the FirebaseUI Auth widget (for instance after signing in a\nuser, signing them out and trying to sign them in again), it will sometimes log a\nwarning:\n\n\u003e UI Widget is already rendered on the page and is pending some user\n\u003e interaction. Only one widget instance can be rendered per page. The previous\n\u003e instance has been automatically reset.\n\nThis happens when the UI widget was in a pending state, i.e. the user was in the\nmiddle of performing a sign-in flow. You should generally avoid re-rendering the\nwidget in the middle of an action, but if you do, to avoid the warning, you\nshould use the `reset()` method before re-rendering the widget.\n\n### Tips for initializing a new UI instance with the same Auth instance\n\nWhen trying to initialize a new UI widget with the same Auth instance, you will\nget an `app/duplicate-app` error. In general, you should keep a reference to\nthe AuthUI instance and instead call `reset()` and then `start(...)` again to\nre-render the widget.\n\nIf you don't keep a reference to that AuthUI instance, you can get the reference\nby calling `firebaseui.auth.AuthUI.getInstance(appId)` where `appId` is the same\nas the optional one used to initialize the AuthUI instance. If none was provided\njust call `firebaseui.auth.AuthUI.getInstance()`.\n\nThis is the recommended way but you also have the option to delete the AuthUI\ninstance by calling `ui.delete()` which returns a promise that resolves on\nsuccessful deletion. You can then initialize a new UI instance with the same\nAuth instance without getting the `app/duplicate-app` error. At any time, you\ncan only have one AuthUI instance with the same `appId` or the same Auth\ninstance.\n\n\n### FirebaseUI is broken in IE11 when deployed on a local server accessed\nthrough `localhost` (but works when deployed on a remote server)\n\nSeveral developers reported issues with IE11 when testing the widget integration\non a server deployed locally, accessing the application through a `localhost`\naddress. However, it doesn't impact applications deployed on a server (as you\ncan verify in the [demo app](https://fir-ui-demo-84a6c.firebaseapp.com/)).\n\n## Release Notes\n\n**Latest**: https://github.com/firebase/firebaseui-web/releases/latest\n\n**For v1.0.0 and superior:** https://github.com/firebase/firebaseui-web/releases\n\n### 6.0.0\n\nFirebaseUI-web v6.0.0 is intended to be used alongside Firebase JS SDK v9 or v10 [compat](https://firebase.google.com/docs/web/modular-upgrade#about_the_namespaced_compat_libraries).\n\nIf using the CDN, change your Firebase imports to:\n\n```html\n\u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://www.gstatic.com/firebasejs/10.0.0/firebase-auth-compat.js\"\u003e\u003c/script\u003e\n```\n\nIf NPM:\n\n```ts\nimport firebase from 'firebase/compat/app';\nimport 'firebase/compat/auth';\n```\n\n[See the Firebase upgrade guide for more information.](https://firebase.google.com/docs/web/modular-upgrade)\n\n### 5.0.0\n\n`accountchooser.com` has been operating in \"universal opt-out\" mode and was\nshutdown on July 2021. FirebaseUI-web has stopped supporting this credential\nhelper and since version v5.0.0, all related configurations and enums have been\nremoved.\n\n- If you are using `firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM`,\n  you need to switch to `firebaseui.auth.CredentialHelper.NONE` or\n  `firebaseui.auth.CredentialHelper.GOOGLE_YOLO`. Follow the instruction on\n  [one-tap sign-up](#one-tap-sign-up) when switching to the latter.\n- If you are configuring `acUiConfig` in the UI configurations, this is no\n  longer supported and should not be used.\n- `firebaseui.auth.FederatedSignInOption#authMethod` is no longer required to\n  be provided by the latest\n  [one-tap API](https://developers.google.com/identity/one-tap/web/reference/js-reference).\n\n### 0.5.0\n\nSee the milestone [0.5.0](https://github.com/firebase/firebaseui-web/milestone/1)\nfor the issues covered in this release. Below is a summary of the most important\nones:\n\n- FirebaseUI now supports **Single Page Application**: a `reset` method was\n  added to allow to dispose of the widget. When the user leaves a page where the\n  FirebaseUI widget was rendered (for instance in the `componentWillUnmount`\n  method of a React component), call the `reset` method of the\n  `firebaseui.auth.AuthUI` instance you created. Also, call the `reset` method\n  before rendering again the widget if one has already been rendered on the\n  page. Please refer to the [demo app](demo/) for guidance on how to use\n  FirebaseUI in a Single Page Application context.\n- **Custom scopes** can now be added for each provider. See\n  [Configure OAuth providers](configure-oauth-providers).\n- Several issues, different but related to the `displayName` not being present\n  after sign up with email and password, have been fixed.\n- A new config parameter has been added: `signInFlow`. It allows to specify\n  whether the Identity Providers sign in flows should be done through `redirect`\n  (the default) or `popup`. See [Sign In Flows](sign-in-flows).\n","funding_links":[],"categories":["JavaScript","开发工具与框架集成","웹","TypeScript"],"sub_categories":["Web 相关"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirebase%2Ffirebaseui-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirebase%2Ffirebaseui-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirebase%2Ffirebaseui-web/lists"}