Integrating Identity Platform UI elements into your web app

This guide shows you how to integrate a user interface (UI) provided by Identity Platform into an existing web app.

Before you begin

To complete this guide, you'll need the following:

  • A Google Cloud project for which you're a Project Owner, with billing enabled.

Open-source UI components for other clients

This article shows you how to integrate UI components into a web app. For other app types, see the following pages:

Integrating the UI components into your app

  1. Add the UI script and CSS from the CDN in the <head> tag of your page.


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

  2. Enable at least one one sign-in method using the Google Cloud console. See the Quickstart to learn how.

  3. In the <head> tag of your page, configure how your users can sign in: 

    <script>
// UI Configuration
var uiConfig = {
 signInSuccessUrl: '[URL_TO_REDIRECT_ON_SIGNIN_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 UI Components.
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>

  4. In the <body> element of your page, insert the UI widget: 

    <body>
<!-- The surrounding HTML is left untouched. Your app can use that space for branding, controls and other customizations.-->
<h1>Welcome to [APP_NAME]</h1>
<div id="firebaseui-auth-container"></div>
</body>

    When you render your page, the UI provided by Identity Platform will appear, allowing users to sign in to your app.

To learn about more customizations, see the UI component documentation on GitHub.

What's next