Using a custom domain for firebase OAuth screens

A step by step guide on how to use a custom domain on firebase Oauth screen when using google's signin provider.

You are creating a website and would like to leverage google's firebase OAuth sign-in providers. This guide walks through the steps necessary for customising the sign in screen. By following this guide, you will be able to:

1. remove the *.firebaseapp.com domain from the sign in page

2. add links to your site's privacy policy and terms and conditions to the sign in page

3. add your sites logo to the sign in page (this would require verification)

An example screenshot showing what a sign in page looks like before the changes.

Step 1: Verify your custom domain on GCP

Ensure your firebase project is selected in GCP. This should be the same project created in firebase console and the same project your site is publishing google metrics and analytics to. Failure to do this might result in a misconfigured project. You could be modifying a completely different project on your account.

Head over to GCP and in the navigation menu select APIs & Services > Domain verification. Follow through the steps for adding your custom domain to Google Cloud Platform.

Step 2: Create and host a subdomain in firebase hosting

Head over to Firebase console and select your project. In the Build section select Hosting. Click through the steps to install firebase cli, initialise your project and deploy to firebase hosting. You don't actually have to run any of the suggested commands for what we are trying to do. Finally, select Continue to console.

Once in the Hosting console, select Add custom domain (e.g., authorization.yourdomain.com) and follow the wizard. You will need to verify ownership of the domain.

Step 3: Customize the authorized redirect uris

Head over to GCP and select APIs & Services > Credentials and in the OAuth 2.0 Client IDs section, edit your OAuth Client.

Ensure your custom auth domain (from step 2) is added as an authorized redirect URI. https://authorization.yourdomain.com/__auth/handler.

Ensure also that your naked domain (e.g., https://yourdomain.com and https://www.yourdomain.com) is an authorized javascript origin. This depends on where your website is served.

Save the OAuth Client edit form.

Step 4: Update your OAuth Consent Screen

In the GCP under APIs & Services > OAuth consent screen, select EDIT APP

Update the application name if required and in the App domain section, add links to your website's home page, terms and conditions and privacy policy.

Ensure your domain is listed as an Authorized domain in the Authorized domains section.

If you wish to add a logo, then upload a logo. Note that this would require verification and might take a few weeks.

Save and Continue the form - while accepting defaults. If you need additional restricted scopes you will need to justify that to google and go through the verification process.

Step 5: Update your application's firebase authDomain config

Head to you application code configuration. Look for the authDomain firebase config property and update it to authorization.yourdomain.com

That's it! Congrats. You have completed the process of customising the firebase google sign in page.