Social Authentication not working on Ionic

[oliverandersencox]

The docs tell us we can use federated sign in like so:

federatedSignIn('facebook')

To create a cognito user from facebook OAuth. However on a device with Ionic, the redirection process is broken.

In the browser, the process works great, however on IOS or Android it does not.

once the authentication is done, we cannot redirect back to localhost as it won't go back to the app.

If you set the redirect URI to the apps url schema, the redirection does work, however the authentication system does not pick this up when the app is opened from the login redirect.

I have in place a function that can detect the URL being used to open the app and it is correctly opening the app with the appended token information in the redirect URL.

However Amplify does not pick this up. I then tried implementing the HUB to detect auth changes and again this had no effect. Once the redirect away to the Amplify federated login page occurs, it effectively breaks the process.

It is possible to fix this by using the Facebook Ionic wrapper or the Google auth wrapper, however this creates a federated identity which then means you cannot read and write using the API.

Any advice on this would be great as this is a real blocker. Is there a way to take the redirect tokens and pass them to amplify manually? This would solve the problem.

The goal is to be able to create a cognito user in the Amplify pool, from the social providers.

[giacomocarrozzo]

Hi @oliverandersencox! It's 3 days that I'm fighting with completely the same issue. I'm developing an app with Ionic 5.0.3 and aws-amplify. I used this tutorial to help me developing it: Tutorial Here the tutorial's source code: Source code

The first issue to solve was to find a way to redirect URI into Ionic app after Facebook Login with the Browser. I solved this issue with this plugin: Deeplinks But, like you said, I'm not able to let Hub Service detect the redirect call. Did you find a solution to this problem? If yes would you mind to share it with me?

[oliverandersencox]

@giacomocarrozzo I gave up in the end!

There has been no response from any of the devs on this issue so I thought I'd wait it out.

I managed to get it working using the facebook and google ionic native packages - but as I said, that creates identities and not a cognito user which makes it pretty much useless!

[giacomocarrozzo]

Yes, I'm trying to avoid the facebook and google native packages since I would like to fully manage users with AWS Cognito. Did you use Deeplinks to redirect URI to the App? Here my constructor's AppComponent code:

this.platform.ready().then(() => {
  this.deeplinks.route({
    '/auth': AuthComponent,
    '/auth/signin': SignInComponent
   }).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.router.navigate(['/auth'], { queryParams: { code: match.$args['code'], state: match.$args['state']  } });
    alert( "MATCH" + JSON.stringify(match));
  },
  (nomatch) => {
    // nomatch.$link - the full link data
    alert("NOTMATCH" + JSON.stringify(nomatch));
  });
  
});

"match.$args" cointains Aws Cognito get params. Like you see I'm able to catch the redirect call and I'm able to catch code and state parameters, but Hub is not receive my call.

[oliverandersencox]

@giacomocarrozzo yes I did the same with the redirect. Any word on this from the devs?

[giacomocarrozzo]

No @oliverandersencox , I'm still waiting for an answer. I hope to get it soon otherwise I have to switch to another sign-up platform.

[amburt05]

Yea, I'm having the same issue. I don't see a way to use the hosted UI with ionic. It's become a huge blocker for me.

[RSchumacher13]

Same here, blocked from using hosted ui with Ionic, However we need custom scopes.

[amburt05]

I think this issue is related -> https://github.com/aws-amplify/amplify-js/issues/3386

Edit: I just realized it was created by the same user. Obviously, still an issue though, but could be consolidated?

Edit2: Two more issues that could be related : https://github.com/aws-amplify/amplify-js/issues/3389 https://github.com/aws-amplify/amplify-js/issues/2455

[oliverandersencox]

@amburt05 yes it is the same issue. I've been waiting on a fix for this for months now. It seems there a fix in a pull request but its hasnt been reviewed yet

[tmburt04]

Any update on this?

[oliverandersencox]

@haverchuck can we get some sort of feedback on this. Most apps built with Ionic need this feature, and it seems there has been no comment on any of the Social Auth threads for Ionic.

[oliverandersencox]

@giacomocarrozzo have you had any luck here? I am going to try one approach today and hopefully get around this MASSIVE BLOCKER.

[tmburt04]

Please post your solution if you figure it out @oliverandersencox . This is brick-walling my deployment, as well as everyone else' I'm sure.

[giacomocarrozzo]

@oliverandersencox I didn't try to solve this issue anymore. If you take some step ahead and you would like to share it, I'll be happy to try to help you.

[amburt05]

Is there really zero feedback from the AWS team on this? We're trying to do some testing and are getting ready to just drop AWS cognito. This is kind of ridiculous. Do they just open source the stuff they just don't feel like dealing with?

[oliverandersencox]

@amburt05 I've been trying to get as response on this and other posts for weeks now.

check this - https://github.com/aws-amplify/amplify-js/issues/3279

But to me it doesnt answer whether it will work with Ionic on device

[sammartinez]

@oliverandersencox Apologize that we haven't replied on this issue. I did reference an open Pull Request (PR) for adding federated sign in for Ionic and Angular.. I am also seeing yourself comment on that Feature Request. We are following up with the person that cut the PR to see where it is at. I do want to know, can you provide the link to the documentation you are referring to?

[oliverandersencox]

@sammartinez is there any info you can give us on this. The user is created in the user pool, the only issue is simply the redirect doesn't do any auth checks or pick up this new user and sign in.

There must be some advice on manually detecting once redirected?

[oliverandersencox]

@@giacomocarrozzo I finally got it working!!

