Sign in a user with an email by using Identity Platform

Learn how to use Identity Platform to sign in a user with an email and password.


To follow step-by-step guidance for this task directly in the Google Cloud console, click Guide me:

Guide me


Before you begin

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
  2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  3. Make sure that billing is enabled for your Google Cloud project.

  4. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

    Check for the roles

    1. In the Google Cloud console, go to the IAM page.

      Go to IAM
    2. Select the project.
    3. In the Principal column, find the row that has your email address.

      If your email address isn't in that column, then you do not have any roles.

    4. In the Role column for the row with your email address, check whether the list of roles includes the required roles.

    Grant the roles

    1. In the Google Cloud console, go to the IAM page.

      Go to IAM
    2. Select the project.
    3. Click Grant access.
    4. In the New principals field, enter your email address.
    5. In the Select a role list, select a role.
    6. To grant additional roles, click Add another role and add each additional role.
    7. Click Save.
  5. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  6. Make sure that billing is enabled for your Google Cloud project.

  7. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

    Check for the roles

    1. In the Google Cloud console, go to the IAM page.

      Go to IAM
    2. Select the project.
    3. In the Principal column, find the row that has your email address.

      If your email address isn't in that column, then you do not have any roles.

    4. In the Role column for the row with your email address, check whether the list of roles includes the required roles.

    Grant the roles

    1. In the Google Cloud console, go to the IAM page.

      Go to IAM
    2. Select the project.
    3. Click Grant access.
    4. In the New principals field, enter your email address.
    5. In the Select a role list, select a role.
    6. To grant additional roles, click Add another role and add each additional role.
    7. Click Save.

Enable Identity Platform

  1. In the Google Cloud console, go to the Identity Platform page in the Cloud Marketplace.

    Go to Identity Platform

  2. Click Enable Identity Platform.

Configure an email sign-in

  1. Go to the Identity Providers page.

  2. On the Identity Providers page, click Add a provider.

  3. In the Select a provider list, select Email/Password.

  4. Click the Enabled toggle to on.

  5. To save the provider settings, click Save.

Create a user

  1. In the Google Cloud console, go to the Users page.

    Go to Users

  2. Click Add user.

  3. In the Email field, enter an email and password. Note both of these values because you need them in a later step.

  4. To add the user, click Add. The new user is listed on the Users page.

Sign in the user

The steps to sign in the user vary depending on which SDK version your app is using. Ensure you are following the correct steps for your application.

SDK v9 (modular)

Install the SDK and initialize Firebase

Version 9 of the Firebase JS SDK uses a JavaScript Module format.

This workflow uses npm and requires module bundlers or JavaScript framework tooling because the v9 SDK is optimized to work with module bundlers to eliminate unused code (tree-shaking) and decrease SDK size.

To use the v9 SDK, perform the following steps:

  1. From the project directory, install Firebase using npm:

    npm install firebase
  2. Initialize Firebase in your app and create a Firebase App object:

    import { initializeApp } from 'firebase/app';
    
    const firebaseConfig = {
        apiKey: "API_KEY",
        authDomain: "AUTH_DOMAIN"
    };
    
    const app = initializeApp(firebaseConfig);
    

    Replace the following:

    • API_KEY: the apiKey of your Firebase project.
    • AUTH_DOMAIN: the authDomain of your Firebase project.

    You can find these values from your app's Firebase project configuration.

    A Firebase App is a container-like object that stores common configuration and shares authentication across Firebase services. After you initialize a Firebase App object in your code, you can add and start using Firebase services.

Access Identity Platform in your Javascript

Now that you have initialized the Firebase SDK, you can use it anywhere in your app. For example, here is an app that attempts to sign in a hard-coded user and display the result on a web page.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

Replace the following:

  • API_KEY: the apiKey of your Firebase project.
  • AUTH_DOMAIN: the authDomain of your Firebase project.
  • EMAIL_ID: the user email address you created earlier in this guide.
  • PASSWORD: the user password you created earlier in this guide.

Use a module bundler for size reduction

The Firebase Web SDK is designed to work with module bundlers to remove any unused code (tree-shaking). We strongly recommend using this approach for production apps. Tools such as the Angular CLI, Next.js, Vue CLI, or Create React App automatically handle module bundling for libraries installed through npm and imported into your codebase.

For example, you can use Webpack to generate a dist folder containing your bundled application and dependency code. See Using module bundlers with Firebase for more information.

Import your Javascript into your page

  1. Create a new file named index.html.

  2. Add two basic HTML containers and import the bundled js.

    <script defer src="js/bundled.js"></script>
    <div>Identity Platform Quickstart</div>
    <div id="message">Loading...</div>
    
  3. Launch index.html in your web browser. A welcome message displaying your user's email appears.

SDK v8 (legacy)

Create a web page

  1. On your local machine, create a new file named index.html.

  2. In the HTML file, add two HTML containers:

    <div>Identity Platform Quickstart</div>
    <div id="message">Loading...</div>
    

Initialize the Identity Platform Client SDK with your API key

  1. In the Google Cloud console, go to the Identity Providers page.

    Go to Identity Providers

  2. Click Application setup details.

  3. Copy the initialization code into index.html.

Sign in the user

  1. To sign in the user, copy the following code into index.html:

    <script>
      var email = "EMAIL_ID";
      var password = "PASSWORD";
    
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
        } else {
          document.getElementById("message").innerHTML = "No user signed in.";
        }
      });
    
      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        document.getElementById("message").innerHTML = error.message;
      });
    </script>
    

    This code calls signInWithEmailAndPassword() and then processes the result with the onAuthStateChanged() callback.

    Replace the following:

    • EMAIL_ID: the email for the user that you created earlier
    • PASSWORD: the password for the user that you created earlier
  2. Open index.html in your web browser. A welcome message displaying your user's email appears.

There is a limit on unsuccessful user sign-in attempts. Several rapid, unsuccessful sign-in attempts temporarily locks the user out of their account.

For more information on other Identity Platform limits, see Quotas and limits.

Clean up

To avoid incurring charges to your Google Cloud account for the resources used on this page, follow these steps.

Delete the provider and user

If you used an existing Google Cloud project, delete the provider and user that you created to avoid incurring charges to your account:

  1. In the Google Cloud console, go to the Identity Providers page.

    Go to Identity Providers

  2. To delete the provider, click Delete next to the name of the provider. To confirm, click Delete.

  3. In the Google Cloud console, go to the Users page.

    Go to Users

  4. To delete the user that you created, click Delete next to the name of the user. To confirm, click Delete.

Delete the project

The easiest way to eliminate billing is to delete the project that you created for the tutorial.

To delete the project:

  1. In the Google Cloud console, go to the Manage resources page.

    Go to Manage resources

  2. In the project list, select the project that you want to delete, and then click Delete.
  3. In the dialog, type the project ID, and then click Shut down to delete the project.

What's next

In a real app, your users would sign up using a dedicated registration page, and then sign in by entering their emails and passwords. Identity Platform offers a pre-built authentication UI that you can use for these pages, or you can build your own. You might also want to support additional sign-in methods, such as social providers (like Facebook or Google), phone numbers, OIDC, or SAML.

Learn more about the following: