PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Sunday, September 4, 2022

[FIXED] How to change the app name for Firebase authentication (what the user sees)

 September 04, 2022     authentication, firebase, ionic-framework, oauth-2.0     No comments   

Issue

Thanks to Firebase v 3.9.0, my social OAuth is working great in my ionic app. I have one little change I'd like to make. When prompted to login, it says "Sign in to continue to my-real-appname-12345f.firebaseapp.com."

How to I change that to something more user-friendly like, you know, the app's actually name.

To clarify, I am using Firebase to handle authentication for both Google and Facebook. The message is the same for both.


Solution

I asked Firebase support and got the following reply. Items in italics are my additions.

In order to update firebase-project-id.firebaseapp.com in the OAuth consent screen, you need a custom domain with Firebase Hosting (Firebase Console > Hosting > Connect Domain). This is because https://firebase-project-id.firebaseapp.com/__/auth/handler is hosted by Firebase Hosting. You need to point your custom domain to firebase-project-id.firebaseapp.com.

When connecting the custom domain, if you are not hosting your app on Firebase, use a new subdomain (e.g. app.yourdomain.example) and do not redirect it. Firebase will prompt you to add an entry on your DNS server and take care of the SSL certificate automatically.

After connecting your custom domain to your Firebase project, you should also follow the steps below:

  1. Go to the Firebase Console > Select Project > Authentication > Sign-in method > Facebook > Copy the URL under 'To complete setup, add this OAuth redirect URI to your Facebook app configuration.'
  • It will look something like https://firebase-project-id.firebaseapp.com/__/auth/handler
  1. Replace the project ID with your custom domain. It will look something like: https://yourdomain.example/__/auth/handler

  2. Go to the GCP Console > Select project > API Manager > Credentials > Add the link in #2 to the 'Authorized redirect URIs'

  3. Then ensure to use yourdomain.example as the authDomain in your app's configuration instead of firebase-project-id.firebaseapp.com

     firebase.initializeApp({
         apiKey: ....,
         authDomain: 'yourdomain.example',
          ...
     });
    

In my case, yourdomain.example is where I host my site, so I used app.yourdomain.example where I needed it.

  • Firebase Hosting URL
  • handler URL: https://app.yourdomain.example/__/auth/handler
  • GCP Credentials
    • Choose the right one under OAuth 2.0 client IDs. The client ID will match the one you have configured Firebase with in your code.
  • authDomain: "app.yourdomain.example"


Answered By - Jayen
Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing