Amplify-js: federated logins in react-native examples

[senips]

* Which Category is your question related to? *
React-Native Auth - Federated

* What AWS Services are you utilizing? *
Cognito

* Provide additional details e.g. code snippets *

First of all, is Amplify really support federated logins for Google and Facebook (not Expo but React-Native)?

Half cooked examples in documentation section of Amplify so please do not send me that link if you are answering it.

So what i need, can Amplify team provide me a Github example where this thing works with React-Native ? Or if anyone has any working example in a repo please share it with me.

request to Amplify team: When documenting your code please do not use just dot dot dot as a fill in gap but provide an actual snippet. For example, where can i see a full structure of aws_exports.js.. meaning Aws.Configure( < what to pass here/what is the schema here> ) ? What if do not want to use to Cognito Pool creation thru CLI but use existing pools or use what my organisation's devops tools for this?

[loganwedwards]

@senips I am not part of the Amplify team, but I can fill in from what I have learned. The documentation is confusing for someone who has configured their project to use the Amplify JS lib (for example), but not the Amplify CLI. My use case is that my projects tend to user Serverless and most (or all) of the backend configuration is handled there. There is an Amplify plugin for Serverless, but I have not tried it. The steps I take are:

1. Configure your backend how you see fit.
2. Create aws_exports.js and run Amplify.configure(aws_exports). There are some examples on the website on what a manually created exports file would look like. You will need to find the appropriate endpoints, ids, etc.. through the AWS console.

Regarding federated logins, I have found that the only solution to support a 3rd party, e.g., Facebook, is with the hosted UI option. This means that a user will be taken out of the native app experience and guided through a web flow. At the end of the Oauth flow, the user will land back in the app with the necessary tokens and auth state - signedIn.

Here is an example (I am using this code)

import React from 'react'
import { withOAuth } from 'aws-amplify-react-native'
import { View, Button } from 'react-native'

class FacebookAuth extends React.PureComponent {

  render() {
    return (
      <View>
        <Button
          title="Login With Facebook"
          onPress={this.props.facebookSignIn} // this prop is injected with the withOAuth HOC
        />
      </View>
    )
  }
}

export default withOAuth(FacebookAuth)

