firebase / firebaseui-web Goto Github PK

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.

Home Page: https://firebase.google.com/

License: Apache License 2.0

HTML 0.62% Python 0.26% Shell 0.57% JavaScript 93.45% CSS 1.13% Dockerfile 0.04% Handlebars 0.03% SCSS 0.05% Closure Templates 3.86%

firebaseui-web's Introduction

FirebaseUI for Web — Auth

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.

FirebaseUI Auth provides a drop-in auth solution that handles the UI flows for signing in users with email addresses and passwords, phone numbers, Identity Provider Sign In including Google, Facebook, GitHub, Twitter, Apple, Microsoft, Yahoo, OpenID Connect (OIDC) providers and SAML providers. It is built on top of Firebase Auth.

The FirebaseUI component implements best practices for authentication on mobile devices and websites, helping to sign-in and sign-up conversion for your app. It also handles cases like account recovery and account linking that can be security sensitive and error-prone to handle.

FirebaseUI Auth clients are also available for iOS and Android.

FirebaseUI fully supports all recent browsers. Signing in with federated providers (Google, Facebook, Twitter, GitHub, Apple, Microsoft, Yahoo, OIDC, SAML) is also supported in Cordova/Ionic environments. Additional non-browser environments(React Native...) or Chrome extensions will be added once the underlying Firebase core SDK supports them in a way that is compatible with FirebaseUI.

Demo
Installation
Usage instructions
Configuration
Customization
Advanced
Developer Setup
IAP External Identities Support with FirebaseUI
Cordova Setup
React DOM Setup
Angular Setup
Known issues
Deprecated APIs
Release Notes

Demo

Accessible here: https://fir-ui-demo-84a6c.firebaseapp.com.

Installation

Option 1: CDN

You just need to include the following script and CSS file in the <head> tag of your page, below the initialization snippet from the Firebase Console:

<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" />

Localized Widget

Localized versions of the widget are available through the CDN. To use a localized widget, load the localized JS library instead of the default library:

<script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth__{LANGUAGE_CODE}.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />

where {LANGUAGE_CODE} is replaced by the code of the language you want. For example, the French version of the library is available at https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth__fr.js. The list of available languages and their respective language codes can be found at LANGUAGES.md.

Right-to-left languages also require the right-to-left version of the stylesheet, available at https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth-rtl.css, instead of the default stylesheet. The supported right-to-left languages are Arabic (ar), Farsi (fa), and Hebrew (iw).

Option 2: npm Module

Install FirebaseUI and its peer-dependency Firebase via npm using the following commands:

$ npm install firebase firebaseui --save

You can then import the following modules within your source files:

import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'

Option 3: Bower component

Install FirebaseUI and its dependencies via Bower using the following command:

$ bower install firebaseui --save

You can then include the required files in your HTML, if your HTTP Server serves the files within bower_components/:

<script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

Using FirebaseUI for Authentication

FirebaseUI includes the following flows:

Interaction with Identity Providers such as Google and Facebook
Phone number based authentication
Sign-up and sign-in with email accounts (email/password and email link)
Password reset
Prevention of account duplication (activated when "One account per email address" setting is enabled in the Firebase console. This setting is enabled by default.)
Integration with one-tap sign-up
Ability to upgrade anonymous users through sign-in/sign-up.
Sign-in as a guest

Configuring sign-in providers

To use FirebaseUI to authenticate users you first need to configure each provider you want to use in their own developer app settings. Please read the Before you begin section of Firebase Authentication at the following links:

For Google Cloud's Identity Platform (GCIP) developers, you can also enable SAML and OIDC providers following the instructions:

SAML
OIDC

Starting the sign-in flow

You first need to initialize your Firebase app. The firebase.auth.Auth instance should be passed to the constructor of firebaseui.auth.AuthUI. You can then call the start method with the CSS selector that determines where to create the widget, and a configuration object.

The following example shows how to set up a sign-in screen with all supported providers. Please refer to the demo application in the examples folder for a more in-depth example, showcasing a Single Page Application mode.

Firebase and FirebaseUI do not work when executed directly from a file (i.e. opening the file in your browser, not through a web server). Always run firebase serve (or your preferred local server) to test your app locally.

<!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 this dialog box:
       * Firebase Console > Project Settings > Add App > Web.
       ***************************************************************************************** -->
    <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 = {
        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,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,
          firebase.auth.PhoneAuthProvider.PROVIDER_ID,
          firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
        ],
        // 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>');
        }
      };

      // Initialize the FirebaseUI Widget using Firebase.
      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>
  </body>
</html>

This is only relevant for single page apps or apps where the sign-in UI is rendered conditionally (e.g. button click)

When redirecting back from Identity Providers like Google and Facebook or email link sign-in, start() method needs to be called to finish the sign-in flow. If it requires a user interaction to start the initial sign-in process, you need to check if there is a pending redirect operation going on on page load to check whether start() needs to be called.

To check if there is a pending redirect operation to complete a sign-in attempt, check isPendingRedirect() before deciding whether to render FirebaseUI via start().

if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

Here is how you would track the Auth state across all your pages:

<!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 type="text/javascript">
      initApp = function() {
        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            // User is signed in.
            var displayName = user.displayName;
            var email = user.email;
            var emailVerified = user.emailVerified;
            var photoURL = user.photoURL;
            var uid = user.uid;
            var phoneNumber = user.phoneNumber;
            var providerData = user.providerData;
            user.getIdToken().then(function(accessToken) {
              document.getElementById('sign-in-status').textContent = 'Signed in';
              document.getElementById('sign-in').textContent = 'Sign out';
              document.getElementById('account-details').textContent = JSON.stringify({
                displayName: displayName,
                email: email,
                emailVerified: emailVerified,
                phoneNumber: phoneNumber,
                photoURL: photoURL,
                uid: uid,
                accessToken: accessToken,
                providerData: providerData
              }, null, '  ');
            });
          } else {
            // User is signed out.
            document.getElementById('sign-in-status').textContent = 'Signed out';
            document.getElementById('sign-in').textContent = 'Sign in';
            document.getElementById('account-details').textContent = 'null';
          }
        }, function(error) {
          console.log(error);
        });
      };

      window.addEventListener('load', function() {
        initApp()
      });
    </script>
  </head>
  <body>
    <h1>Welcome to My Awesome App</h1>
    <div id="sign-in-status"></div>
    <div id="sign-in"></div>
    <pre id="account-details"></pre>
  </body>
</html>

Configuration

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. Default: `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. Default: `{}`
credentialHelper	No	The Credential Helper to use. See Credential Helper. Default: `firebaseui.auth.CredentialHelper.NONE`
queryParameterForSignInSuccessUrl	No	The redirect URL parameter name for the sign-in success URL. See Overwriting the sign-in success URL. Default: `"signInSuccessUrl"`
queryParameterForWidgetMode	No	The redirect URL parameter name for the “mode” of the Widget. See FirebaseUI widget modes. Default: `"mode"`
signInFlow	No	The sign-in flow to use for IDP providers: `redirect` or `popup`. Default: `"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](https://cloud.google.com/identity-platform/). 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: `[email protected]`. `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

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-up	`firebaseui.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.

Name	Required	Description
provider	Yes	The provider ID, eg. `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.

Name	Required	Description
provider	Yes	The provider ID, eg. `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.

Name	Required	Description
provider	Yes	The provider ID, eg. `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:

Blocking functions: Set a beforeCreate trigger to disable sign up for email providers.
In the Cloud Console / Settings / USERS tab, uncheck Enable create (sign-up) checkbox. Though for this setting, sign up for all providers will be disabled.

Name	Type	Required	Description
provider	string	Yes	For email sign-in, this should be `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`. Default: `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. Default: `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: `[email protected]`. `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:

End to end support for email link sign-in with only a few configuration lines.
Enforces security and privacy best practices.
Ability to force same device flows or allow cross device flows where a user can start the flow on one device and end it on another. This also covers Android where email link sign-in is also supported with FirebaseUI-android and FirebaseUI-ios for iOS support.
Ability to switch to email link sign-in while continuing to sign-in existing users with email and password.
Ability to support account linking, where an existing email link user signing in with Facebook for the first time using the same email will have both accounts merged so they can sign in with either (Facebook or email link) going forward.
Ability to support anonymous user upgrade as long as the flow starts and ends on the same device. Users opening the link on a different device will be notified to open the link on the same device where the flow started.

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 Provider

The 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.
The 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.

Available callbacks

`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	Description
`authResult`	`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:

If no signInSuccessUrl parameter was given in the URL (See: Overwriting the sign-in success URL) then the default signInSuccessUrl in config is used.
If the value is provided in the URL, that value will be used instead of the static 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	Description
`currentUser`	`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:

