-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Amplify with Ionic and Social Login on Android (Federated) with Cognito pools #5351
Comments
@togro this could potentially be an angular / routing lifecycle issue. It could be related to redirecting to soon. Where/when are you redirecting in the app lifecycle? You might need to do this on something like setTimeout(() => { this.router.navigate(['/somewhere']); }); Although when I look at the error, it looks like it's trying to replace the html5 push state with a deep link e.g. 'com.movilgate.awslogin://app/auth/signin/' are you setting the router.navigate somewhere to goto in your app, or is this happening before you can do that? |
@mlabieniec I try , but deeplinks, only works on main.ts . I try to put deeplinks on login.ts on AfterViewInit , but is no triggering . And with router.navigate does'nt works, only with document.location.href . I read and investigate a lot, but not found any example with android/ionic. + deeplinks + social login with cognito I think you are right about life cycle , is something with lifecycle and the premature call . This is the code for main.ts , after that go to login.ts where is hub from amplify and detect well SigIn on google, but after that gave that error on history. import { Component, NgZone } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AmplifyService } from 'aws-amplify-angular';
import { Router } from '@angular/router';
import { EventBusService } from './_services/event-bus.service';
import { Deeplinks } from '@ionic-native/deeplinks/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
authState: any;
constructor(
private platform: Platform,
private router: Router,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public amplify: AmplifyService,
private eventBusService: EventBusService,
private deeplinks: Deeplinks,
private zone: NgZone,
) {
this.eventBusService.on('data:AuthState', (data: any) => {
console.log('eventBusService', data);
});
this.eventBusService.on('initializeApp', (data: any) => {
console.log('initializeApp', data);
this.initializeApp();
});
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.deeplinks.route({
'/auth/signin/': {},
'/auth/signout/': {},
}).subscribe(match => {
// match.$route - the route we matched, which is the matched entry from the arguments to route()
// match.$args - the args passed in the link
// match.$link - the full link data
this.zone.run(() => {
console.log("DeepLinks OK !:", match);
document.location.href = `http://localhost/login/?code=${match.$args.code}&state=${match.$args.state}`;
// setTimeout(() => {
// document.location.href = `http://localhost/login/?code=${match.$args.code}&state=${match.$args.state}`;
// },100);
// setTimeout(() => {
// this.router.navigate(['/login'], { queryParams: { code: match.$args.code, state: match.$args.state}});;
// });
console.log('Successfully matched route', match);
});
}, nomatch => {
// nomatch.$link - the full link data
console.error('Got a deeplink that didn\'t match', nomatch);
});
// amplify
this.authState = {loggedIn: false};
this.amplify.authStateChange$
.subscribe(authState => {
console.log('ZZZZ:', authState);
this.authState.loggedIn = authState.state === 'signedIn';
this.eventBusService.emit({name: 'data:AuthState', value: this.authState});
console.log('XXX:', this.authState);
// if ( authState.user )
if ( this.authState.loggedIn === true) {
// portada
console.log('Redir !!!');
// Analytics.enable();
this.router.navigateByUrl('/portada');
}
this.statusBar.styleDefault();
this.splashScreen.hide();
});
});
}
} |
Any update about Social Login on Android with ionic ? |
This is a 6 month long pain for me. Are there seriously no fixes for something that is supposed to be integrated (Ionic)!! |
However could @sammartinez please comment on why the hub - after a successful social Ionic login - first emits sign in success but immediately after will emit a sign in failure |
@togro so my approach is fairly similar to yours, however I am using capacitor (highly recommend) which has deep links out the box, however the approach taken for that is very similar. So after triggering the reload of the application - I still get exactly the same error as you however this doesnt actually effect the next step (this may be useful - but I havent tried myself - https://stackoverflow.com/questions/49365057/angular-deployment-without-server-error-securityerror-failed-to-execute-rep) Now in your auth service make sure you have the hub listener - mine is in the constructor:
Now, it will log the sign in, but also the failure - this is clearly an amplify issue - so within the success if you add a function to initilaise the user:
When I call this, because there is actually a successful login, the application will fetch your user data and the app should be all good. I think this may help with the auth error as well (yet to test) - #5959 |
@togro I now have ti fully working without your error. My redirect URL is - capacitor://localhost/welcome/ as I am using capacitor I also opted to use the capactior in app broswer so as to not navigate away from the application as Apple rejected mine for that. to do that I do this for the Facebook login:
which opens the browser in a modal. Then once the reload has finished I have to manually close the browser or it will stay up. Then on the reload the capacitor deep links take hold:
The browser close there (bit hacky) but does the job, and passes the url that opened the app to the routing service:
From here the Hub takes over and all seems to work well. Hope that helps! |
@togro even better, now the error message you were having has been resolved for me, the hub is no longer needed and the amplify auth state subscriber works as it should do! |
@sammartinez ... Any working example with Ionic + Android for social login with last versions ? |
I am using it with cordova, not capacitor, I checked last month and it doesn't work. I appreciate any working example, I see that the process works fine, but it always fails in: Failed to execute ‘replaceState’ on ‘History’ |
@sammartinez this issue with ionic has been going on for years now. There are example for react but nothing to help with angular ionic, and now out of nowhere my hacky way has stopped working. I see this has been added where we can define a function to deal with the auth on devices however this doesnt work with ionic:
Can you guys help direct us as to how to do this is angular as there are no docs anywhere for it |
There is no other option in which we can invoke another plugin to make the social login and then invoke a lambda that updates cognito and returns a token that is passed to some Auth function of Amplify and the state is updated and we can continue with the authenticated flow ? |
@sammartinez.......... |
Apologizes for the delay on this, we are looking into this issue and will provide an update on the functionality next week on this. Need to take the time to produce what you are running into. For some clarity for us, what documentation are you following for our Ionic integration? Also, can please provide your Please use the follow command:
Thanks ahead of time! |
thanks @sammartinez The ionic components are great but really aren't flexible enough to build into a custom app (in my opinion). The main problem is the authentication system redirection.
Which brings me onto the other question I asked above - I noticed for the react docs this problem has been solved with this code (i think):
Which from what I can tell means you can pre define the in app browser dealing with the federated authentication. However I tried various ways of trying to do this but capacitors browser does not behave in a way which makes this viable, and the main.ts file deals with the config set up and I can attach this functionality until the angular app has loaded - unless you have some guidance here. It would be great of you are able to give some guidance on how we can makes this auth process fit the above, as it has been a very trial and error approach getting this working and we are now in production. System: |
@oliverandersencox Just curious, what are you using for the redirect signin and signout URIs? You are also correct in the intended use for |
@amhinson I tried using 'app.ping.com' which stopped working last week out of nowhere, but now im forced to use capacitor://welcome as it seems when the window reload url does not contain this, amplify doesn't authenticate. And RE the urlOpener, I dont understand how I can attach this, as we can't do it in the main.ts file as the app has not loaded capacitor by that point, so I'm wondering if there is a way to set this urlOpener function after the app has initialise. |
Just posted a reference working implementation notes at - #3537 |
@oliverandersencox Do you have any updates on your approach to the social login implementation? |
@sid19928 How does your deep link have 'access_token', 'id_token', etc. as params? As far as I know, the callback URL after signing in only contains 'code' and 'state' as params. |
@angusho1 if your responseType is 'token' in the config file aws-exports.ts then you get access_token and id_token etc as params. |
@sid19928 Thanks for the clarification. I have a question about this step:
What do you mean by 'initiate the login process'? Are you saying that we should call |
@angusho1 you have already called Auth.federatedSignIn() for redirecting to social provider then after successfull login from there you don't have to call Auth.signIn(). You need to use user data and token for accessing the apis of cognito and perform further actions according to your requirements. I would suggest that you go through aws cognito docs to understand the flow. Basically for mobile we are doing the localStorage part manually which is done by aws amplify in case of web implementation. Deep linking is used to send the tokens generated to our mobile app. |
Can you give an example of what 'further actions' might entail? Part of what needs to happen in this step is we need to trigger an event in the Amplify Hub's auth channel, right? And if that is done through a Cognito API, what kind of endpoint would I use? |
Hello I am new and i am using ionic react. Any idea how to implement this solution to ionic react. I have tried everything and my Hub is not listening or returning anything. Thank you |
@nadetastic thank you for mentioning my issue. It has been resolved see my answer: #3537 (comment) |
Closing this issue in favor of #3537 |
Which Category is your question related to?
Auth
What AWS Services are you utilizing?
Cognito, AWS AppSync, Analytics , S3
Provide additional details e.g. code snippets
Hi
We have a app with amplify and ionic ( 5.4.9, below more info) . All works fine , s3, auth , analitycs , admin queries , auth .
But with auth and Federated Social Login we have problems with Android , on Web works fine.
We singup with Google Federated HostedUI on Cognito pools and auth works fine, but when can back to us we capture with deeplinks , and deeplinks trigger ok .
On next step when redirect from deeplinks to page for use , amplify detect SignIn with “A user Google_103030042694745594198 has been signed in” , that is ok.
But after that give us a error like this :
Failed to execute ‘replaceState’ on ‘History’: A history state object with URL 'com.movilgate.awslogin://app/auth/signin/'
We have an exception in this step and call Auth.currentAuthenticatedUser() , but we don’t know if that is ok , and is very ugly method .
Exists any example o technique for this works fine on android ?
ionic info :
Ionic:
Ionic CLI : 5.4.9 (/Users/mtoro/.ionic/Studio/Tools/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.3 (cordova-lib@9.0.2)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 5 other plugins)
Utility:
cordova-res : 0.6.0 (update available: 0.11.0)
native-run : 0.2.8 (update available: 1.0.0)
System:
NodeJS : v12.16.1 (/Users/mtoro/.nvm/versions/node/v12.16.1/bin/node)
npm : 6.13.4
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504
The text was updated successfully, but these errors were encountered: