Adding a URL to OAuth client ID

This lesson will teach us how to add a URL to our OAuth client ID in the Google Cloud Console. This is a crucial step, especially when setting up authentication methods such as Google Sign-In with Firebase. Adding the correct URLs ensures secure communication between our app and the authentication provider.

Navigate to Google Cloud Console

  1. We open our web browser and go to the Google Cloud Console.

  2. We select the project associated with our Firebase project.

Enable the people API

  1. In the Google Cloud Console, navigate to the “Enable APIs & Services > Library” section.

  2. Search for “People API” using the search bar.

  3. Click “Google People API” from the results.

  4. Click the “Enable” button to enable the API for our project.

Access the credentials section

  • In the left-hand menu, navigate to “APIs & Services > Credentials.”

Locate the OAuth 2.0 client ID

  1. Look for the “OAuth 2.0 Client IDs” section.

  2. Find the web client ID associated with our project.

Edit the authorized redirect URIs

  1. Click the pencil/edit icon next to the web client ID we want to edit.

  2. Look for the “Authorized redirect URIs” section.

Add the URL

  1. Click the “Add URI” or similar button.

  2. Enter the URL of our application’s endpoint that handles authentication callbacks.

    1. For Firebase authentication, this is often our Firebase Hosting or the URL where our app is hosted. For this case, it will be the output URL of the SPA widget we are using, i.e., https://*.educative.run.

Note: The asterisk in the URL is the wildcard, and Google doesn’t accept wildcards, so we have to put the exact URL in the SPA widget before we run it.

Save changes

  • After adding the URL, save the changes.

Verify configuration

  1. Ensure that the added URL matches the endpoint in our application code.

  2. Verify that other configured URLs are accurate and up-to-date.

Congratulations! We have successfully added a URL to our OAuth client ID in the Google Cloud Console. This step is crucial for securing authentication flows between our app and Google services, especially when integrating with Firebase Authentication.

Get hands-on with 1400+ tech skills courses.