If no signInSuccessUrl parameter was given in the URL (See: Overwriting the sign-in success URL) then the default signInSuccessUrl in config is used.
If the value is provided in the URL, that value will be used instead of the static 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	Description
`code`	`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.

Handling anonymous user upgrade merge conflicts

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.

Customizing FirebaseUI for authentication

Currently, FirebaseUI does not offer customization out of the box. However, the HTML around the widget is not affected by it so you can display everything you want around the widget container.

Advanced

FirebaseUI widget modes

Upon initialization, FirebaseUI will look for the mode parameter in the URL. Depending on the value of this parameter, it will trigger a specific mode. When no mode parameter is found, it will default to the sign-in mode.

You can change the name of this parameter with the queryParameterForWidgetMode configuration parameter.

Query parameter value	Description
`?mode=select`	Sign-in mode

Example:

https://<url-of-the-widget>?mode=select

Overwriting the sign-in success URL

You can pass a query parameter to the widget's URL that will overwrite the URL the user is redirected to after a successful sign-in. If you do so, you must set the configuration signInSuccessUrl value (even if it will be overwritten). When passing the redirect URL this way, the signInSuccessWithAuthResult callback will receive the value as the redirectUrl argument.

You must include the mode explicitly in the URL when using the signInSuccessUrl parameter, otherwise FirebaseUI will directly redirect to the URL specified.

You can change the name of this parameter with the queryParameterForSignInSuccessUrl configuration parameter.

Example:

https://<url-of-the-widget>?mode=select&signInSuccessUrl=signedIn.html will redirect the user to https://<url-of-the-widget>/signedIn.html after a successful sign-in flow.

Developer Setup

Dependencies

To set up a development environment to build FirebaseUI from source, you must have the following installed:

Node.js (>= 6.0.0)
npm (should be included with Node.js)
Java SE Runtime Environment 8

In order to run the demo and tests, you must also have:

Python (2.7)

Download the FirebaseUI source and its dependencies with:

git clone https://github.com/firebase/firebaseui-web.git
cd firebaseui-web
npm install

Building FirebaseUI

To build the library, run:

npm run build

This will create output files in the dist/ folder.

To build a localized JavaScript binary, run:

npm run build build-js-{LANGUAGE_CODE}

where {LANGUAGE_CODE} is replaced by the code of the language you want. For example, the French binary can be built with npm run build build-js-fr. This will create a binary firebaseui__fr.js in the dist/ folder.

Build names for language codes with underscores, eg. zh_tw, zh_cn, pt_pt will be mapped to zh-TW, xh-CN, pt-PT. The underscore will be replaced by a hyphen symbol and the subsequent characters will be capitalized.

npm run build build-js-zh-TW

This will create a binary firebaseui__zh_tw.js in the dist/ folder.

To build a localized npm FirebaseUI module, run:

npm run build build-npm-{LANGUAGE_CODE}

Make sure all underscore symbols in the LANGUAGE_CODE are replaced with dashes. This will generate dist/npm__{LANGUAGE_CODE}.js. You can then import/require it:

import firebaseui from './npm__{LANGUAGE_CODE}';

npm run build build-npm-zh-TW

This will create a binary npm__zh_tw.js in the dist/ folder.

To build a localized ES module of FirebaseUI, run:

npm run build build-esm-{LANGUAGE_CODE}

Make sure all underscore symbols in the LANGUAGE_CODE are replaced with dashes. This will generate dist/esm__{LANGUAGE_CODE}.js. You can then import/require it:

import firebaseui from './esm__{LANGUAGE_CODE}';

npm run build build-esm-zh-TW

This will create a binary esm__zh_tw.js in the dist/ folder.

Running the demo app

To run the demo app, you must have a Firebase project set up on the Firebase Console. Copy demo/public/sample-config.js to demo/public/config.js:

cp demo/public/sample-config.js demo/public/config.js

Copy the data from the "Add Firebase to your web app" flow in Firebase Console. Next, run

npm run demo

This will start a local server serving a FirebaseUI demo app with all local changes. More details can be found in the demo app folder, covering how to configure the app to be deployed on a Firebase Hosting instance.

Running unit tests.

All unit tests can be run on the command line (via PhantomJS) with:

npm test

Alternatively, the unit tests can be run manually by running

npm run serve

Then, all unit tests can be run at: http://localhost:4000/buildtools/all_tests.html You can also run tests individually by accessing each HTML file under generated/tests, for example: http://localhost:4000/generated/tests/javascript/widgets/authui_test.html

Run tests using SauceLabs

You need a SauceLabs account to run tests on SauceLabs.

Go to your SauceLab account, under "My Account", and copy paste the access key. Now export the following variables, in two Terminal windows:

export SAUCE_USERNAME=<your username>
export SAUCE_ACCESS_KEY=<the copy pasted access key>

Then, in one Terminal window, start SauceConnect:

./buildtools/sauce_connect.sh

Take note of the "Tunnel Identifier" value logged in the terminal,at the top. In the other terminal that has the exported variables, run the tests:

npm test -- --saucelabs --tunnelIdentifier=<the tunnel identifier>

IAP External Identities Support with FirebaseUI

You can use FirebaseUI to build the authentication page to use external identities with Google Cloud IAP. The documentation can be found here.

Cordova Setup

Introduction

FirebaseUI sign-in widget supports Cordova applications. This includes email/password and all OAuth providers (Google, Facebook, Twitter and GitHub). Phone authentication is not supported due to the limitation in the underlying Firebase core SDK. Email link authentication is not yet supported due to the inability to detect the incoming link when the user clicks it to complete sign-in.

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`
Anonymous	`firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID`
Microsoft	`microsoft.com`
Yahoo	`yahoo.com`
SAML (GCIP only)	`saml.*********`
OIDC (GCIP only)	`oidc.*********`

Setup and Usage

In order to integrate FirebaseUI with your Cordova application, you need to follow these steps:

Install the necessary Cordova plugins, make the necessary Firebase Console changes and update your config.xml file as documented in OAuth Sign-In for Cordova
After you have successfully configured your application, you can use FirebaseUI in your Cordova application just like any other traditional browser applications.

Keep in mind the following while you set up the app:

Only redirect signInFlow is supported as Firebase Auth does not support popup mode for Cordova.
firebase.auth.PhoneAuthProvider.PROVIDER_ID is not currently supported.
If you are providing a Content-Security-Policy make sure you add the appropriate exceptions for FirebaseUI resources (style-src, media-src, img-src, script-src, etc.) and underlying Firebase JS SDK.

React DOM Setup

In React DOM applications you can use the FirebaseUI Web React Wrapper.

Angular Setup

In Angular applications you can use this FirebaseUI Web Angular Wrapper from the community.

Known issues

Firebase Auth does not work in Safari private browsing

When a user has enabled the private browsing mode in Safari, the web storage is disabled. This currently results in an error being thrown upon Firebase Auth initialization. Therefore, when following the snippets above, FirebaseUI will never get initialized and no UI will be displayed.

Tips for Single Page apps (`UI Widget is already rendered on the page`

warning)

When re-rendering the FirebaseUI Auth widget (for instance after signing in a user, signing them out and trying to sign them in again), it will sometimes log a warning:

UI Widget is already rendered on the page and is pending some user interaction. Only one widget instance can be rendered per page. The previous instance has been automatically reset.

This happens when the UI widget was in a pending state, i.e. the user was in the middle of performing a sign-in flow. You should generally avoid re-rendering the widget in the middle of an action, but if you do, to avoid the warning, you should use the reset() method before re-rendering the widget.

Tips for initializing a new UI instance with the same Auth instance

When trying to initialize a new UI widget with the same Auth instance, you will get an app/duplicate-app error. In general, you should keep a reference to the AuthUI instance and instead call reset() and then start(...) again to re-render the widget.

If you don't keep a reference to that AuthUI instance, you can get the reference by calling firebaseui.auth.AuthUI.getInstance(appId) where appId is the same as the optional one used to initialize the AuthUI instance. If none was provided just call firebaseui.auth.AuthUI.getInstance().

This is the recommended way but you also have the option to delete the AuthUI instance by calling ui.delete() which returns a promise that resolves on successful deletion. You can then initialize a new UI instance with the same Auth instance without getting the app/duplicate-app error. At any time, you can only have one AuthUI instance with the same appId or the same Auth instance.

FirebaseUI is broken in IE11 when deployed on a local server accessed

through localhost (but works when deployed on a remote server)

Several developers reported issues with IE11 when testing the widget integration on a server deployed locally, accessing the application through a localhost address. However, it doesn't impact applications deployed on a server (as you can verify in the demo app).

Release Notes

Latest: https://github.com/firebase/firebaseui-web/releases/latest

For v1.0.0 and superior: https://github.com/firebase/firebaseui-web/releases

6.0.0

FirebaseUI-web v6.0.0 is intended to be used alongside Firebase JS SDK v9 or v10 compat.

If using the CDN, change your Firebase imports to:

<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>

If NPM:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

See the Firebase upgrade guide for more information.

5.0.0

accountchooser.com has been operating in "universal opt-out" mode and was shutdown on July 2021. FirebaseUI-web has stopped supporting this credential helper and since version v5.0.0, all related configurations and enums have been removed.

If you are using firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM, you need to switch to firebaseui.auth.CredentialHelper.NONE or firebaseui.auth.CredentialHelper.GOOGLE_YOLO. Follow the instruction on one-tap sign-up when switching to the latter.
If you are configuring acUiConfig in the UI configurations, this is no longer supported and should not be used.
firebaseui.auth.FederatedSignInOption#authMethod is no longer required to be provided by the latest one-tap API.

0.5.0

See the milestone 0.5.0 for the issues covered in this release. Below is a summary of the most important ones:

FirebaseUI now supports Single Page Application: a reset method was added to allow to dispose of the widget. When the user leaves a page where the FirebaseUI widget was rendered (for instance in the componentWillUnmount method of a React component), call the reset method of the firebaseui.auth.AuthUI instance you created. Also, call the reset method before rendering again the widget if one has already been rendered on the page. Please refer to the demo app for guidance on how to use FirebaseUI in a Single Page Application context.
Custom scopes can now be added for each provider. See Configure OAuth providers.
Several issues, different but related to the displayName not being present after sign up with email and password, have been fixed.
A new config parameter has been added: signInFlow. It allows to specify whether the Identity Providers sign in flows should be done through redirect (the default) or popup. See Sign In Flows.

firebaseui-web's People

Contributors

Stargazers

Watchers

Forkers

praneybehl 2947721120 programming-fun kristjin vietcent vonrosenchild loisoft victormwenda quasi-repo webeli jban51 abinaya132 googleinternetauthorityg2sunghan willem-h myisaac007 haunguyen90 tuanqtran ale13jo amin007 hansonzeng kublaj chrismychen kenju254 j2d2 gdg richardwiden sush0408 rasata jorgutpar niilante hunt-son eranmit99 kevinthecheung ellorah mayank-cronj lebsral rlansky dreroc pradeeplearns bigzie ufo-github costtree lodexinc m2f lowjon albatroscom mypravite-project bklynate codrut winniecluk borgaard havingaword mattwhite8 ejnelson florianwittmann pomidorcart xcoivie kaoschuks rafalph gerrybarron pk-codebox-evo rui-gao sergihv abdulsamii shushen deepthibhat prakhar1989 skyeunknown84 faheelkhan fernandoawri lamass wutijat mrkem598 enterstudio sajan1234 anamika-manhas thisredone arnoldmukisa usmansahir gougouccnu georotzen eduardotourinho lostpebble foladipo ignatiusukwuoma jpamorgan enterstudios jackass0528 linearregression the-genius-thories kirillzubovsky taiwoamao maurojr fatkwong14 bradparks haffiiiiiiiiiiiiii hadimazalan andreasricci penningjoy ryansully

firebaseui-web's Issues

Localize FirebaseUI to other languages

Is there any support for other languages?

Option to make accountChooser optional

When users click "sign in with email", I think they expect to be shown a couple inputs where they can enter their email and password. However, instead they get this account chooser:

I don't think this is an intuitive flow. As a user, I'm asking:

What are these "accounts"? I've never signed into this website with any of these email addresses. This looks like an OAuth flow. Are these my Google accounts? I don't know what an "account" is, so I don't know what the "Add Account" link does. I just want to type in an email address!

Is there a reason the UI works this way instead of standard email/password flow? At the very least can we use the term "email" instead of "account"?

[Feature Request] Polymer Component wrapper

Now that PolymerFire is out for Firebase 3.0, I'd love to write a Polymer web component to wrap up firebaseui-web for Polymer.

I've already written a Polymer component for Firebase 3.0 to implement a login flow. You can see it on a development project here: https://quiver-one.firebaseapp.com/

Enforce account selection on GoogleAuthProvider signInWithRedirect

When I am logged in into the "Google Product" (gmail and such) with only one email address ([email protected]), that account is automatically used for Firebase.Auth. This is not OK.

I may be logged into Google only with [email protected], but may have another Google account [email protected] which I actually want to use with Firebase.

As soon as I'm logged into Google with two accounts, whenever I start a signInWithRedirect-process, I land on accounts.google.com (I have 3rd party Cookies disabled, if that matters), where I can choose one of the two accounts, but more importantly, I also get to add another account.

So, assuming I am logged into Google with [email protected] and [email protected], but I actually want to log into Firebase with [email protected], then I can choose to add the [email protected] account during the sign-in procedure, which is a very natural flow.

But if I'm only logged in with [email protected] and want to use [email protected] with Firebase, I need to go to www.google.com, select "Add Account" from the top-right "dropdown box", then go back to the application which is signing in, reload the page, redo a signInWithRedirect, select [email protected], which is the worst possible flow!

An "Add Account" should always be shown on accounts.google.com, at least it should be an option on the provider object.

This also applies to FirebaseUI, not just to the GoogleAuthProvider.

The Gitkit sign-in widget (window.google.identitytoolkit.start('#gitkitWidgetDiv', config);) handles this perfectly, it will ask for the email-address, then check if it needs to ask for a password, or authenticate via Google, and, if required, sends you to accounts.google.com for that specific Google account (which kindly also allows you to use another account if you want to, try that option to see how well that flow is implemented)

NPM?

I guess it's planned, does it?

Firebase Service named 'auth' already registered

Go this in console.log

firebase.js:30 Uncaught Error: Firebase Service named 'auth' already registered.

I'll try to figure this out, but I'm just putting it here in case anyone else sees this issue

Open source FirebaseUI-web

I'd love to contribute to development of this widget, but the code is not in this repo. The Android and iOS code is available, but not the web code. Am I looking in the wrong place? Is there a reason why Firebase/Google would open source the Android and iOS code but not the web code?

Thanks,
Tim

Angular module?

I assume this is in the works...

Configuration siteName is required

Hi,
for a few days I can't log in with facebook and email any more. But the funny thing is; signing in with google works.

Am I doing something wrong?

Error

Code

App.js

"use strict";

// Init firebase
export const Firebase = firebase.initializeApp({
  apiKey: "api-key-here",
  authDomain: "auth-domain-here",
  databaseURL: "database-url-here",
  storageBucket: "storage-bucket-here"
});

Auth.jsx

"use strict";

import { Accounts } from "meteor/accounts-base";

import React, { Component, PropTypes } from "react"
import { browserHistory } from "react-router"
import { createContainer } from "meteor/react-meteor-data"

import { Firebase } from "../../../App.js"

class Auth extends Component {
  componentDidMount() {
    // Init firebase auth ui config
    const authUiConfig = {
      "signInSuccessUrl": "/",
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      tosUrl: "tos-url-goes-here",
      callbacks: {
        signInSuccess: function (currentUser, credential, redirectUrl) {
          return false; // Do not redirect automatically
        }
      }
    };

    Firebase.auth().onAuthStateChanged(((user) => {
      if (user && Meteor.loggingIn() === false) {
        // Login via firebase
        user.getToken().then(((token) => {
          Accounts.callLoginMethod({ methodArguments: [{ firebaseToken: token }] });
          this.props.history.push("/");
        }).bind(this));
      } else if (user === null) {
        // Show auth ui
        const FirebaseAuthUi = new firebaseui.auth.AuthUI(Firebase.auth());
        FirebaseAuthUi.start("#firebaseui-auth-container", authUiConfig);
      }
    }).bind(this));
  }

  render() {
    return (
        <div className="ui center aligned grid">
          <div class="column">
            <div id="firebaseui-auth-container"></div>
          </div>
        </div>
    )
  }
}

Auth.propTypes = {
  history: PropTypes.object.isRequired
};

export default createContainer(() => {
  return {
    history: browserHistory
  };
}, Auth)

KI - Firebase Auth does not work in Safari private browsing

As stated in the README.md FirebaseUI doesn't work in Safari when using private browsing. I have no issue adding a fake localStorage but since the web version is not open sourced this leaves me in a tough spot. Is there a rough ETA to when this will be implemented?

Adding custom scopes to providers

Need option to add custom scopes to every individual providers like in example below

https://firebase.google.com/docs/auth/web/github-auth#handle_the_sign-in_flow_with_the_firebase_sdk

provider.addScope('repo');

how to integrate with react app?

Can't use signInWithPopup. Only signInWithRedirect.

It would be great if it was possible to use signInWithPopup. Is this planned?

Sorry if I'm logging this in the wrong spot, I'm a little confused, is this (going to be) the repo for the actual code? This page mentions 'forking the repo' of Firebase UI. I guess that's referring to the iOS and Android falvors?

UI auth container not cleared on email sign on

On handling the signInSuccess callback and returning false. When the provider is email auth, the firebaseui-auth-container div is not cleared. On other providers this div is cleared on successful sign in.

Add Bower and npm support

It would be great if I could install/import Firebase UI locally with something like bower install firebase-ui

Force form rendering if only one provider is given

I think it speaks for itself given the title, but just in case: wouldn't it be nice to automatically get the login form loaded if, let's say, only the firebase.auth.EmailAuthProvider.PROVIDER_ID option is passed to the signInOptions array from the configuration object? Then, there would be no need for the user to click the only given option.

Or maybe come up with an additional parameter that would allow this?

I'm looking forward seeing this code to be open-sourced though. Keep it up! :)

Anonymous user and account conversion to permanent account

Same issue as #123 in firebase-android:

How can I use firebaseui-web to convert an anonymous account to a permanent one (i.e. one of the supplied auth providers) ?

As stated in the documentation and as I understand it, one must use the linkWithCredential method instead of the "normal" signInWith flow. Can this be done with the current AuthUI version somehow?

Create React Wrapper for FirebaseUI Auth

This would make it easier for developers to get set up, and ensures things like component lifecycle (e.g. reset() are handled correctly.)

Privacy policy: what sign-in user should know

Well this is a generic question regarding Privacy and Data usage practices applicable to all Firebase repositories in general. However I didn't figure out a place to ask (neither could find if its been asked earlier). But seemed tactically important for broader adaption of Firebase.

As we handle user data through Firebaseui-web (Firebase in general) for our website users, which in almost all cases includes handling of personally identifiable information, we are obliged by our operating-ethics and applicable laws to disclose how the data is stored, used/analysed/shared within Firebase/Google databases or any other privacy information ( in addition to our own privacy policy)

Would appreciate If someone from Firebase team can highlight:

what user should definitely know with regards to privacy and data collection at Firebase
where to direct user for detailed version (the ever updated version) of Firebase privacy policy
geographic location(s) where user data is stored? and
countr(y/ies) of applicable laws

Provide a method to probe whether the UI has a pending link or email mismatch operations

In a usual scenario, the developer adds an onAuthStateChanged observer to listen to user state changes, when the user is null, the developer initiates the sign in widget. When the user is not null, the developer displays their logged in UI.
That's where the problem occurs. In many cases, the widget may have a pending link operation or in the middle of an email mismatch rendering. In both cases the user is logged in and the onAuthStateChanged as typically implemented will interrupt the flow and prevent the widget from completing the sign in flow properly.

To fix we need to provide a synchronous api on ui, we could call it "isPending()" which returns true if the ui still needs to be rendered to finish a pending operation and false if the widget flow is complete.

unable to login with social on ionic app

in one of my chat application https://github.com/malikasinger1/inzi-chat-app

I'm Unable to login with facebook on ionic app

with firebase lib v2.4.2 and new console i'm unable to login with any auth method

it is just showing TRANSPORT_UNAVAILABLE error in both popup and redirect

this problem only apperas in build version(on device or emulator) not in localhost

Do not ship partial Material Design Lite CSS

I'm currently integrating FirebaseUI Auth into the FriendlyPix sample which uses Material Design Lite (MDL) for styling.

One issue is that FirebaseUI has modified MDL CSS classes styling so importing the FirebaseUI CSS will mess up any website that's using MDL. For example here is FriendlyPix:

Before:

After:

MDL is a popular styling framework now so i'd be best not to re-use/modify their CSS class names. I suggest either:

Namespacing/Prefixing all the class names used in Firebase-ui. For instance rename all mdl-button into fui-mdl-button (or simply fui-button)
Keep using the MDL class name but do not modify them, instead add a second class name for all CSS overrides/changes: You button that had class="mdl-button" would become class="mdl-button fui-button" where mdl-button only contains the original v1 MDL CSS styles and fui-button would be any Firebase-UI specific additions.

[Feature Request] Create new account management page

It would be nice to have a built in component that allows users to manage their account. Specifically the functionality could be:

Change password (if you had one)
Error conditions:
- Invalid password (e.g. too short, empty)
- Requires reauth (user signed-in more than 5 min ago, this could be solved if the old passwd is always required)
- General internal error (network req, expired user, etc)
Add/Change email
Error conditions:
- Invalid email (e.g. exists already, invalid format)
- Requires reauth (user sign-in more than 5 min ago -> should be handled by asking the user to reauthenticate with one of the providers they have linked)
- General internal error
View linked accounts and unlink them.
Error conditions:
- General internal error
Style customization (same as authentication flows)

How to Logout?

When I Login success, always remember account. Only close website browser, maybe can login again.

[Sample app] Uncaught Error: This operation is sensitive and requires recent authentication

Error:

> POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/deleteAccount?key=<somebeautifulkey> 400 ()
> firebase.js:71 Uncaught Error: This operation is sensitive and requires recent authentication. Log in again before retrying this request.

Steps to replicate:

Delete an account that you have signed-into some(?) days back.

Expected Intuitive user flow:

"Before deleting please authenticate again" or sort of

In-fact I would enforce re-authenticate irrespective of time they logged-in on sensitive operations such as 'delete account'.

Also, in general if you can help with understanding exception handling to create own custom logic/navigation

Facebook login throws "Error code: auth/internal-error"

Hi, I'm completely new to all this, so my apologies if this is not the place to post this...

I've set up firebaseui-web on a test project. Email/Password and Google login both work well, but Facebook login comes up with the error message above. Console log shows:

POST https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key=AIzaSyCS0knqsGspwJGp-xfKqRYPO-rX5B1kf8A 400 ()

As far as I can tell, I've done all of the configuration on both the Firebase and Facebook sides correctly.

Signing in after being in a pending state for 1h gives an error

When using Firebase UI auth Web: If I reach a pending state (for instance the screen asking if I want to confirm signin with a different account that the one we initially tried to link) and wait for 1h before completing the sign-in flow I will get the following error:

Failed to load resource: the server responded with a status of 400 ()
https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key=...

This happens because the Credentials object that is passed to sign in the main Firebase app is expired.

Error Code: auth/operation-not-supported-in-this-env

I have implemented Firebase UI web into my ionic app and it works awesome in chrome though when deploying to my android device, im getting the following error:

Error Code: auth/operation-not-supported-in-this-enviroment

I can create an account via email though facebook and gmail wont work. If I click them, it just brings back the error.

Any help would be appreciated. BTW thanks, its looking great and saves a huge amount of time.

signInSuccessUrl always required

The documentation states that the signInSuccessUrl is only required as follows.

signInSuccessUrl: The URL where to redirect the user after a successful sign-in. Required when the signInSuccess callback is not used or when it returns true.

However this is not the case. Currently by having the signInSuccess callback return false you can ignore the signInSuccessUrl, but it it still required otherwise the following error will be thrown and the signInSuccess function will not be called.

firebase-auth.js:48 Uncaught Error: Configuration signInSuccessUrl is required.

iOS + Chrome Popup does not work

Steps to reproduce:

Log in
Refresh
Log out
Refresh
Try and log back in again

Results:

Popup closes before auth can return.
or
Gray screen

Throw exception after logout and then login again

