30

I am using Firebase's built-in oAuth feature for an SPA.

This SPA is on a domain of it's own, say foobar.com

The problem is, when the oauth popup is opened, the old foobar.firebaseapp.com domain is used, instead of the new foobar.com domain

My init looks like this 

firebase.initializeApp({
  apiKey: '...',
  authDomain: 'foobar.firebaseapp.com',
  databaseURL: 'https://foobar.firebaseio.com',
  storageBucket: 'foobar.appspot.com',
  messagingSenderId: '123456'
})

I am guessing authDomain may have something to do with it, but if I change it to foobar.com I get the error:

 code: "auth/popup-closed-by-user", message: "The popup has been closed by the user before finalizing the operation."}

In short, is there a way I am missing to customize the oAuth url for Firebase?

Stepan Parunashvili
  • 2,627
  • 5
  • 30
  • 51
  • This worked for me https://stackoverflow.com/questions/37344066/firebase-this-domain-is-not-authorized/48475438#48475438 – isawk Jan 27 '18 at 11:45

3 Answers3

33

I saw a lot of answers in Google OAuth 2 authorization - Error: redirect_uri_mismatch that pointed to the need to set up custom domains authorization, checking HTTP/S URI schemes, etc (I had followed most of them, including making sure my custom domain was authorized under Firebase Hosting, Firebase Authentication and even on the GCP Identity Platform "Authorized Domains" settings (https://console.cloud.google.com/customer-identity/settings?project=\<your-gcp-project-id>). That is, none of the linked answers seemed to be specific to Firebase Auth so here is my experience, FWIW:

The following Authorisation Error message was showing up on the "Sign in with Google" popup:

Error 400: redirect_uri_mismatch
The redirect URI in the request, https://<project-id>.firebaseapp.com/__/auth/handler, does not match the ones authorized for the OAuth client. To update the authorized redirect URIs, visit: https://console.developers.google.com/apis/credentials/oauthclient/${your_client_id}?project=${your_project_number}

After a lot of digging, I realized I needed to set the value of "Authorized redirect URIs" to https://<my-auth-subdomain>.mydomain.org/__/auth/handler, referencing my custom domain. See the below attachments.

OAuth Client ID settings Google APIs Credentials settings

It wasn't immediately obvious to me, but I also had to make the above settings on the OAuth 2.0 Client ID that was auto generated by Google Service. Following this related answer, I had initially created a new client ID that didn't end up making any difference.

kip2
  • 6,473
  • 4
  • 55
  • 72
  • 3
    You saved me so much time! – Joshua Hester Dec 16 '20 at 00:59
  • Hey, I've gone through these steps (though I didn't have a "Web client" entry in the OAuth 2.0 Client IDs list), making sure my authDomain value matches one of the URIs I have listed in Authorized Redirect URIs, and it's been days now since I did this (far beyond the mins to hours it says it should take). I'm still getting the permissions error. Any ideas? – David Markowitz Mar 22 '23 at 19:37
  • @DavidMarkowitz I'm not sure why the "Web client" row would be missing for you cos it's typically auto-created by Google. Perhaps follow up with the GCP support team to see if something changed? – kip2 Mar 23 '23 at 10:37
  • Ok. At what point did the Web client get created? Right after you added your client IDs? I also noticed you have API keys auto generated by firebase, something else I don't have. Did you do something in firebase to generate those? – David Markowitz Mar 24 '23 at 22:07
  • I'm not sure when the web client got created, it must've been when the web app was generated (mine was created from the Firebase console) – kip2 Mar 29 '23 at 12:20
  • Any idea how this could work on localhost? It appears to be impossible to set `authDomain` to `localhost:8080` - setting any port will crash Firebase.. – Stefan Falk Apr 19 '23 at 12:36
16

The authDomain relies on specific scripts being available on that domain. If your Single-Page App is hosted on Firebase Hosting with a custom domain, you will be able to use that domain as the authDomain.

Alternatively, you could set up a custom domain for Firebase Hosting on a subdomain of your domain e.g. auth.foobar.com and you'd then be able to use auth.foobar.com as your authDomain.

There is currently no support for using a non-Firebase-Hosting domain as your authDomain.

Michael Bleigh
  • 25,334
  • 2
  • 79
  • 85
  • 1
    Hi Michael, My custom domain is on firebase hosting, but it still has this issue. Is there some way I could debug further? – Stepan Parunashvili Nov 30 '16 at 23:49
  • I'd suggest [reaching out to support](https://firebase.google.com/support) to get some specific debugging help for your particular site. – Michael Bleigh Dec 01 '16 at 18:44
  • 1
    This worked for me https://stackoverflow.com/questions/37344066/firebase-this-domain-is-not-authorized/48475438#48475438 – isawk Jan 27 '18 at 11:44
  • 1
    That is not the case, I was able to use an `authDomain` hosted by another provider perfectly fine. See the answer by @kip2 below – Joshua Hester Dec 16 '20 at 01:00
  • @michael-bleigh which specific scripts should be available on authDomain – puzzled Feb 11 '23 at 02:58
  • Hi @MichaelBleigh, I was wondering about this same exact question and this is the only place I found so far that mentioned this. Is "There is currently no support for using a non-Firebase-Hosting domain as your authDomain" still applicable ? I feel like it is, but I had trouble finding confirmation. – Pascal Delange Aug 09 '23 at 15:56
  • Yes, that's correct. – Michael Bleigh Aug 10 '23 at 22:44
1

Go to Authentication --> Sign-in Method, you will put you custom domian under Authorized domains section

Eden Chen
  • 19
  • 2