Social Authentication not working on Ionic

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.

[tmburt04]

Any update on this?

[shekhartupe]

I got this working with ionic angular on iOS. 4 basic tenets of this implementation:

1. Setup cognito with Callback URL(s) matching your deeplinks and entries in aws-exports.js.
2. Define (or generate via amplify-cli) aws-exports.js. Key here is redirectSignIn url should launch app via deep linking (tenet# 3)
3. Implement deeplinking to handle the incoming queryString. Key here is to reload the app using window.location.href passing the same queryString for amplify to do its magic.
4. Update config.xml to set iosScheme (Scheme for android) to match your deeplink scheme and allow-navigation to the new scheme. This point is not explicitly mentioned in any documentation I referred to POC this.

Links I referred with slight changes to implementation as needed: https://medium.com/@tobinc/create-a-multi-platform-app-using-ionic-4-aws-amplify-in-app-oauth-with-social-idp-deep-linking-6b8de9bc6878 https://medium.com/@zippicoder/setup-aws-cognito-user-pool-with-an-azure-ad-identity-provider-to-perform-single-sign-on-sso-7ff5aa36fc2a https://arjunsk.medium.com/cognito-hosted-ui-with-amplify-in-angular-7-26c9285675c4 And bunch of open issues on this topic on github. Thanks for all contributors.

Key code snippets:

    // Used for listening to login events
    Hub.listen("auth", ({ payload: { event, data } }) => {
      console.log("Hub.listen event", event, data, JSON.stringify(data));
      if (event === "cognitoHostedUI" || event === "signedIn") {
        this.zone.run(() => this.router.navigate(['/home']));
      }
    });

    //currentAuthenticatedUser: when user comes to login page again
    Auth.currentAuthenticatedUser()
      .then(() => {
        console.log("Auth.currentAuthenticatedUser");
        this.router.navigate(['/home'], { replaceUrl: true });
      }).catch((err) => {
        console.log(err);
      })

  private setupDeepLinks(){
    if (this.platform.is('cordova')) {
      this.deeplinks.route({
        '/login':'/login'
      }).subscribe(match => {
        console.log('Success: ', match.$route, JSON.stringify(match.$link), JSON.stringify(match.$args));
                
        const internalPath = `${match.$route}?${match.$link.queryString}`;
        console.log("internalPath", internalPath);
        window.location.href = internalPath;
      },noMatch => {
        console.error('Error: ', noMatch);
      });
    }
  }

config.xml

    <allow-navigation href="iacdapp://*" />
    <preference name="iosScheme" value="iacdapp" />

aws-exports.js

        "redirectSignIn": "iacdapp://localhost/login",
        "redirectSignOut": "iacdapp://localhost/login",