So the reason the authentication is not registered is because the Ionic webview is not loaded with the state and code from the redirect. These need to be passed to Ionic in order for Amplify to run its magic.

In order to do so you need to add redirect URL's top the app and then intercept these deep links. In my case im using capacitor, which handles the deep links so I can grab the data:

   App.addListener('appUrlOpen', (data: any) => {
      console.log('App opened with URL: ' + data.url);
      this.deeplinks.consumeDynamicLink(data.url);
    });

From this point I now have the redirect query params passed back by Facebook and google. Now I need to load the application into the webview again but this time with the query params appended to it:

document.location.href = capacitor://localhost/authevent/?code=${queryParams.code}&state=${queryParams.state};

The next step is to ensure you have the amplify hub set up, as for some reason the auth state observable doesn't notice the event even after this.

   Hub.listen("auth", ({ payload: { event, data } }) => {
      if (event === 'signIn') {
        this.auth.setAuthstate(true);
        this.userService.listenToSocialAuth(data.username);
      }
    });

At this point I have the facebook auth up and running.

[giacomocarrozzo]

@oliverandersencox awesome! it's working to me too!

I just have these errors when I log out after a Social Auth:

[ERROR] 49:50.195 OAuth - Error handling auth response. Error: invalid_grant

Unhandled Promise rejection: Cannot read property 'accessToken' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'accessToken' of undefined

It that working for you?

[oliverandersencox]

@giacomocarrozzo so I also had that. If you run it incognito mode, you wont get that issue.

It seems cognito saves session data about the federated user, so that if you are removing and adding users in development it will throw this error.

Try running in incognito the error should disappear.

[oliverandersencox]

is there any update on this. It would be great if there was a way to manually pass the state and token to authenticate rather than having to reload the entire app, as this could be done with a browser pop over for a way better UX

[oliverandersencox]

@jordanranz or any of the team, Ionic is still broken and no one has gotten back to any of my messages in months about Ionic federated login on native devices. The angular approach works for broswers but not on the actual device as amplify doesnt pick up the redirect back to the app.

I have managed to get so far and get it working with ionic however it is hacky and unpleasant as it does not use the in app browser popover.

When I try and use the authorise cognito API, I am able to run in in the in app browser, however no matter what I try I then get the error:

[ERROR] 54:31.433 OAuth - Error handling auth response. [error] - Unhandled Promise rejection: undefined is not an object (evaluating '_a.accessToken')

Amplify claims to support Ionic, however this is simply not the case as you cannot do social login without redirecting to safari app which apple do not allow!

https://<MY_APP_OGNITO>auth.eu-west-1.amazoncognito.com/oauth2//authorize?redirect_uri=<URI>/&response_type=code&client_id=<ID>&scope=aws.cognito.signin.user.admin+email+openid+phone+profile&identity_provider=Facebook')

If someone could at least explain why i get this error when using the above, or how to authorise ionic/angular on device that would be great.

[sammartinez]

@oliverandersencox I apologize on behalf of the team that we haven't been able to response as there are projects in flight that would help this use case. We have been working on a newer implementation for our UI components since this use case for Angular and Ionic, Federation Social Providers, is still in a Feature Request. Please see the link for both the RFC for the newer UI Components and the pull request.

I did ask the person on the pull request a while back to see about resolving the conflicts that currently blocking it and haven't seen traction on this but in the coming weeks we can provide more insight into the RFC that I linked above in regards to having the ability to use Social Providers within Ionic/Angular.

As for the error message you are receiving, I have let our oncall know and they will be providing an update once we are able to dig into the issue.

[oliverandersencox]

@sammartinez thanks. Any estimate as to when they can get some feedback to us?

[oliverandersencox]

@sammartinez anyword back... the error:

[ERROR] 54:31.433 OAuth - Error handling auth response. [error] - Unhandled Promise rejection: undefined is not an object (evaluating '_a.accessToken')

is literally the only thing standing between me being able to submit to the app store

[iartemiev]

@oliverandersencox I've updated https://github.com/aws-amplify/amplify-js/pull/2900 and have been testing it to see if it solves this issue. Will keep you updated on the progress

[iartemiev]

@oliverandersencox it doesn't seem like that PR actually solves this issue. It appears to only enable fed sign in through Identity Pools, not User Pools like what you're working on.

Could you please provide the source code you're using? E.g. main.ts, module, and component code, so that I can make sure I'm doing the same things you are when I'm reproducing this and working on a solution.

[togro]

@sammartinez , any news about support for social login on Ionic ? I'm stuck with android mobile application , deeplinks not works with amplify after redirect .

[Andyluchina]

@sammartinez In my situation the hub did get the information and event but it was a bad event.... event type is signin failure... TypeError: the given value is not a Promise at Object.push../node_modules/@aws-sdk/stream-collector-browser/build/index.js.exports.streamCollector (http://localhost/vendor.js:232048:10) at collectBody (http://localhost/vendor.js:117186:21) at collectBodyString (http://localhost/vendor.js:117190:12) at parseBody (http://localhost/vendor.js:117205:12) at http://localhost/vendor.js:114513:42 at step (http://localhost/polyfills.js:3223:23) at Object.next (http://localhost/polyfills.js:3204:53) at http://localhost/polyfills.js:3197:71 at new ZoneAwarePromise (http://localhost/polyfills.js:4261:29) at __awaiter (http://localhost/polyfills.js:3193:12)

document.location.href = "http://localhost/login/#" + match.$link.fragment;

This error is happening on android emulaotr.