Firebase Auth - customized redirect domain prompts NET::ERR_CERT_COMMON_NAME_INVALID warning

Question

I'm using Firebase Authentication for my web app, and customizing the redirect domain for Firebase Authentication's Google Sign-In feature so that Google's authentication page will

show Continue to: https://auth.mydomain.com,

instead of Continue to: https://my-app-12345.firebaseapp.com.

So I did four steps according to instructions on Firebase's documentation:

(1) Create a CNAME record for auth.mydomain.com that points to my-app-12345.firebaseapp.com

(2) Add auth.mydomain.com to the list of authorized domains in the Firebase console

(3) In the Google OAuth setup page, whitelist the URL of the redirect page which is https://auth.mydomain.com/__/auth/handler

(4) Edit my app's JavaScript code which initializes Firebase library:

var config = {
  ...
  // from 'authDomain: my-app-12345.firebaseapp.com,'
  authDomain: 'auth.mydomain.com',
  ...
};

After that, however, when my app invokes firebase.auth().signInWithRedirect(provider) method, web browser will show privacy warning like the following:

Your connection is not private

Attackers might be trying to steal your information from auth.mydomain.com (for example, passwords, messages, or credit cards). Learn more

NET::ERR_CERT_COMMON_NAME_INVALID

...

This server could not prove that it is auth.mydomain.com; its security certificate is from firebaseapp.com. This may be caused by a misconfiguration or an attacker intercepting your connection.

Proceed to auth.mydomain.com (unsafe)

And certificate information is as follows:

firebaseapp.com

Issued by: Google Internet Authority G3

Expires: Tuesday, 13 November 2018

This certificate is valid.

Details

Subject Name

Country: US

State/Province: California

Locality: Mountain View

Organization: Google Inc

Common Name: firebaseapp.com

And below is URI:

https://auth.mydomain.com/__/auth/handler?apiKey=apiKey&appName=%5BDEFAULT%5D&authType=signInViaRedirect&providerId=google.com&scopes=profile&redirectUrl=https%3A%2F%2Fwww.mydomain.com%2Flogin&v=5.0.4

Why does customizing the redirect domain for Google Sign-In prompt NET::ERR_CERT_COMMON_NAME_INVALID warning, and how should I do to avoid the warning message from prompting, e.g. adding Subject Alternative Names into the certificate, using auth.mydomain.com's own certificate?

By the way, in the above warning page, if Proceed to auth.mydomain.com (unsafe) is clicked, authentication will work as expected.

Answer 1

Because auth.mydomain.com points to my-app-12345.firebaseapp.com via CNAME record, host of firebaseapp.com should provision SSL certificate for auth.mydomain.com. It has to be done in Firebase Hosting page even if my-app-12345 is not using Firebase Hosting. Here is step-by-step method for doing that based on Firebase's documentation:

1. In Firebase project my-app-12345's console, click Hosting on the side menu.
2. When Set up hosting pop-up appears, click Continue. Then click Finish.
3. In Hosting page, click Connect domain.
4. When Connect domain pop-up appears, enter auth.mydomain.com. Then click 'Redirect auth.mydomain.com to an existing website' checkbox. Then enter my-app-12345.firebaseapp.com. Then click Continue.
5. When 'Add the TXT records below to your DNS provider to verify you own mydomain.com' pop-up appears, follow the instruction. And click Verify. (Verifying may take some minutes). Then click Finish.

Now auth.mydomain.com will be appeared in domain section with Pending status. It will soon be changed to Connected. And after some time, the NET::ERR_CERT_COMMON_NAME_INVALID warning issue will be gone.

P.S. With help of Firebase technical support team, I have got the answer to my own question.

Answer 2

just to clarify, as of Jan 6th 2020, the method above (using 'Redirect' within Firebase Hosting) doesn't work anymore.

Following something written in https://levelup.gitconnected.com/how-to-connect-a-domain-to-your-firebase-project-cd47373bad79 - we can see for Authentication, we need to use "Custom Domains" and not "Redirect"

This is because if redirection is used, the SSL signed between the exit and entry points of the custom domain and Google's authentication servers will fail the handshake.

In other words:

If you are setting it up for the first time:

1. In Firebase project my-app-12345's console, click Hosting on the side menu.

2. When Set up hosting pop-up appears, click Continue. Then click Finish.

3. In Hosting page, click Connect domain.

4. When Connect domain pop-up appears, enter auth.mydomain.com. Then do not tick 'Redirect auth.mydomain.com to an existing website' checkbox. Then enter my-app-12345.firebaseapp.com. Then click Continue.

If you've already setup a Redirect domain, and you cannot get it to work - you can simply edit the entry, and change to a "Custom" type.

Wait 10 ~ 30 minutes once that has changed to have this function properly.