I'm building a site with emberfire and using firebase. Everything seems to be set up fine regarding credentials, and I can read/write to the firebase database while developing locally, but every time I try to authenticate via the Google Popup it pops up fine with my Google accounts listed, and when I select my account it errors with this error object:
code: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred."
I assume I'm simply missing a setting somewhere but for the life of me I cannot find it. Here's the code to get the popup and response:
const provider = new firebase.auth.GoogleAuthProvider();
this.firebaseApp.auth().then(auth => {
/* Firebase SDK calls */
auth.signInWithPopup(provider).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
});
I am using EmberJS with emberfire.
In my environment I had host: 'api', and when removing that authentication works, so it must be one of the adapters that is used.
Related
Well, I'm really lost here so any help would be great. My app works with a DOTNET6 API backend and a Vue3 frontend.
I'm registering users via Google Sign In directly from my frontend (Vue3) with this code:
async googleLogIn() {
const provider = new GoogleAuthProvider;
var gUser;
await signInWithPopup(getAuth(), provider)
.then((result) => {
gUser = result.user;
console.log(gUser);
})
.catch((error) => {
console.log(error);
});
}
The user gets correctly saved in Firebase, and that should be all. The thing is, even though I'm not interacting with my DOTNET API, said API gets shut down without specifying the error. The message displayed in VS Debug Console is : ...\my_api.exe (process 32400) exited with code -1.
I believe the ports used by my API might be the problem (already tried changing them but it keeps failing), but I don't understand why the Google Sign In would interfere with my local API.
Manifest version 3 for Chrome extensions have been killing me lately. Been able to navigate around it so far, but this one has really stumped me. I'm trying to use Firebase authentication for a Chrome extension, specifically with 3rd party auth providers such as Google and Facebook. I've setup the Firebase configuration for Login with Google and created a login section in the options page of the Chrome extension and setup the Firebase SDK.
Now, there are two login options when using an auth provider, signInWithRedirect and signInWithPopup. I've tried both of these and both have failed for different reasons. signInWithRedirect seems like a complete dead end as it redirects to the auth provider, and when it attempts to redirect back to the chrome-extension://.../options.html page, it just redirects to "about:blank#blocked" instead.
When attempting to use signInWithPopup, I instead get
Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb776751' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
In v2, you could simply add https://apis.google.com to the content_security_policy in the manifest. But in v3, the docs say
"In addition, MV3 disallows certain CSP modifications for extension_pages that were permitted in MV2. The script-src, object-src, and worker-src directives may only have the following values:"
self
none
Any localhost source, (http://localhost, http://127.0.0.1, or any port on those domains)
So is there seriously no way for a Google Chrome extension to authenticate with a Google auth provider through Google's Firebase? The only workaround I can think of is to create some hosted site that does the authentication, have the Chrome extension inject a content script, and have the hosted site pass the auth details back to the Chrome extension through an event or something. Seems like a huge hack though and possibly subject to security flaws. Anyone else have ideas??
Although it was mentioned in the comments that this works with the Google auth provider using chrome.identity sadly there was no code example so I had to figure out myself how to do it.
Here is how I did it following this tutorial:
(It also mentions a solution for non-Google auth providers that I didn't try)
Identity Permission
First you need permission to use the chrome identity API. You get it by adding this to your manifest.json:
{
...
"permissions": [
"identity"
],
...
}
Consistent Application ID
You need your application ID consistent during development to use the OAuth process. To accomplish that, you need to copy the key in an installed version of your manifest.json.
To get a suitable key value, first install your extension from a .crx file (you may need to upload your extension or package it manually). Then, in your user data directory (on macOS it is ~/Library/Application\ Support/Google/Chrome), look in the file Default/Extensions/EXTENSION_ID/EXTENSION_VERSION/manifest.json. You will see the key value filled in there.
{
...
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgFbIrnF3oWbqomZh8CHzkTE9MxD/4tVmCTJ3JYSzYhtVnX7tVAbXZRRPuYLavIFaS15tojlRNRhfOdvyTXew+RaSJjOIzdo30byBU3C4mJAtRtSjb+U9fAsJxStVpXvdQrYNNFCCx/85T6oJX3qDsYexFCs/9doGqzhCc5RvN+W4jbQlfz7n+TiT8TtPBKrQWGLYjbEdNpPnvnorJBMys/yob82cglpqbWI36sTSGwQxjgQbp3b4mnQ2R0gzOcY41cMOw8JqSl6aXdYfHBTLxCy+gz9RCQYNUhDewxE1DeoEgAh21956oKJ8Sn7FacyMyNcnWvNhlMzPtr/0RUK7nQIDAQAB",
...
}
Copy this line to your source manifest.json.
Register your Extension with Google Cloud APIs
You need to register your app in the Google APIs Console to get the client ID:
Search for the API you what to use and make sure it is activated in your project. In my case Cloud Firestore API.
Go to the API Access navigation menu item and click on the Create an OAuth 2.0 client ID... blue button.
Select Chrome Application and enter your application ID (same ID displayed in the extensions management page).
Put this client ID in your manifest.json. You only need the userinfo.email scope.
{
...
"oauth2": {
"client_id": "171239695530-3mbapmkhai2m0qjb2jgjp097c7jmmhc3.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email"
]
}
...
}
Get and Use the Google Auth Token
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// console.log("token: " + token);
let credential = firebase.auth.GoogleAuthProvider.credential(null, token);
firebase.auth().signInWithCredential(credential)
.then((result) => {
// console.log("Login successful!");
DoWhatYouWantWithTheUserObject(result.user);
})
.catch((error) => {
console.error(error);
});
});
Have fun with your Firebase Service...
I am trying to enable the Firebase authentication with the Google Auth sign-in method, but enabling it and clicking "save" shows the error "Error updating Google".
In the Google Cloud Console activity logs, it shows:
Failed:google.internal.firebase.v1.FirebaseInternalProductService.EnableGoogleSignIn
With the error message "Not found (HTTP 404): Operation failed with error code NOT_FOUND."
However, when I tried this in a new Google Cloud project, it worked perfectly. I have tried removing and recreating the Firebase Admin SDK, removing and creating a new app, and removing the OAuth credentials.
I cannot seem to find any solution to this problem other than creating a new project, but I would prefer to keep my existing project ID.
Alternatively, if there is any way to reset my GCP project or remake it with the same ID, that would also be fine.
This issue is caused by deleting the OAuth client autogenerated by Firebase by default.
To solve it, you need to first create a new OAuth 2 client ID, and set the necessary redirect URIs for your Firebase app (they should default to something like https://{PROJECT_ID}.web.app/__/auth/handler).
Then, call this API - the request should look something like this, using the client ID and client secret from the credentials generated above:
PATCH https://identitytoolkit.googleapis.com/admin/v2/projects/{PROJECT_ID}/defaultSupportedIdpConfigs/google.com
{
"name": "projects/{PROJECT_ID}/defaultSupportedIdpConfigs/google.com",
"enabled": true,
"clientId": "{YOUR_CLIENT_ID}",
"clientSecret": "{YOUR_CLIENT_SECRET}"
}
After making this API call, the Google authentication provider should be enabled.
Before to begin, you must have created a new oaut-credentian gcp console, because is tha main problem here.
You nee create a new oauth provider, you can use the next link to authenticate a try the request using data like next:
Parent: projects/**put here your project number**
idpId (identity provider): google.com
Request Body
{
"name": "projects/**put here your project number**/defaultSupportedIdpConfigs/google.com",
"enabled": true,
"clientId": "**put here your client id**",
"clientSecret": "**put here your client secret**"
}
Problem: When used via 3rd-party app built-in browser (e.g. LINE, Twitter or Facebook messenger), the signInWithPopup returns auth/popup-blocked. The explanation by Firebase docs is:
auth/popup-blocked: Thrown if the popup was blocked by the browser, typically when this operation is triggered outside of a click handler.
Typical sequence triggering this error is: Link of my web app is sent to LINE, Twitter or Facebook messenger. When user uses mobile device and opens that link in those apps, their built-in browser is opened. Calling signInWithPopup then returns the error. The behavior is slightly different in iOS and Android but at least iOS/LINE combination results the error.
I am using Angular and building a web app. The error message is Unable to establish a connection with the popup. It may have been blocked by the browser. which comes from the firebase.js - not my own text.
When used in a normal browser, the signup works just fine.
Any ideas why the built-in browsers and signInWithPopup do not work together?
Firebase authentication should start with some user interaction, such as click on button. This solved the problem for me.
Many in-app embedded browsers block popups. I ran into the issue on instagram. Try using signInWithRedirect instead of signInWithPopup when kicking off the Oauth call.
Firebase documentation on usage of both methods can be found here - https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithPopup
signInWithPopup() is for the browser, however, if you're running iOS or Andriod emulator or device, you need to call signInWithCredential.
signInWithFacebook() {
if (this.platform.is('cordova')) {
return this.fb.login(['email', 'public_profile']).then(res => {
const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
return firebase.auth().signInWithCredential(facebookCredential);
})
}
else {
return this.afAuth.auth
.signInWithPopup(new firebase.auth.FacebookAuthProvider())
.then(res => console.log(res));
}
}
If you're using Ionic + Firebase, you can find more info here
I have the same issue, with my web app on facebook ads campaign. I change my code from popup to redirect.
googleAuth() {
firebase
.auth()
.getRedirectResult()
.then(function(result) {
this.showLoading = true;
if (result.credential) {
var token = result.credential.accessToken;
console.log(token);
}
var user = result.user;
console.log(user);
});
this.showLoading = true;
const provider = new firebase.auth.GoogleAuthProvider();
provider.addScope("profile");
provider.addScope("email");
firebase.auth().signInWithRedirect(provider);
}
}
The problem now is save my utms from campaigns, because with redirect you lose them.
I have tried both using custom token and just firebase secret. But the same exact app works when running locally, but I cannot authenticate when running from OpenShift Node environment.
myRootRef.authWithCustomToken(firebaseSecret, function(error, authData) {
log.info('Firebase Authed');
if(error){
log.fatal('Unable to authenticate');
log.error(error);
log.info(firebaseSecret);
return;
}
Is there anything else I need to do to "bless" OpenShift - The error I get back is
{"code":"INVALID_TOKEN"}
The only thing I can think of that makes the most sense is that Open Shift is blocking the ports for Firebase communications which I believe is WebSockets