FirebaseUI supports the following configuration parameters.
Name Required Description autoUpgradeAnonymousUsers No Whether to automatically upgrade existing anonymous users on sign-in/sign-up. See Upgrading anonymous users.false
When set to true
, signInFailure
callback is required to be provided to handle merge conflicts. callbacks No An object of developers' callbacks after specific events.
{}
credentialHelper No The Credential Helper to use. See Credential Helper.
firebaseui.auth.CredentialHelper.NONE
queryParameterForSignInSuccessUrl No The redirect URL parameter name for the sign-in success URL. See Overwriting the sign-in success URL.
"signInSuccessUrl"
queryParameterForWidgetMode No The redirect URL parameter name for the “mode” of the Widget. See FirebaseUI widget modes.
"mode"
signInFlow No The sign-in flow to use for IDP providers: redirect
or popup
.
"redirect"
immediateFederatedRedirect No A boolean which determines whether to immediately redirect to the provider's site or instead show the default 'Sign in with Provider' button when there is only a single federated provider in signInOptions
. In order for this option to take effect, the signInOptions
must only hold a single federated provider (like 'google.com') and signInFlow must be set to 'redirect'. signInOptions Yes The list of providers enabled for signing into your app. The order you specify them will be the order they are displayed on the sign-in provider selection screen. signInSuccessUrl No The URL where to redirect the user after a successful sign-in. Required when the signInSuccessWithAuthResult
callback is not used or when it returns true
. tosUrl Yes The URL of the Terms of Service page or a callback function to be invoked when Terms of Service link is clicked. privacyPolicyUrl Yes The URL of the Privacy Policy page or a callback function to be invoked when Privacy Policy link is clicked. adminRestrictedOperation No This setting is only applicable to "Google Cloud Identity Platform" projects. Learn more about GCIP. The object for configuring adminRestrictedOperation
options, contains 3 fields: status(boolean)
: This flag should mirror the project user actions ("Enable create") settings. When sign-up is disabled in the project settings, this should be set to true
. Setting this to true
without disabling sign-up in the project settings will not have any effect. For GCIP projects, this is done by going to the "Settings" page in the "Identity Platform" section in the Cloud Console. Under the "USERS" tab, go to "User actions". Uncheck "Enable create (sign-up)" and click "SAVE". This does not enforce the policy but is rather useful for providing additional instructions to the end user when a user tries to create a new user account and the Auth server blocks the operation. This boolean works on all providers (federated, email/password, email link and phone number). adminEmail(string|undefined)
: The optional site administrator email to contact for access when sign up is disabled, for example: `admin@example.com.
helpLink(string|undefined): The optional help link to provide information on how to get access to the site when sign up is disabled. For example:
https://www.example.com/trouble_signing_in`. Credential Helper
The role of a credential helper is to help your users sign into your website. When one is enabled, your users will be prompted with email addresses and usernames they have saved from your app or other applications. FirebaseUI supports the one-tap sign-up credential helper. accountchooser.com
is no longer supported.
One-tap sign-up provides seamless authentication flows to your users with Google's one tap sign-up and automatic sign-in APIs. With one tap sign-up, users are prompted to create an account with a dialog that's inline with FirebaseUI NASCAR screen. With just one tap, they get a secure, token-based, passwordless account with your service, protected by their Google Account. As the process is frictionless, users are much more likely to register. Returning users are signed in automatically, even when they switch devices or platforms, or after their session expires. One-tap sign-up integrates with FirebaseUI and if you request Google OAuth scopes, you will still get back the expected Google OAuth access token even if the user goes through the one-tap flow. However, in that case 'redirect' flow is always used even when 'popup' is specified. In addition, if you choose to force prompt for Google sign-in, one-tap auto sign-in will be automatically disabled. One-tap is an additive feature and is only supported in the latest evergreen modern browser environments. For more information on how to configure one-tap sign-up, refer to the one-tap get started guide.
The following example shows how to configure one-tap sign-up with FirebaseUI. Along with the corresponding one-tap credentialHelper
, the Google OAuth clientId
has to be provided with the Firebase Google provider:
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
// Google provider must be enabled in Firebase Console to support one-tap
// sign-up.
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
// Required to enable ID token credentials for this provider.
// This can be obtained from the Credentials page of the Google APIs
// console. Use the same OAuth client ID used for the Google provider
// configured with GCIP or Firebase Auth.
clientId: 'xxxxxxxxxxxxxxxxx.apps.googleusercontent.com'
},
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
],
// Required to enable one-tap sign-up credential helper.
credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
});
// Auto sign-in for returning users is enabled by default except when prompt is
// not 'none' in the Google provider custom parameters. To manually disable:
ui.disableAutoSignIn();
Auto sign-in for returning users can be disabled by calling ui.disableAutoSignIn()
. This may be needed if the FirebaseUI sign-in page is being rendered after the user signs out.
To see FirebaseUI in action with one-tap sign-up, check out the FirebaseUI demo app.
Credential Helper Value One-tap sign-upfirebaseui.auth.CredentialHelper.GOOGLE_YOLO
None (disable) firebaseui.auth.CredentialHelper.NONE
Available providers Provider Value Google firebase.auth.GoogleAuthProvider.PROVIDER_ID
Facebook firebase.auth.FacebookAuthProvider.PROVIDER_ID
Twitter firebase.auth.TwitterAuthProvider.PROVIDER_ID
Github firebase.auth.GithubAuthProvider.PROVIDER_ID
Email and password firebase.auth.EmailAuthProvider.PROVIDER_ID
Phone number firebase.auth.PhoneAuthProvider.PROVIDER_ID
Anonymous firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
Apple apple.com
Microsoft microsoft.com
Yahoo yahoo.com
SAML (GCIP only) saml.*********
OIDC (GCIP only) oidc.*********
Configure OAuth providers
To specify custom scopes, or custom OAuth parameters per provider, you can pass an object instead of just the provider value:
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
scopes: [
'https://www.googleapis.com/auth/contacts.readonly'
],
customParameters: {
// Forces account selection even when one account
// is available.
prompt: 'select_account'
}
},
{
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
],
customParameters: {
// Forces password re-entry.
auth_type: 'reauthenticate'
}
},
// Twitter does not support scopes.
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
// Other providers don't need to be given as object.
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
});
Generic OAuth provider
You can let your users authenticate with FirebaseUI using OAuth providers like Apple, Microsoft Azure Active Directory and Yahoo by integrating generic OAuth Login into your app.
You just need to pass the provider ID in signInOptions
, FirebaseUI provides the default configurations for the sign in button(button color, icon and display name):
ui.start('#firebaseui-auth-container', {
signInOptions: [
'apple.com',
'microsoft.com',
'yahoo.com',
]
});
You can also override these default configurations with your own custom ones. Generic OAuth providers' signInOptions
support the following configuration parameters.
microsoft.com
. providerName No The provider name displayed to end users (sign in button/linking prompt), eg. "Microsoft" Default: provider ID
fullLabel No The full label of the button. Instead of "Sign in with $providerName", this button label will be used. Default: Sign in with $providerName
buttonColor No The color of sign in button. The css of the button can be overwritten with the attribute/value in the HTML element: data-provider-id="providerId"
iconUrl No The URL of the Identity Provider's icon. This will be displayed on the provider's sign-in button, etc. scopes No The list of additional OAuth 2.0 scopes beyond basic profile that you want to request from the authentication provider. customParameters No The list of additional custom OAuth parameters that you want to send with the OAuth request. loginHintKey No The key of the custom parameter, with which the login hint can be passed to the provider. This is useful in case a user previously signs up with an IdP like Microsoft and then tries to sign in with email using the same Microsoft email. FirebaseUI can then ask the user to sign in with that email to the already registered account with Microsoft. For Microsoft and Yahoo, this field is login_hint
.
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: 'microsoft.com',
providerName: 'Microsoft',
// To override the full label of the button.
// fullLabel: 'Login with Microsoft',
buttonColor: '#2F2F2F',
iconUrl: '<icon-url-of-sign-in-button>',
loginHintKey: 'login_hint',
scopes: [
'mail.read'
],
customParameters: {
prompt: 'consent'
}
}
]
});
OpenID Connect (OIDC) providers (GCIP only)
For GCIP customers, you can enable your app for OpenID Connect (OIDC) authentication with FirebaseUI.
OIDC providers' signInOptions
support the following configuration parameters.
oidc.myProvider
. providerName No The provider name displayed to end users (sign in button/linking prompt). Default: provider ID
fullLabel No The full label of the button. Instead of "Sign in with $providerName", this button label will be used. Default: Sign in with $providerName
buttonColor Yes The color of sign in button. The css of the button can be overwritten with attribute/value in the HTML element: data-provider-id="providerId"
iconUrl Yes The URL of the Identity Provider's icon. This will be displayed on the provider's sign-in button, etc. customParameters No The list of additional custom parameters that the OIDC provider supports.
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: 'oidc.myProvider',
providerName: 'MyOIDCProvider',
// To override the full label of the button.
// fullLabel: 'Employee Login',
buttonColor: '#2F2F2F',
iconUrl: '<icon-url-of-sign-in-button>',
customParameters: {
OIDCSupportedParameter: 'value'
}
}
]
});
SAML providers (GCIP only)
For GCIP customers, you can enable your app for SAML authentication with FirebaseUI.
SAML providers' signInOptions
support the following configuration parameters.
saml.myProvider
. providerName No The provider name displayed to end users (sign in button/linking prompt). Default: provider ID
fullLabel No The full label of the button. Instead of "Sign in with $providerName", this button label will be used. Default: Sign in with $providerName
buttonColor Yes The color of sign in button. The css of the button can be overwritten with attribute/value in the HTML element: data-provider-id="providerId"
iconUrl Yes The URL of the Identity Provider's icon. This will be displayed on the provider's sign-in button, etc.
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: 'saml.myProvider',
providerName: 'MySAMLProvider',
// To override the full label of the button.
// fullLabel: 'Constractor Portal',
buttonColor: '#2F2F2F',
iconUrl: '<icon-url-of-sign-in-button>'
}
]
});
Configure Email Provider
You can configure either email/password or email/link sign-in with FirebaseUI by providing the relevant object in the configuration signInOptions
array.
You can disable new user sign up with email providers by setting the flag disableSignUp.status
to true
. This will display an error message when new users attempt to sign up.
Note that this flag will only disable sign up from the UI and will not prevent sign up via REST API. It is highly recommended that Identity Platform projects enforce this policy via one of these 2 mechanisms:
beforeCreate
trigger to disable sign up for email providers.Enable create (sign-up)
checkbox. Though for this setting, sign up for all providers will be disabled.firebase.auth.EmailAuthProvider.PROVIDER_ID
. requireDisplayName boolean No Defines whether to require the user to provide a display name during email and password sign up. Note: this has no effect when using the firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
.
true
signInMethod string No Defines whether to use email and password or email link authentication. This should be firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD
for email and password sign-in, firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
for email link authentication.
firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD
forceSameDevice boolean No Whether to force same device flow. If false, opening the link on a different device will display a message instructing the user to open the link on the same device or browser. This should be true when used with anonymous user upgrade flows. This is only relevant to email link sign-in. Default: false
emailLinkSignIn function No Defines the optional callback function to return firebase.auth.ActionCodeSettings
configuration to use when sending the link. This provides the ability to specify how the link can be handled, custom dynamic link, additional state in the deep link, etc. When not provided, the current URL is used and a web only flow is triggered. This is only relevant to email link sign-in. disableSignUp firebaseui.auth.DisableSignUpConfig
No The object for configuring disableSignUp
options, contains 3 fields: status(boolean)
: Whether disable user from signing up with email providers (email/password or email link). adminEmail(string|undefined)
: The optional site administrator email to contact for access when sign up is disabled, for example: `admin@example.com.
helpLink(string|undefined): The optional help link to provide information on how to get access to the site when sign up is disabled. For example:
https://www.example.com/trouble_signing_in`. Email and Password
Email and password authentication is the default sign-in method for Email providers. The EmailAuthProvider
with email and password can be configured to require the user to enter a display name (defaults to true
).
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false
}
]
});
Email Link Authentication
FirebaseUI supports sign-in and sign-up with email links. Using email link sign-in with FirebaseUI comes with the following benefits:
The sample code below demonstrates how to configure email link sign-in with FirebaseUI. In this example, cross device flows are allowed and additional state is passed in the URL, as well as the ability to configure the link to open via mobile application too.
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
// Use email link authentication and do not require password.
// Note this setting affects new users only.
// For pre-existing users, they will still be prompted to provide their
// passwords on sign-in.
signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
// Allow the user the ability to complete sign-in cross device, including
// the mobile apps specified in the ActionCodeSettings object below.
forceSameDevice: false,
// Used to define the optional firebase.auth.ActionCodeSettings if
// additional state needs to be passed along request and whether to open
// the link in a mobile app if it is installed.
emailLinkSignIn: function() {
return {
// Additional state showPromo=1234 can be retrieved from URL on
// sign-in completion in signInSuccess callback by checking
// window.location.href.
// If you are using a fragment in the URL, additional FirebaseUI
// parameters will be appended to the query string component instead
// of the fragment.
// So for a url: https://www.example.com/#/signin
// The completion URL will take the form:
// https://www.example.com/?uid_sid=xyz&ui_sd=0#/signin
// This should be taken into account when using frameworks with "hash
// routing".
url: 'https://www.example.com/completeSignIn?showPromo=1234',
// Custom FDL domain.
dynamicLinkDomain: 'example.page.link',
// Always true for email link sign-in.
handleCodeInApp: true,
// Whether to handle link in iOS app if installed.
iOS: {
bundleId: 'com.example.ios'
},
// Whether to handle link in Android app if opened in an Android
// device.
android: {
packageName: 'com.example.android',
installApp: true,
minimumVersion: '12'
}
};
}
}
]
});
When rendering the sign-in UI conditionally (relevant for single page apps), use ui.isPendingRedirect()
to detect if the URL corresponds to a sign-in with email link and the UI needs to be rendered to complete sign-in. You can also just use firebase.auth().isSignInWithEmailLink(window.location.href).
// Is there an email link sign-in?
if (ui.isPendingRedirect()) {
ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
ui.start('#firebaseui-auth-container', uiConfig);
}
Additional state passed in the url
can be retrieved on sign-in completion via the signInSuccess callbacks.
If you are using a fragment in the URL, additional FirebaseUI parameters will be appended to the query string component instead of the fragment. So for a url https://www.example.com/#/signin
, the completion URL will take the form https://www.example.com/?uid_sid=xyz&ui_sd=0#/signin
. This should be taken into account when using frameworks with "hash routing".
// ...
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
// If a user signed in with email link, ?showPromo=1234 can be obtained from
// window.location.href.
// ...
return false;
}
FirebaseUI uses the history API to clear the URL from query parameters related to email link sign-in after the one-time code is processed. This prevents the user from re-triggering the sign-in completion flow again on page reload or if the user signs out and tries to sign in again in a single page application, etc.
When same device flows are not enforced, a user going through account linking flow (eg. user signing in with Facebook with an email that belongs to an existing email link user) opening the link on a different device would be given the choice to continue sign-in with email link without merging the Facebook credential or instructed to open the link on the same device where the flow was initiated to successfully merge both accounts.
You cannot use email/password and email/link sign-in at the same time. Only one mode can be configured at a time. However, if you previously signed up users with passwords. Switching to email/link will only apply to new users and existing password users will continue to be prompted for password on sign-in.
Configure Phone ProviderThe PhoneAuthProvider
can be configured with custom reCAPTCHA parameters whether reCAPTCHA is visible or invisible (defaults to normal
). Refer to the reCAPTCHA API docs for more details.
The default country to select in the phone number input can also be set. List of supported country codes. If unspecified, the phone number input will default to the United States (+1).
The countries to select can also be configured with blacklistedCountries
or whitelistedCountries
. It accepts either ISO (alpha-2) or E164 (prefix with '+') formatted country code. Invalid country code will be ignored. whitelistedCountries
and blacklistedCountries
cannot be specified at the same time.
The following options are currently supported. Any other parameters will be ignored.
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image', // 'audio'
size: 'normal', // 'invisible' or 'compact'
badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
},
defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
// For prefilling the national number, set defaultNationNumber.
// This will only be observed if only phone Auth provider is used since
// for multiple providers, the NASCAR screen will always render first
// with a 'sign in with phone number' button.
defaultNationalNumber: '1234567890',
// You can also pass the full phone number string instead of the
// 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
// the first country ID that matches the country code will be used to
// populate the country selector. So for countries that share the same
// country code, the selected country may not be the expected one.
// In that case, pass the 'defaultCountry' instead to ensure the exact
// country is selected. The 'defaultCountry' and 'defaultNationaNumber'
// will always have higher priority than 'loginHint' which will be ignored
// in their favor. In this case, the default country will be 'GB' even
// though 'loginHint' specified the country code as '+1'.
loginHint: '+11234567890',
// You can provide a 'whitelistedCountries' or 'blacklistedCountries' for
// countries to select. It takes an array of either ISO (alpha-2) or
// E164 (prefix with '+') formatted country codes. If 'defaultCountry' is
// not whitelisted or is blacklisted, the default country will be set to
// the first country available (alphabetical order). Notice that
// 'whitelistedCountries' and 'blacklistedCountries' cannot be specified
// at the same time.
whitelistedCountries: ['US', '+44']
}
]
});
Configure Anonymous Provider
The AnonymousAuthProvider
can be enabled to let users continue as a guest. If a user is already signed in anonymously, clicking this sign-in option will keep the same current anonymous user. In addition, when auto-upgrade for anonymous users is enabled in addition to this option and a user is already signed in anonymously, clicking this sign-in option will also keep the same current anonymous user.
ui.start('#firebaseui-auth-container', {
signInOptions: [
{
provider: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
}
]
});
Sign In Flows
Two sign in flows are available:
redirect
, the default, will perform a full page redirect to the sign-in page of the provider (Google, Facebook...). This is recommended for mobile apps.popup
flow will open a popup to the sign-in page of the provider. If the popup is blocked by the browser, it will fall back to a full page redirect.signInSuccessWithAuthResult(authResult, redirectUrl)
The signInSuccessWithAuthResult
callback is invoked when user signs in successfully. The authResult provided here is a firebaseui.auth.AuthResult
object, which includes the current logged in user, the credential used to sign in the user, additional user info indicating if the user is new or existing and operation type like 'signIn' or 'link'. This callback will replace signInSuccess
in future.
Parameters:
Name Type Optional DescriptionauthResult
firebaseui.auth.AuthResult
No The AuthResult of successful sign-in operation. The AuthResult object has same signature as firebase.auth.UserCredential
. 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.
Should return: boolean
If the callback returns true
, then the page is automatically redirected depending on the case:
signInSuccessUrl
parameter was given in the URL (See: Overwriting the sign-in success URL) then the default signInSuccessUrl
in config is used.signInSuccessUrl
in config.If the callback returns false
or nothing, the page is not automatically redirected.
signInSuccess(currentUser, credential, redirectUrl)
This callback will be deprecated and will be replaced by signInSuccessWithAuthResult
which takes firebaseui.auth.AuthResult
.
Parameters:
Name Type Optional DescriptioncurrentUser
firebase.User
No The logged in user. credential
firebase.auth.AuthCredential
Yes The credential used to sign in the user. 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.
Should return: boolean
If the callback returns true
, then the page is automatically redirected depending on the case:
signInSuccessUrl
parameter was given in the URL (See: Overwriting the sign-in success URL) then the default signInSuccessUrl
in config is used.signInSuccessUrl
in config.If the callback returns false
or nothing, the page is not automatically redirected.
signInFailure(error)
The signInFailure
callback is provided to handle any unrecoverable error encountered during the sign-in process. The error provided here is a firebaseui.auth.AuthUIError
error with the following properties.
firebaseui.auth.AuthUIError properties:
Name Type Optional Descriptioncode
string
No The corresponding error code. Currently the only error code supported is firebaseui/anonymous-upgrade-merge-conflict
credential
firebase.auth.AuthCredential
Yes The existing non-anonymous user credential the user tried to sign in with.
Should return: Promise<void>|void
FirebaseUI will wait for the returned promise to handle the reported error before clearing the UI. If no promise is returned, the UI will be cleared on completion. Even when this callback resolves, signInSuccessWithAuthResult
callback will not be triggered.
This callback is required when autoUpgradeAnonymousUsers
is enabled.
uiShown()
This callback is triggered the first time the widget UI is rendered. This is useful for cases where the application should display a custom loader before FirebaseUI is displayed.
Example with all parameters used<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<script src="https://www.gstatic.com/firebasejs/10.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.0.0/firebase-auth-compat.js"></script>
<!-- *******************************************************************************************
* TODO(DEVELOPER): Paste the initialization snippet from:
* Firebase Console > Overview > Add Firebase to your web app. *
***************************************************************************************** -->
<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
callbacks: {
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
var user = authResult.user;
var credential = authResult.credential;
var isNewUser = authResult.additionalUserInfo.isNewUser;
var providerId = authResult.additionalUserInfo.providerId;
var operationType = authResult.operationType;
// Do something with the returned AuthResult.
// Return type determines whether we continue the redirect
// automatically or whether we leave that to developer to handle.
return true;
},
signInFailure: function(error) {
// Some unrecoverable error occurred during sign-in.
// Return a promise when error handling is completed and FirebaseUI
// will reset, clearing any UI. This commonly occurs for error code
// 'firebaseui/anonymous-upgrade-merge-conflict' when merge conflict
// occurs. Check below for more details on this.
return handleUIError(error);
},
uiShown: function() {
// The widget is rendered.
// Hide the loader.
document.getElementById('loader').style.display = 'none';
}
},
credentialHelper: firebaseui.auth.CredentialHelper.NONE,
// Query parameter name for mode.
queryParameterForWidgetMode: 'mode',
// Query parameter name for sign in success url.
queryParameterForSignInSuccessUrl: 'signInSuccessUrl',
// Will use popup for IDP Providers sign-in flow instead of the default, redirect.
signInFlow: 'popup',
signInSuccessUrl: '<url-to-redirect-to-on-success>',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
// Whether the display name should be displayed in the Sign Up page.
requireDisplayName: true
},
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
// Invisible reCAPTCHA with image challenge and bottom left badge.
recaptchaParameters: {
type: 'image',
size: 'invisible',
badge: 'bottomleft'
}
},
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
// Set to true if you only have a single federated provider like
// firebase.auth.GoogleAuthProvider.PROVIDER_ID and you would like to
// immediately redirect to the provider's site instead of showing a
// 'Sign in with Provider' button first. In order for this to take
// effect, the signInFlow option must also be set to 'redirect'.
immediateFederatedRedirect: false,
// tosUrl and privacyPolicyUrl accept either url string or a callback
// function.
// Terms of service url/callback.
tosUrl: '<your-tos-url>',
// Privacy policy url/callback.
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<!-- The surrounding HTML is left untouched by FirebaseUI.
Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
</body>
</html>
Upgrading anonymous users Enabling anonymous user upgrade
When an anonymous user signs in or signs up with a permanent account, you want to be sure the user can continue with what they were doing before signing up. For example, an anonymous user might have items in their shopping cart. At check-out, you prompt the user to sign in or sign up. After the user is signed in, the user's shopping cart should contain any items the user added while signed in anonymously.
To support this behavior, FirebaseUI makes it easy to "upgrade" an anonymous account to a permanent account. To do so, simply set autoUpgradeAnonymousUsers
to true
when you configure the sign-in UI (this option is disabled by default).
FirebaseUI links the new credential with the anonymous account using Firebase Auth's linkWithCredential
method:
anonymousUser.linkWithCredential(permanentCredential);
The user will retain the same uid
at the end of the flow and all data keyed on that identifier would still be associated with that same user.
Anonymous user upgrade is also supported by email link sign-in in FirebaseUI. An anonymous user triggering the email link option will, on return from clicking the link, upgrade to an email link user. However, forceSameDevice
must be set to true
in the email signInOption
. This is to ensure that when the user clicks the link, it is opened on the same device/browser where the initial anonymous user exists.
There are cases when a user, initially signed in anonymously, tries to upgrade to an existing Firebase user. For example, a user may have signed up with a Google credential on another device. When trying to upgrade to the existing Google user, an error auth/credential-already-in-use
will be thrown by Firebase Auth as an existing user cannot be linked to another existing user. No two users can share the same credential. In that case, both user data have to be merged before one user is discarded (typically the anonymous user). In the case above, the anonymous user shopping cart will be copied locally, the anonymous user will be deleted and then the user is signed in with the permanent credential. The anonymous user data in temporary storage will be copied back to the non-anonymous user.
FirebaseUI will trigger the signInFailure
callback with an error code firebaseui/anonymous-upgrade-merge-conflict
when the above occurs. The error object will also contain the permanent credential. Sign-in with the permanent credential should be triggered in the callback to complete sign-in. Before sign-in can be completed via auth.signInWithCredential(error.credential)
, the data of the anonymous user must be copied and the anonymous user deleted. After sign-in completion, the data has to be copied back to the non-anonymous user. An example below illustrates how this flow would work if user data is persisted using Firebase Realtime Database.
Example:
// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
// Whether to upgrade anonymous users should be explicitly provided.
// The user must already be signed in anonymously before FirebaseUI is
// rendered.
autoUpgradeAnonymousUsers: true,
signInSuccessUrl: '<url-to-redirect-to-on-success>',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID
],
callbacks: {
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
// Process result. This will not trigger on merge conflicts.
// On success redirect to signInSuccessUrl.
return true;
},
// signInFailure callback must be provided to handle merge conflicts which
// occur when an existing credential is linked to an anonymous user.
signInFailure: function(error) {
// For merge conflicts, the error.code will be
// 'firebaseui/anonymous-upgrade-merge-conflict'.
if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
return Promise.resolve();
}
// The credential the user tried to sign in with.
var cred = error.credential;
// If using Firebase Realtime Database. The anonymous user data has to be
// copied to the non-anonymous user.
var app = firebase.app();
// Save anonymous user data first.
return app.database().ref('users/' + firebase.auth().currentUser.uid)
.once('value')
.then(function(snapshot) {
data = snapshot.val();
// This will trigger onAuthStateChanged listener which
// could trigger a redirect to another page.
// Ensure the upgrade flow is not interrupted by that callback
// and that this is given enough time to complete before
// redirection.
return firebase.auth().signInWithCredential(cred);
})
.then(function(user) {
// Original Anonymous Auth instance now has the new user.
return app.database().ref('users/' + user.uid).set(data);
})
.then(function() {
// Delete anonymnous user.
return anonymousUser.delete();
}).then(function() {
// Clear data in case a new user signs in, and the state change
// triggers.
data = null;
// FirebaseUI will reset and the UI cleared when this promise
// resolves.
// signInSuccessWithAuthResult will not run. Successful sign-in
// logic has to be run explicitly.
window.location.assign('<url-to-redirect-to-on-success>');
});
}
}
});
Multi-tenancy support
For GCIP customers, you can build a tenant-specific sign-in page with FirebaseUI. Make sure you've enabled multi-tenancy for your project and configured your tenants. See the Multi-tenancy quickstart to learn how.
This feature requires firebase version 6.6.0 or higher.
To use FirebaseUI with multi-tenancy, you need to set the tenant ID on the Auth instance being passed to FirebaseUI before calling ui.start()
.
// The Firebase Auth instance.
var auth = firebase.auth();
// Initialize FirebaseUI.
var ui = new firebaseui.auth.AuthUI(auth);
// Set the tenant ID on Auth instance.
auth.tenantId = selectedTenantId;
// Start the sign-in flow in selected tenant.
// All sign-in attempts will now use this tenant ID.
ui.start('#firebaseui-auth-container', selectedTenantConfig);
FirebaseUI only handles the sign-in flows for you, you will still need to build your own UI to let the end users select a tenant to sign in with. You can refer to the example in this guide.
There is also a quickstart app available to demonstrate how to build a single sign-in page with the FirebaseUI for two tenants which have different sets of identity providers enabled.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4