Amplify-js: Using Federated Login/ Cognito with react-native

[waltermvp]

* Which Category is your question related to? *
Auth
* What AWS Services are you utilizing? *
Amplify +Cognito User Pools + federated identity + facebook login
* Provide additional details e.g. code snippets *

First of all Great lib thanks!.

I'm failing to get facebook login working using amplify with react-native.
I'm not sure exactly how the callback to the native mobile app works. I'm pretty sure my issue lies somewhere in callback configuration.
My react native app calls out using to facebook using:

 Auth.federatedSignIn({ provider: "Facebook" })

Facebook requests the permissions then and after the I confirm it calls out to :
https://MYAPPBUNDLEID:/authorize

I have set that value to the callback URL in my cognito app client settings to https://MYAPPBUNDLEID:/authorize

So my questions are:

1. What value should the value for redirectSignIn in aws-exports be when using react-native? (is https://com.bundleid:/authrorize correct?)
2. What value should I use for callback URLs in cognito's "App Client Settings" when using working with react-native? (is https://com.bundleid:/authrorize correct?)
3. Do I need to handle the callback manually with iOS openurl API or do one of the AWS SDKs handle that for us? not clear in the docs?

[manueliglesias]

Hi @waltermvp

Thanks for trying the lib!

Seems like our docs website was updated and some of those instructions got lost/moved.

Check this previous version of the docs, it might help

https://github.com/aws-amplify/docs/blob/34565927a3908b091c77fa5ef5aceab6fa7e9a2d/js/authentication.md#automated-setup-with-the-cli

I'll tag this issue as documentation so we can address the docs gap

[waltermvp]

@manueliglesias thanks for the quick response 👍

[ghost]

@waltermvp did you get a fix? im hitting the same issue. Im redirecting to myapp:// after verifying with facebook but im not sure on how to retrieve the auth data returned. using Hub.listen doesn't seem to work for me.

Any insight?

[waltermvp]

@chriscraiclabs I got it working with using the redirecURI of MYAPPNAME://

[ghost]

@waltermvp how did you retrieve the auth data on navigation back into the app? did you use Hub.listen? can you post some code snippets please?

[waltermvp]

@chriscraiclabs I did. For me the issue was that i was using the incorrect redirectURI. Have you setup your android/ios app to handle the url linking call?

basic hub listening:

    Hub.listen("auth", async ({ payload: { event, data } }) => {
      switch (event) {
        case "signIn": {
          this.props.navigation.navigate("AppRootSwitchNavigator");
          this.setState({ user: data });
          break;
        }
        case "signOut": {
          this.props.navigation.navigate("Auth");
          this.setState({ user: null });
          break;
        }
      }
    });

[ghost]

@waltermvp Have you an example/link of the url linking? is that on the native ios/android side? I have a standard login button also. it triggers the Hub.listen successfully so I know thats configured correctly.

[waltermvp]

https://aws-amplify.github.io/docs/js/push-notifications

[ghost]

@waltermvp I might be completely missing something here but why would we need push notifications for using a federated login for RN? Im not seeing any reference to this in the amplify Auth docs - https://aws-amplify.github.io/docs/js/authentication

Just looking at the RN linking docs. I thought setting up a custom url schememyapp:// would suffice. That doesn't look the case.

For React Native applications, You need to define a custom URL scheme for your application before testing locally or publishing to the app store. This is different for Expo or vanilla React Native. Follow the steps at the React Native Linking docs or Expo Linking docs for more information.

Did you have so call some function from the Linking class in order to listen for the incoming url from facebook? getInitialURL or something?

Thanks for all the info!

+@manueliglesias

[waltermvp]

Your right I got confused. What you need is this https://facebook.github.io/react-native/docs/linking . Your app has to declare it can be opened using a ‘yourappname://‘ url scheme. This will be called by Cognito on sign in/out etc .

[ghost]

@waltermvp ah, in that case, I do have that setup correctly "/. This is my current scenario:
signIn with facebook button -> navigated to facebook auth page -> navigated back into app.

This flow seems correct. The only issue is that I do not have access to the data returned (tokens etc...). The Hub.listen() does not get triggered with this scenario.

[waltermvp]

In your aws exports try setting the type from code to token. Then in the Cognito console go to your app client settings and allow implicit grant . Give that a shot. (Make sure your using the current app client id that has implicit grant enabled )

[ghost]

@waltermvp cool, ill give that a shot. Cheers!

[EmanH]

@chriscraiclabs Did you get your issue solved? I'm having the same issue.
@waltermvp Changing to implicit grant in Cognito, didn't solve the issue for me.

[EmanH]

I'm going from the App to Google oauth and back to the app successfully, but nothing picked up in hub listener.

https://github.com/aws-amplify/amplify-js/issues/3342#issuecomment-496784358

[EmanH]

Update
If I reload the app after doing the federatedSignIn, it HAS signed me in, but I have to reload the app in the emulator (rr) first. Will keep experimenting.

[ghost]

@EmanH Hey, yeah im still having this issue. Interesting on the app refresh! How are you verifying that you are logged in? Are you triggering Auth.currentAuthenticatedUser() on load?

[EmanH]

Just by Hub listener at the moment. Auth.currentAuthenticatedUser() was throwing an error.

[ghost]

@EmanH So is this your current flow:
google auth button > navigated out of app > auth > navigated back into app > nothing triggers > refresh app using cmd r > Hub.listen() is called ?

[EmanH]

Yes, that's exactly it.

[EmanH]

I tried using the bare basic example from the Amplify docs. Same problem.
App.js

import { StyleSheet, Text, ScrollView, SafeAreaView, StatusBar, Button } from 'react-native';
import { default as Amplify } from "aws-amplify";
import { withOAuth } from "aws-amplify-react-native";
import { default as awsConfig } from "./aws-exports";

Amplify.configure(awsConfig);

class App extends React.Component {
  render() {
    const {
      oAuthUser: user,
      oAuthError: error,
      hostedUISignIn,
      facebookSignIn,
      googleSignIn,
      amazonSignIn,
      customProviderSignIn,
      signOut,
    } = this.props;

    return (
      <SafeAreaView style={styles.safeArea}>
        {user && <Button title="Sign Out" onPress={signOut} icon='logout' />}
        <ScrollView contentContainerStyle={styles.scrollViewContainer}>
          <Text>{JSON.stringify({ user, error, }, null, 2)}</Text>
          {!user && <React.Fragment>
            {/* Go to the Cognito Hosted UI */}
            <Button title="Cognito" onPress={hostedUISignIn} />

            {/* Go directly to a configured identity provider */}
            <Button title="Facebook" onPress={facebookSignIn} />
            <Button title="Google" onPress={googleSignIn}  />
            <Button title="Amazon" onPress={amazonSignIn} />

            {/* e.g. for OIDC providers */}
            <Button title="Yahoo" onPress={() => customProviderSignIn('Yahoo')} />
          </React.Fragment>}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  safeArea: {
    flexGrow: 1,
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#FFFFFF',
  },
  scrollViewContainer: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

export default withOAuth(App);

[iamdavidmartin]

@EmanH were you able to get Hub events to fire? I'm having this exact issue as well.

[EmanH]

@iamdavidmartin Yes, I did. I re-created a reactive native project using Expo, then it worked as expected.
At some point I'm going to have to eject it though, so hope it keeps working after that.

[iamdavidmartin]

@EmanH I also had to use Expo to get the events to fire. The bare-bones projects didn't fire events and I have no idea what the difference is. The events do fire with the ignite-bowser boilerplate so if you don't want Expo, that's an option. Unfortunately that also puts you on an old version of react & react native which is why I'm using Expo now.

[pperron]

@iamdavidmartin You have a sample of your Expo code ? When I try it with Expo, I could get "App --> Facebook login --> Back to App" and using the Facebook URL graphql to get the name of the user created but when I look into my Amazon Cognito, the user has not been added. So basically, I only know the user is logged from Facebook but is not part of my Amazon Cognito pool, meaning that I cannto control user access to all my other Amazon services...

I would really need the with0Auth() Amplify option to work and fire logIn event when I get back into my app. Currently trying to find why the event is not firing up after the hosted UI return me to my app.

Thanks !

[FooBarRaz]

I was experiencing similar issues with federated signin on ReactNative (no Expo). There were a couple of crucial things related to Linking that I was missing or had misconfigured --

• You need to set the oauth.redirectSignIn (and redirectSignOut) in your AWS configuration to a URI specific to your app, e.g. myapp://main/.
• In Xcode, you must edit your Info.plist to configure your build to recognize deep links to myapp://. But this is not enough.
• In your AppDelegate.m file, you have to add these lines:

// iOS 9.x or newer
#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

This will allow your app to handle links. This is what was preventing my app from receiving the authentication data returned in the redirect (either code or token), and thus leaving the OAuth flow incomplete.

See here for more info.
Similar steps will need to be done on Android, but I haven't gotten that far yet.

[mguay22]

@FooBarRaz You are a life saver.. my problem was the missing code snippet in AppDelegate.m

Is there any chance we can update the docs with a more specific explanation of deep linking related to Amplify? IMO the one FB offers is pretty lack luster and it took me as a newcomer to the library about half a day to wade through various scattered docs to hack together the solution that @FooBarRaz just elegantly provided.

[rahulje9]

I've figured out the part till deep linking, social auth is working but not as expected. The hub was not listening for the given events and then I dig deep and found that it was throwing
signIn_failure [NotAuthorizedException: Identity pool - * poolid * does not have identity providers configured.] but at the same time, the user details got registered in the aws, Any help would be appreciated.