CODEWITHSUNDEEP
firebasefirebase-authentication
Stepan Parunashvili
Stepan Parunashvili

Reputation: 2845

Custom authDomain in Firebase

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?

Upvotes: 33

Views: 26335

Answers (3)

kip2
kip2

Reputation: 6863

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.

Upvotes: 43

Eden Chen
Eden Chen

Reputation: 19

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

Upvotes: 1

Michael Bleigh
Michael Bleigh

Reputation: 26313

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.

Upvotes: 17

Related Questions