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?
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.
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.
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.
Go to Authentication --> Sign-in Method, you will put you custom domian under Authorized domains section
Related
I'm unable to customize the authorisation callback URL to my custom domain when adding a new SAML provider in Google Cloud Identity platform. I took the following steps:
I successfully connected my domain via the firebase console: the status says 'Connected', and the SSL certificate has been provisioned.
In Identity Platform, I added my custom domain to the authorized domains on the project level.
I'm trying to add a SAML provider for a tenant.
I cannot edit the callback url in the cloud console. Also, when adding the provider with a custom url via a client SDK, the provider is created, but again with the default url.
Any pointers?
From the documentation:
This is expected.
The real issue is that the docs give the understanding of changing the callback URL in the console but you should change the authDomain in your code rather than in the GCP console and when making the request, you will see the callback URL using your custom domain.
For example, if in your code you have:
const config = {
apiKey: "dsfdsDSSDDSFSDfsdf5ds14f5s",
authDomain: "PROJECT_ID.firebaseapp.com",
};
You only have to change the authDomain for example to:
const config = {
apiKey: "dsfdsDSSDDSFSDfsdf5ds14f5s",
authDomain: "login.mydomain.com",
};
The only condition to make this work is that the domain you want to use is in the Authorized domains.
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?
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.
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.
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.
Go to Authentication --> Sign-in Method, you will put you custom domian under Authorized domains section
I am using Firebase Auth signInWithPopup() which is absolutely great. But
when initially configured, the popup reads:
Choose an account to continue to myApp-123.firebaseapp.com
I would really like it to read:
Choose an account to continue to myApp.com
How can I make the popup show my own domain?
In my solution that follows I should say that the steps I followed worked. It is possible that I did something that it not absolutely required, but to my knowledge and at this time, I have not broken anything.
This workflow (and the documentation) is a bit broken up because you must adjust both your Google Cloud Platform (GCP) credentials and the Firebase authentication. Documentation was provided by each side of this workflow but I was not able to find a document that covered the entire workflow to make this substitution.
GCP Console Setup
I first adjusted my GCP credentials for the OAuth Client:
Go to the GCP console > APIs & Services > Credentials page (https://console.cloud.google.com/apis/credentials?project=_ and select your project)
At the bottom of the page, find "OAuth 2.0 client IDs". There should be an entry titled "Web client (auto created by Google Service)"
To the right side of page click on the edit icon (pen), which opens the configuration page.
Under "Authorized JavaScript origins", you should see your yourFirebaseApp.firebaseapp.com domain. Click "+ Add URI" and add your custom URI. This should be an "https" domain, so use https://myApp.com
Under "Authorized redirect URIs", you should see https://yourFirebaseApp.firebaseapp.com/__/auth/handler. (The __/auth/handler bit on the tail is the auth callback that Firebase provides). Click "+ Add URI" and add your domain, with __/auth/handler at the end. (For example: https://myApp.com/__/auth/handler)
Click Save
Go to the OAuth Consent Screen (https://console.cloud.google.com/apis/credentials/consent/edit?project=_). Add your custom domain to "Application Homepage link", and fill in the "Application Name" and "Logo", and "Application Privacy Policy link" with custom values for your app.
Firebase Console Setup
Then, you'll need to add your custom domain to the Firebase auth authorized domain list:
Go to the Firebase Console > Authentication > Sign-in Methods page (https://console.firebase.google.com/project/_/authentication/providers and select your project)
Under "Authorized Domains" you should see localhost and the default yourFirebaseApp.firebaseapp.com domain. Click the "Add Domain" and enter your custom domain name, then click add.
Web App Setup
You will likely remember the block of code that you copied from your firebase project and pasted into the code from which you compile and deploy your Web App. (Some people use the hosting default init.js script - if you do, go back and setup your app using the config snippet instead)
Find the "authDomain" field in the code snippet, and change it to your custom domain, then re-deploy.
This procedure worked for me and my project, I have posted this in the hopes that these instructions may be refined via feedback from others performing this or similar operations.
I asked firebase support and got the following reply. Items in italics are my additions. This is more or less the same as Done's answer but with a custom domain. You do not need to host your app on Firebase.
--
Hi Jayen,
Thank you for reaching out. I'll be happy to assist you.
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.com) and do not redirect it. Firebase will prompt you to add a DNS entry and take of the SSL certificate automatically.
After connecting your custom domain to your Firebase project, you should also follow the steps below:
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
Replace the project ID with your custom domain. It will look something like: https://yourdomain.com/__/auth/handler
Go to the GCP Console > Select project > API Manager > Credentials > Add the link in #2 to the 'Authorized redirect URIs'
Then ensure to use yourdomain.com as the authDomain in your app's configuration instead of firebase-project-id.firebaseapp.com
firebase.initializeApp({
apiKey: ....,
authDomain: 'yourdomain.com',
...
});
Let me know if you have any other questions regarding this.
Regards,
Aye
--
In my case, yourdomain.com is where I host my site, so I used app.yourdomain.com where I needed it.
Firebase Hosting URL
handler url: https://app.yourdomain.com/__/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.com"
This error occurs when our users "Block third-party cookies and site data".
To replicate the error, go to:
Check your Chrome browser "Block third-party cookies and site data" reference in this guide
Go to https://www.deeptent.com
Click SIGN IN
Next you will see a blank screen. And if you open up the browser developer console you will see this error:
We always advise our users to Uncheck the blocking of third-party cookies and site data; however, some users still prefer to block it.
One can still sign in to their Gmail with this blocked. Interestingly, why can't our users sign in using the Firebase-Google OAuth provided with their third party cookies & site data blocked?
We are built with Angular2 and Firebase. Is there no way that the users can still authenticate with third-party cookies and site data blocked?
The domain you're using is deeptent.com, but the domain that firebase is authenticating against and setting cookies from is your .firebaseapp.com domain. So, yes, the cookies are considered third-party. The firebase folks really should take a harder look at how they are connecting custom domains in the firebase hosting setup. Also, see here:
Use Google Firebase Authentication without 3rd Party Cookies
I had the same issue with firebase and Angular.
In your environment.ts file, look for:
firebase: {
authDomain: '<domain>.firebaseapp.com',
And in chrome settings chrome://settings/content/cookies, add the following string to the cookies whitelist:
https://[*.]firebaseapp.com
This error occurs when you're in Incognito Mode in most browsers. With a custom firebase domain.
2021 Solution
You can change the authDomain to use either the Same Domain OR a Sub Domain as the hosted application. This avoids the cookie error.
Custom Hosting Domain
If you're using a custom domain, you might want a setup like this:
mydomain.com -> Hosted website
auth.mydomain.com -> Auth domain (firebaseConfig.authDomain)
To set this up you need to do the following:
Firebase Console > Authentication > Authorized domains Add auth.mydomain.com.
With your own DNS management, add the following DNS record:
TYPE = CNAME
HOST = auth.mydomain.com
VALUE = my-project-id.firebaseapp.com
TTL = 3600
Firebase Console > Hosting > Add custom domain (add auth.mydomain.com)
Then in the firebaseConfig in your app change the value of authDomain to use auth.mydomain.com
Note
This solution won't work when running on localhost, as the authDomain won't be a subdomain of localhost.
The easiest solution in this case is to allow 3rd party cookies on your local domain, here's how to do it in Chrome:
Go To: chrome://settings/cookies
Not recommended, because this solution won't work for everyone
Chrome Only:
Open content settings in chrome Content Settings > Cookies
and select cookies. In there, find Block third party cookies and disable it.
Note: every other browser probably has this option, its only a matter of looking in the right place :)
The solution is much simple.
Assuming you have hosted your app on Firebase Hosting and the example.com is already hosting your app that include the auth:
Your auth domain should looks like [projectid].firebaseapp.com
Change your authDomain for the Firebase config:
config = {
apiKey: ...,
authDomain: example.com,
databaseURL: ...,
projectId: ...,
storageBucket: ...,
appId: ...,
}
Allow a new redirect url for the OAuth ID client:
From console.developers.google.com > your project > ids > ID clients OAuth 2.0
Add https://example.com/__/auth/handler to the list of authorized redirect url
Deploy your hosting to include the change in step 1.
This method does not need to add a CNAME which would probably not work due to missing certificate for https.
Official doc https://firebase.google.com/docs/auth/web/google-signin
Side note: don't forget to also update your other authentification methods such as GitHub, Facebook, etc to add this redirect url to the list.
let config = { signInFlow: "popup", signInSuccessUrl: "/xxxx", signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID], // Other config options... };
You can use popup flow where third party cookies disabled.
I imported Firebase JS v3 API and used to initialize Firebase using:
firebase.initializeApp(config);
However the app failed to load correctly via web browser on localhost, resulting in the following error:
Error: This domain is not authorized for OAuth operations for your
Firebase project. Edit the list of authorized domains from the
Firebase console.
firebase.js:71:1333
I solved the problem by adding the localhost domain to OAuth redirect domains (within SETUP SIGN IN METHOD on the Auth tab of Firebase console).
in firebase console Auth --> Authorised domains
must equal (in Google cloud console -- > API & Services --> credentials ) :
must equal (in api config) :
Solution which worked for me after trying out all the options on the listed above and on other sites regarding using FireBase oAuth was the following:
login at https://console.cloud.google.com
Go to APIs & Services > Credentials
Once here, locate API Key you are using in your app that connects to FireBase
Now add your custom domain to HTTP Referrers
For android or ios or having your application on all three mediums, you will need to create API keys per medium.
Make sure the "authDomain" in your config matches the one in your firebase console. If you're running the app on localhost, make sure it's set to localhost and localhost exists on your firebase console.
Auth -> Sign In Method -> OAuth redirect domains
var config = {
apiKey: "...",
authDomain: "...", // this should match the one on your firebase console
databaseURL: "...",
storageBucket: "",
};
firebase.initializeApp(config);
Firebase Users
For me the source of the error was that the domain was not added in the firebase console.
Here is an image in the firebase console to add the custom domain for your website:
Firebase now has localhost as Authorized domains by default but if you are facing this for a custom domain, here is a quick solution.
Go to Google console Authentication tab > Settings > Authorized domains
Add your domain
(PS - About version, I'm using Firebase 9.9.3 on React.)
Problem Authorised domain Firebase Locahost OAUTH2
If you are using Google Chrome you can see a problem with the Identity Toolkit API
DISABLE. You need to enabled this API on the google cloud project to get OAUTH servcies in Firebase project.
https://console.developers.google.com/apis/api/identitytoolkit.googleapis.com/overview?project=project-id
For those having this issue in Heroku:
Make sure you keep the authDomain property with the same value you got from Firebase.
DO NOT change this to the current Heroku domain.
Not really specific to Android, but check the address in your actionCodeSettings.
actionCodeSettings.url must be correct and whitelisted.
Authenticate with Firebase Using Email Link in JavaScript
None of the above answers worked for me, as I already had localhost in Authorized domains list. For me the problem was incorrect API key, I must have somehow deleted one of the characters from it. I got a more descriptive (or rather - not misleading) error message when I changed to signInWithPopup to signInWithRedirect. Possibly the same problem might happen when the API key is expired.
None of the above solutions worked for me but this did.
Go to Google console Authentication tab > Sign In Method > Authorized Domains
Add 127.0.0.1
localhost was already in my Authorized Domains but in my case I needed to add 127.0.0.1 as well
The important point is.. you must add the yourprojectid.firebaseapp.com domain to the authorized domains.. not your real domain name. That worked for me.
I got this problem also and the domain was like this:
127.0.0.1:5173/
I just turned it into: localhost:5173 and it ran
without a problem.