I used firebaseui for login then I called firebase.auth().signOut(). After that I come back to the login page and when starting the firebase ui login, it thrown an exception that is "User not logged in"

browser_adapter.js:77 Error: User not logged in.
at Error (native)
at Dj (https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.js:235:156)
at Wj (https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.js:245:608)
at Yj (https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.js:245:489)
at https://www.gstatic.com/firebasejs/ui/0.4.0/firebase-ui-auth.js:247:96
at e.Ub (http://localhost:8100/lib/firebase.js:78:495)
at Qd (http://localhost:8100/lib/firebase.js:82:220)
at Md (http://localhost:8100/lib/firebase.js:82:100)
at C.Rg (http://localhost:8100/lib/firebase.js:81:406)
at td (http://localhost:8100/lib/firebase.js:74:484)BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:60(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
Subscriber.js:227 Uncaught Error: User not logged in.

Display human readable message instead of error codes

When an error occurs currently the Error code is displayed. For instance when the account is disabled we display a popup with the following messsge:

Error code: auth/user-disabled  
Dismiss

Since this is supposed to be a reference implementation of the auth flow it would be nice to have all the known errors translated into a proper message for the user.

For instance forauth/user-disabled we should display something like "Your account has been disabled. Please contact the app's administrator."

firebaseui-auth-container not showing up after signing out

Hi,
I used your manual to add authentication.

I managed to sign in a user, and remove the firebaseui-auth-container.
But when I'm signing out, the firebaseui-auth-container doesn't show back up.

If I go to my app when i'm already signed in, then press sign out, it works and I see the firebaseui-auth-container.

Source:
https://github.com/ronyjacobson/she-codes-tracks--

Allow clearing and re-rendering the widget to better support single page apps

Currently, the sign in widget has to be rendered in its own page, usually in a popup page for single page applications. It will throw an error if the developer tries to render it more than once on the same page.
Here are a bunch of common situations:
The developer renders the sign in widget on their single page webpage if the user is logged out.

Federated sign in

The nascar screen is presented. The user clicks google sign in button
OAuth flow is triggered and the page redirects back to the same original page and the sign in success callback is called and the widget is cleared without any redirect. The developer now displays the authenticated content while showing the sign out button.
sign out button is clicked and the sign in widget is supposed to be rendered again but since it was previously rendered to process the redirect result for step 2, an error would be thrown.

Password sign in (account chooser disabled for simplicity)

The user signs in with email.
The sign in form is presented without any page redirect.
On success, the sign in form is cleared and the developer shows the authenticated content on the same page along with a sign out button.
sign out button is clicked and the sign in widget is supposed to be rendered again but since it was previously rendered to show the nascar screen in step 1, an error would be thrown.

Missing callbacks

I know the docs say that callbacks will be added soon, and I don't want to seem impatient... 😁

But I'd just like to say that adding callbacks is one of the most crucial features for using this library in production! (Which I'm prematurely doing here, whoops.)

It's quite confusing to users when I can't, say, show them a loading spinner and hide alternative login methods while login is in progress. It would be awesome if more callbacks make it into the next release!

Contribution

Hi there,
I'm just curious about, is there any way to contribute to this project ?

[Question] FirebaseUI vs Firebase

So I'm new to Firebase and I'm trying to figure out if FirebaseUI and Firebase are the same thing. I have walked through the tutorial on firebase.google.com however I noticed that some videos online use the FirebaseUI.

What's the difference between FirebaseUI and the regular Firebase? When I'm programming do I use both FirebaseUI and Firebase?

Thanks in advance!

Allow to use popup for IDPs

It would be great if we could have a setting that would allow to use the popup flow for IDPs instead of the redirect that's currently used. I've just integrated Firebase UI in a single page app (only enabled Facebook and Google) and the UX would be much nicer with a popup.

[Feature request] New UX Flow for email and password signup

Wiki says:

FirebaseUI includes the following flows:

Interaction with Identity Providers such as Google and Facebook
Sign-up and sign-in with email accounts
.
.

I was expecting sing up with email and password button somewhere in the page but I see none.
I use the following code same with the example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sample FirebaseUI App</title>
        <script src="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.js"></script>
        <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>

        <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.css" />
        <script type="text/javascript">
                // FirebaseUI config.

                var config = {
                    apiKey: "****",
                    authDomain: "****",
                    databaseURL: "****",
                    storageBucket: "****",
                };
                firebase.initializeApp(config);

                var uiConfig = {
                    // Query parameter name for mode.
                    'queryParameterForWidgetMode': 'mode',
                    // Query parameter name for sign in success url.
                    'queryParameterForSignInSuccessUrl': 'signInSuccessUrl',
                    'signInSuccessUrl': 'http://local.host:9000/',
                    'signInOptions': [
                        // Leave the lines as is for the providers you want to offer your users.
                        firebase.auth.EmailAuthProvider.PROVIDER_ID,
                        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
                        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
                    ],
                    // Terms of service url.
                    'tosUrl': '<your-tos-url>',
                    'callbacks': {
                        'signInSuccess': function(currentUser, credential, redirectUrl) {
                            // Do something.
                            // Return type determines whether we continue the redirect automatically
                            // or whether we leave that to developer to handle.
                            return true;
                        }
                    }
                };

                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>
    </body>
</html>

Mobile appearance

It doesn't look like the css was setup for mobile? I am just running the setup from the examples in chrome and testing the different device views. The provider buttons are tiny.

displayName is null after login in

I have been using firebaseui-web for sometime and it worked well. However, several days ago I noticed that for every new signed up user the displayName field of the user object (reported by onAuthStateChanged's callback) is null.

When a user goes through the sign up process he/she is asked to enter the name and such name is entered, however, after login the user structure does not contain this name.

This happens only with new signed up users. With users signed up long ago the displayName still contains the correct value.

ADRIAGUSJO 02

how to integrate with react app?

I have been trying to get this lib working with react, but have been unsuccessful. Any example code?

I got error with identitytoolkit

https://www.googleapis.com/identitytoolkit/v3/relyingparty/getProjectConfig?key={key_here}&cb=1466141353887

I got this API Key from google console, but it returns

"message": "CONFIGURATION_NOT_FOUND"

What should I do?

[Feature Request] Enforce mandatory email verification

It does not seem to send a verification email automatically. It does work when manually using sendEmailVerification(), but then we need to track if we already sent it or not to prevent duplicates.

Show enter email directly when only using EmailAuthProvider

When only using email as an option to sign-in, is it possible to directly show the enter email screen instead of showing 'Sign in with email' button first ?

Auth/operation not supported in this environment [For Sign-In with Google]

For a new web developer or firse-time firebase user going through the firebaseui-web tutorial sequentially in github, they will experience an issue if they try to support login through one of our federated providers and test it locally in the file environment.

This can be easily resolved if the user uses the Firebase CLI, using firebase serve so it goes through localhost, but an introduction to this is missing in the Github. Perhaps we could also make the error code message indicate this solution so developers will know where to go.

How to retrieve provider specific values such as accessToken, providerUserId etc.

In earlier firebase versions[https://www.firebase.com/docs/web/guide/login/facebook.html] there is a way to retrieve Facebook(or other provider) specific data, such as facebook.accessToken; facebook.id, through authdata object.

Even for current firebase version [https://firebase.google.com/docs/auth/web/facebook-login], var token = result.credential.accessToken; can retrieve providers oAuthToken (if not any other information?)

So for Firebae-UI

Is this feature available through firebase-ui?
Any possible work around (if not available through firebase-ui)?
Is their any documentation around. (sorry if it exist, but I am not able to find)?

Example use case to elaborate why it is required:

user login using firebase-ui along with requesting access to scopes ->successful login
auth state changes, retrieve the firebase token+firebase uid+ facebook user token+facebook user ID ->send to external server
validate firebase token->store the firebase uid,facebook user ID on external-server
Later whenever-> retrieve the scope values directly from facebook, by external-server to facebook call.
(say user_likes is scope in consideration, at Facebook this scope values will keep changing, so one retrieves the updated user_likes list by a periodic GET which requires Facebook user_id along with other parameters to be passed)

Error code: auth/timeout

I'm using the "Starting the sign flow" code from the instructions. I only have the Email Provider enabled. I'm using the local server. When I load the page, the widget progress bar goes for a while, then a little yellow box says "Error code: auth/timeout" yet the widget still works. Any advice on how I can fix this? Thank you for your great work.

Required first and last name for password sign-in?

Your email/password sign-in flow is prompting users for "First & last name":

I don't ever want to display my users' real names on my site, and I'm afraid they'll be freaked out that they're being asked that information. Unfortunately, it's currently a required field in the email/password form.

This makes the email/password sign-in option unusable for any site that wants to maintain its users' privacy.

How can I disable this?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

firebase / firebaseui-web Goto Github PK

firebaseui-web's Introduction

FirebaseUI for Web — Auth

Table of Contents

Demo

Installation

Option 1: CDN

Localized Widget

Option 2: npm Module

Option 3: Bower component

Using FirebaseUI for Authentication

Configuring sign-in providers

Starting the sign-in flow

Configuration

Credential Helper

One-tap sign-up

Available providers

Configure OAuth providers

Generic OAuth provider

OpenID Connect (OIDC) providers (GCIP only)

SAML providers (GCIP only)

Configure Email Provider

Email and Password

Email Link Authentication

Configure Phone Provider

Configure Anonymous Provider

Sign In Flows

Available callbacks

signInSuccessWithAuthResult(authResult, redirectUrl)

signInSuccess(currentUser, credential, redirectUrl)

signInFailure(error)

uiShown()

Example with all parameters used

Upgrading anonymous users

Enabling anonymous user upgrade

Handling anonymous user upgrade merge conflicts

Multi-tenancy support

Customizing FirebaseUI for authentication

Advanced

FirebaseUI widget modes

Overwriting the sign-in success URL

Developer Setup

Dependencies

Building FirebaseUI

Running the demo app

Running unit tests.

Run tests using SauceLabs

IAP External Identities Support with FirebaseUI

Cordova Setup

Introduction

Available providers

Setup and Usage

React DOM Setup

Angular Setup

Known issues

Firebase Auth does not work in Safari private browsing

Tips for Single Page apps (UI Widget is already rendered on the page

Tips for initializing a new UI instance with the same Auth instance

FirebaseUI is broken in IE11 when deployed on a local server accessed

Release Notes

6.0.0

5.0.0

0.5.0

firebaseui-web's People

Contributors

Stargazers

Watchers

Forkers

firebaseui-web's Issues

Error

Code

in one of my chat application https://github.com/malikasinger1/inzi-chat-app

I'm Unable to login with facebook on ionic app

with firebase lib v2.4.2 and new console i'm unable to login with any auth method

it is just showing TRANSPORT_UNAVAILABLE error in both popup and redirect

this problem only apperas in build version(on device or emulator) not in localhost

Federated sign in

Password sign in (account chooser disabled for simplicity)

Recommend Projects

Recommend Topics

`signInSuccessWithAuthResult(authResult, redirectUrl)`

`signInSuccess(currentUser, credential, redirectUrl)`

`signInFailure(error)`

`uiShown()`

Tips for Single Page apps (`UI Widget is already rendered on the page`