Using a custom domain for firebase OAuth screens
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:
- remove the *.firebaseapp.com domain from the sign in page
- add your sites logo to the sign in page (this would require verification)
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.
Ensure also that your naked domain (e.g.,
Save the OAuth Client edit form.
Step 4: Update your OAuth Consent Screen
In the GCP under APIs & Services > OAuth consent screen, select
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
That's it! Congrats. You have completed the process of customising the firebase google sign in page.