I'm using Ionic with React and #codetrix-studio's capacitor-google-auth plugin to enable google auth. The processed idToken has different lengths when comparing Web to Android environments.
When running in the web browser I'm getting 1224 chars and everything works just fine. But when running android I'm only getting 1122 chars. Also I'm not getting anything out of the accessToken.
Can anyone provide some hits on how to solve this?
I'm getting the token like so:
async signIn(): Promise<void> {
const result: any = await Plugins.GoogleAuth.signIn();
if (result) {
let token = result.authentication.idToken;
this.setToastMsg(token.length + "");
}
}
This is triggered from a simple button:
<IonButton onClick={() => this.signIn2()} >Login with Google</IonButton>
Turns out the token provided by google for the android api is actually smaller. So everything is ok.
Related
I'm using this code to send a verification email with a custom dynamicLinkDomain links.myapp.com.
final acs = ActionCodeSettings(
url: 'https://myapp.com/finishLogin',
handleCodeInApp: true,
iOSBundleId: 'com.myapp.mobileApp',
androidPackageName: 'com.myapp.mobileApp',
androidInstallApp: true,
androidMinimumVersion: '18',
dynamicLinkDomain: 'links.myapp.com',
);
await SecureStorageService.to.postEmail(email);
await FirebaseService.to.auth.sendSignInLinkToEmail(
email: email,
actionCodeSettings: acs,
);
That dynamicLinkDomain is setup correctly because I am using it in my app both with Android and iOS. But when I click on the login link on an Android device (emulator or real) I always get a 400 API key expired error
I tried
to clean the project with flutter clean
create a new API key without restriction
but I still get the error. It seems like a dynamic link problem, but I can't spot it. Does someone have an idea?
I can see that i have in the email is very different depending if I'm generating the email from iOS
https://links.myapp.com/?link=https://links.myapp..com/__/auth/action?apiKey%3DAIzaS...NedNY%26mode%3DsignIn%26oobCode%3DKI4NK...F4ao-7yw%26continueUrl%3Dhttps://myapp..com/finishLogin%26lang%3Den&ibi=com.myapp..mobileApp&ifl=https://links.myapp..com/__/auth/action?apiKey%3DAIza...tNedNY%26mode%3DsignIn%26oobCode%3DKI...-7yw%26continueUrl%3Dhttps://myapp..com/finishLogin%26lang%3Den
or Android
https://links.myapp.com/__/auth/action?apiKey=AIza...edNY&mode=signIn&oobCode=XQI...2pCw&continueUrl=https://myapp.com/finishLogin&lang=en
Is that normal?
I've been developing a google sign in functionality in ionic with this plugin:
https://github.com/EddyVerbruggen/cordova-plugin-googleplus
It has been a painful journey already. I got it working on android now. I ask the plugin to pass me an idToken, but in order to retrieve it you need to pass the webClientId with it (as shown in the code below). From android and ios I retrieve that said idToken and send it to the back end to check if it's a real token. Now here's the part I don't really understand. On android, the verification passes and logs the user in, but on ios if gives me the error wrong recipient, payload audience != requiredAudience
The code is exactly the same so I don't really understand what is happening here. Any people got any experience with this and the plugin that can help me out? Thanks a million in advance. Here's the code if that could help anybody:
googleLogin() {
this.isLoggingIn = true;
this.googlePlus.login({
'webClientId': environment.webClientId
}).then(googleRes => {
this.authService.googleLogin(googleRes.idToken).subscribe(
//logic
)
}).catch(err => {
console.log(err);
this.isLoggingIn = false;
});
}
I have an react native app that talks to my Node server running on my laptop(http://192.168.x.x:3000). Even after performing an successful login, the consequent calls to my server fails with an 401 status. I see that no cookies are passed on the server.
Some observations:
1) My React Native app works just fine when i deploy my code to an actual server and use a proper domain(http://example.com) while making the API calls.
2) Using postman, I am able to authenticate myself and make consequent successful API calls to my local server.
This is a really strange issue and am sure I have missed out something small, but have been stuck with it for quite some time now.
Any hints/suggestions on what can be done?
Thanks,
I recognize this is a little old, but if anyone is still facing issues, I found that the following steps resolved it for me
Include withCredentials on all requests from the react app
Used the cors middleware server side. Be sure to specify the domain (in my case, my VM's IP address with port) and set credentials to true
Increase the maxAge property -- I think the default was like 10 seconds so it kept seeming like my session wasn't persisting when in reality it was just expiring too fast.
An example for steps 2 and 3 might look something like:
const express = require('express');
const path = require('path');
const session = require('express-session');
const cors = require('cors')
const app = express();
// STEP 2
app.use(cors({
credentials: true,
origin: '192.168.0.100:3000',
methods:['GET', 'POST', 'PUT', 'DELETE']
}));
// STEP 3
app.use(session({
cookie: {
maxAge: 86400000 // one day
}
}));
EDIT:
Also worth mentioning that if you're running your server on a virtual machine (like me) to be sure your virtual machine's date is consistent with the date of the device running your react app. I discovered the hard way that this also manifests as Axios appearing to lose sessions.
I'm trying to use the AngularFire2 plugin in my Ionic 2 app to authorize against Google apis using a custom token, while developing in Chrome on my computer. It works fine testing it on my Android phone, the request works and everything. But I'm trying to get it also work in my dev environment.
The error I get while running my app in Chrome is (I removed my key):
OPTIONS https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=<mykey>
XMLHttpRequest cannot load https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyCustomToken?key=<mykey>. Response for preflight has invalid HTTP status code 404
Telling me that I have problem to make an Options pre request to Googles server. The thing is that I've installed the Chrome addon Allow-Control-Allow-Origin:* and added the "--disable-web-security" argument on Chrome start up. Which works fine for other services but not for AngularFire2, for that specific request.
I've found people having the same problem that recommend to switch to Firefox, which I wont since it breaks other plugins like SQLight storage instead.
Is there a way to make this work in Chrome browser?
You could possibly add intermediate servers for your CORS requests, which will make your HTTP requests with CORS preflight and will return you the result, only for the development mode. I have used this approach in one of my projects because i had only a client-side.
So you can do this:
getMyInfo(info: Info, provider?: string) {
if (!provider) {
provider = 'corsanywhere';
}
this.crossGet(`http://google_apis/${Info}/`,`${provider}`).map(res => res.json())
.subscribe(res => {
// GOT RESULT
console.log("Res: " + res);
});
}
Those are the providers you can use:
corsanywhere(url: string, options: any): any {
var promise = this.http.get('https://cors-anywhere.herokuapp.com/' + url);
return promise;
};
corsnow(url: string, options: any): any {
var promise = this.http.get('https://cors.now.sh/' + url);
return promise;
};
crossGet(url: string, provider: any, options?: any): any {
var promise = this[provider](url, options);
return promise;
};
In fact, in this approach we don't solve the problem, we just override it. But i think it's a good solution, because you will use it only for the development.
I hope this was helpful, best of luck!
Using the Instagram rubygem and sinatra I am able to successfully authenticate via oauth from a small AngularJS app and use the Instagram API. Here are the relevant oauth routes from my sinatra app:
get '/oauth/connect' do
logger.info "going here " + (Instagram.authorize_url :redirect_uri => CALLBACK)
redirect Instagram.authorize_url :redirect_uri => CALLBACK
end
get "/oauth/callback" do
logger.info params[:code]
response = Instagram.get_access_token params[:code], :redirect_uri => CALLBACK
session[:access_token] = response.access_token
users = DB[:users]
current_user = users[:instagram_id => response.user.id.to_i]
if current_user.nil?
new_user = response.user
users.insert :instagram_id => new_user.id.to_i,
:username => new_user.username,
:profile_picture => new_user.profile_picture,
:created_at => DateTime.now
current_user = users[:instagram_id => new_user.id]
end
session[:current_user] = current_user
redirect "/app"
end
However, when trying to authenticate from within a webview in an Android app using the same routes (GET oauth/connect, redirected to Instagram, then redirected back to oauth/callback) I get the following error:
Instagram::BadRequest - POST https://api.instagram.com/oauth/access_token/: 400: OAuthException: No matching code found.:
I have verified that I am using the same code returned from Instagram and that the redirect_uri is the same as what I registered with Instagram.
Note, Oauth works when I use my web interface, but not via the Android webview.
I have read a number of posts where other people have seen this behavior, but the solutions provided do not work for me:
Instagram can disable your app because it thinks it is misbehaving. Nope, because oauth works via my web-interface still using the same client ID and secret and the same routes.
You are not using the same redirect_uri as that listed with Instagram. I have checked and re-checked this and it looks fine.
Where can I debug next to get to the bottom of this issue?
I know my answer is a bit late, but I'm posting it here so others (hopefully) won't have to search as hard as I did.
It looks like you're using the Explicit auth. We were having this issue using the explicit flow.
Here's the problem: In the instant after you send the code to Instagram (step 3), that code expires. However, Instagram will not send you a new code (step 1 & 2) for at least 5 minutes (it re-issues the old code).
Make certain that you aren't sending more than one request with the same code (Android WebView tends to arbitrarily send multiple requests). Or, better yet, cache the code->Instagram_response mapping on the server.