In one of your root components (that renders FacebookAuth, I just pulled the example from the docs and use Hub.listen(..) to redirect the user on sign in with a federated provider.

Does this partially help, at least?

[ghost]

Hey @loganwedwards could you provide the versions of RN & aws-amplify-react-native & aws-amplify you are using? I have the same setup as you, im able to navigate out -> auth with facebook -> navigate back into the app but the Hub.listen() is not triggered and the user is not authenticated.

[loganwedwards]

@chriscraiclabs Here are the relevant bits pulled from package.json:

 "dependencies": {
    "@aws-amplify/auth": "^1.2.23", // This one might be here by mistake. I can't remember
    "aws-amplify": "1.1.27",
    "aws-amplify-react-native": "^2.1.11",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
  },

[senips]

@loganwedwards I think your proposed solution is meant for Expo which I clearly see from your dependencies. In my case, I would need this to get working with just React-Native apps.

@chriscraiclabs I had this same hub issue not triggered with Hub.listen(). Actually I found that It did not even trigger for just for Cognito pool users so with Social federated logins are out of questions now.

[usmansbk]

First of all, is Amplify really support federated logins for Google and Facebook (not Expo but React-Native)?

@senips Yes. you have to use packages likereact-native-fbsdk for facebook and react-native-google-signin for google. Also you need to provide your refresh token handler, here is google refresh handler gist . You can use it as a template for facebook refresh handler. The AWS docs is a bit misleading about the refresh handlers. Here is a google login component

What if do not want to use to Cognito Pool creation thru CLI but use existing pools or use what my organisation's devops tools for this?

If you're planning to use only federated login without aws userpool then there's an extra step for google during IAM setup. Make sure you have the screens below

IAM

Cognito --> Manage Identity Pools --> Edit XYZ

Make sure you follow the facebook and google dev guide too.

For example, where can i see a full structure of aws_exports.js.. meaning Aws.Configure( < what to pass here/what is the schema here> ) ?

aws_exports.js is automatically generated when you add an aws-amplify service like auth via cli. It's easier and safer than manually creating your own.

[senips]

Amplify for React-Native does not save any more of developers time or not offering any out of box solution but rather rely on what @usmansbk specified above. I do not know why big time cloud providers like AWS not providing any working components in full but selling Cognito solutions for long time. Just look at how auth0 guys are providing native components, examples and integration aspects. I am thinking of Firebase to see any better before I implement these half cooked amplify stuff with the mix of react-native-fbsdk & google-signin which leads to unnecessary maintenance for me later.

[manueliglesias]

Hi @senips

Take a look at this repo I created when doing some work on the feature. It is almost the same code as in the docs. I just tried it and worked for me, hopefully it works for you too and help you get unblocked.

[usmansbk]

Hi @senips

Take a look at this repo I created when doing some work on the feature. It is almost the same code as in the docs. I just tried it and worked for me, hopefully it works for you too and help you get unblocked.

@manueliglesias does this work for ejected create-react-native-app or just Expo?

[manueliglesias]

@manueliglesias does this work for ejected create-react-native-app or just Expo?

It was not created with create-react-native-app, it was created with react-native-cli (e.g. npx react-native init MyApp), so no Expo

[undefobj]

@senips I am not part of the Amplify team, but I can fill in from what I have learned. The documentation is confusing for someone who has configured their project to use the Amplify JS lib (for example), but not the Amplify CLI. My use case is that my projects tend to user Serverless and most (or all) of the backend configuration is handled there. There is an Amplify plugin for Serverless, but I have not tried it. The steps I take are:

@loganwedwards are there any specific areas or actions we could take to make this easier? It's a bit of a catch-22 in that we used to have extremely verbose examples of manually building all the samples in the docs from scratch, and then we received feedback was that the docs are too verbose and customers want shorter examples automated by the CLI. Now that we have the reverse there is feedback for the other mechanism. Can you point at a specific section of the docs that could benefit with some other method of configuration explanation?

[qamatic]

@manueliglesias, First of all thanks for your example created in a repo. I understand it better in your version than Amplify. So one question about this const initialUrl = 'myapp://main/'; So is this same for every app or do i have to declare my app? Secondly do i have to set in Cognito console in redirect SignIn url entry?

[loganwedwards]

@undefobj I do not have a great answer here and I understand the balance in verbosity/conciseness in the docs. What would have helped me is understanding how using Cognito user pools as my authentication mechanism with 3rd party authn could be achieved in a React Native app. I know this is a particular use case, but by no means is it unique. The docs (to me) were confusing in that Cognito authz can be achieved via the hosted UI through a 3rd party identity provider, e.g., Facebook, but not through a typical JS-only Oauth grant. The code I pasted above with a description indicating this is the only means to do this in RN could be helpful.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[kaitlynbrown]

@undefobj The issue is that you have no actual fully-working examples. Concise documentation is fine (even encouraged), as long as there is a link somewhere to an actual working example on github that doesn't have anything left out.

The other issue is the fragmented nature of the documentation. I recently implemented federated sign in with cognito in a React Native app, and I have a bookmark folder for it with almost a dozen pages saved. To say the least, it was frustrating having to jump between these and try to remember which page had the information I was looking for. A single, step-by-step guide with associated examples would have made things a million times easier. Below is the list of resources I referenced:

https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html
https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-settings.html
https://aws-amplify.github.io/docs/js/cognito-hosted-ui-federated-identity
https://aws-amplify.github.io/docs/js/authentication#oauth-and-federation-overview
https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-oidc-idp.html
https://docs.aws.amazon.com/cognito/latest/developerguide/authorization-endpoint.html
https://github.com/aws-amplify/amplify-js/issues/1521
https://github.com/aws-amplify/amplify-js/issues/1143
https://github.com/aws-amplify/amplify-js/issues/2833
https://github.com/aws-amplify/amplify-js/issues/1316
https://github.com/aws-amplify/amplify-js/issues/3033

Right now, I'm trying to figure out what to use as a redirect url, and what the correct way is to make it work in both dev (for myself and other devs on the team) and in production (in an Expo app). This documentation doesn't seem to be in any of the above links.

I don't believe this issue should be closed, as there still aren't any official, fully-functional examples anywhere

[dennisrjohn]

@kaitlynbrown, did you ever figure out what to use as a redirect URL?