Firebaseui-web: Can the project domain displayed in account chooser be changed?

Created on 7 Aug 2017  路  7Comments  路  Source: firebase/firebaseui-web

image

Can the project address displayed in account chooser be changed without having to host the domain on _Firebase hosting_?

Most helpful comment

Okay, I didn't understand the explanation very well mainly because we don't host on Firebase so it didn't click with me to use the Firebase Hosting to set it up properly.

For other people, here's what you need to do even if you don't host on Firebase Hosting, but want your custom domain to be associated with the authentication. It consists of two main steps:

  1. link your custom domain to the firebase (auth) app

    1. on https://console.firebase.google.com/

    2. go to Firebase Hosting for your project

    3. if you don't have any Firebase Hosting set up, click through the "get started" tutorial (which is super unintuitive) to get to the dashboard

    4. click the "connect domain" button

    5. add your domain/subdomain (e.g. auth.example.com)

    6. use the supplied TXT record, and add it to your domain registrar DNS record for the respective domain.

    7. also point your domain to firebase servers by adding an A DNS record

  2. add an Authorized redirect URI

    1. go to https://console.developers.google.com/apis/credentials/

    2. under the OAuth 2.0 client IDs, go to the the entry that was auto-created for your firebase auth app

    3. under the Authorized redirect URIs, add https://auth.example.com/__/auth/handler

Takes a few hours to propagate and for google to issue an SSL certificate for the domain.

All 7 comments

You can use a custom domain with Firebase Hosting. Once you get that working, update the authDomain to point to your custom domain. A developer documented this in stackoverflow: https://stackoverflow.com/questions/44815580/how-to-replace-the-myapp-123-firebaseapp-com-with-my-custom-domain-myapp-com

But changing the authDomain to our local server will require our server to effectively become the auth server, since the client will send the auth request to it (http://ourdomain.com/__/auth/iframe?apiKey=....).

Is there a docs explaining how to set that up, or am I missing something here?

The iframe and handler page must be the same ones hosted by Firebase. You can customize the domain there (Firebase Hosting supports that).
It's pretty straightforward. You point a custom domain www.example.com -> example.firebaseapp.com (hosted by Firebase). You there update authDomain from example.firebaseapp.com to www.example.com. The same files example.firebaseapp.com/__/auth/* will be served.

Okay, I didn't understand the explanation very well mainly because we don't host on Firebase so it didn't click with me to use the Firebase Hosting to set it up properly.

For other people, here's what you need to do even if you don't host on Firebase Hosting, but want your custom domain to be associated with the authentication. It consists of two main steps:

  1. link your custom domain to the firebase (auth) app

    1. on https://console.firebase.google.com/

    2. go to Firebase Hosting for your project

    3. if you don't have any Firebase Hosting set up, click through the "get started" tutorial (which is super unintuitive) to get to the dashboard

    4. click the "connect domain" button

    5. add your domain/subdomain (e.g. auth.example.com)

    6. use the supplied TXT record, and add it to your domain registrar DNS record for the respective domain.

    7. also point your domain to firebase servers by adding an A DNS record

  2. add an Authorized redirect URI

    1. go to https://console.developers.google.com/apis/credentials/

    2. under the OAuth 2.0 client IDs, go to the the entry that was auto-created for your firebase auth app

    3. under the Authorized redirect URIs, add https://auth.example.com/__/auth/handler

Takes a few hours to propagate and for google to issue an SSL certificate for the domain.

Thanks for sharing the instructions for others to use, @dwelle.

also requires to update the authDomain in firebase config as well.

6. use the supplied TXT record, and add it to your domain registrar DNS record for the respective domain.

Can someone please explain this. How to set the custom domain name if the site is hosted on GitHub pages? How to get this - "Choose an account to continue to example.github.io"?

Was this page helpful?
0 / 5 - 0 ratings