Amplify-js: Using the federation to log with gmail and facebook always going out of the APP?

[esuarezz]

Im using cognito to log in with facebook and gmail and my question is.. when I log, it is going to a different url to log in and its is quite "unsafe". In other apps it seems like "native" , it is open another windows but inside the app but in this case is like opening in a new tab.

I am using expo but the log in is from here

[iartemiev]

Does the URL it's going to look like https://your-app.auth.us-east-1.amazoncognito.com?

[sammartinez]

@esuarezz similar callout to what @iartemiev point out, if the URL looks like the above, Cognito is actually the one handling the redirect to different Social Providers. Please let us know if there is a different URL that doesnt seem to be the above.

[esuarezz]

Yes, its the url from cognito, that long url, how can I avoid this url? also it feels not native with expo, perhaps can I modify that?

[iartemiev]

That's just how Cognito Hosted UI functions. It's a tool that creates a login form for you to save you time.

@esuarezz if you want to avoid using the Hosted UI, you can create your own buttons by passing in the social provider you want to use to that method call. https://aws-amplify.github.io/docs/js/authentication#social-provider-federation

Your code would look something like this:

<>
  <button onClick={() => Auth.federatedSignIn({provider: 'Facebook'})}></button>
  <button onClick={() => Auth.federatedSignIn({provider: 'Google'})}></button>
</>

If you go with this approach, you will also need to style the buttons yourself.

[esuarezz]

We are not using the hosted UI, we are using as you said.

              <Button
                icon={"facebook-box"}
                onPress={() => Auth.federatedSignIn({ provider: "Facebook" })}
                mode="outlined"
                style={styles.loginButton}
              >

And when I click it goes to:

hapxxxxxx-a0xxxxx-hxxx.auth.eu-west-1.amazoncognito.com

[iartemiev]

@esuarezz what do you see when you get redirected to the Cognito URL?
E.g. are there social provider buttons? If so, which ones?

[esuarezz]

the social screen to choose the email for example in the case of GMAIL. So it is the normal stuff to do the auth, but is going to that URL opening a new window when we are on mobile app. But perhaps if we are using our login we have to go to external window?

[danrivett]

I had the same question. I was surprised when following this tutorial that the user got booted out into a browser window for authentication on a native React Native application:

https://dev.to/aws/the-complete-react-native-guide-to-user-authentication-with-the-amplify-framework-ib2

I'm using Expo and it supports native authentication with Google, Facebook, and Apple among others, but I don't know if I can use that and federate with AWS Cognito so that the user is created and managed there after the initial external authorization?

I am struggling with the end user experience if I have no choice but boot them to a browser window as in Android at least there's no way to at least do it in a modal browswer window inside the app as far as I'm aware, and I do think it's a second rate user experience to not support it inside the application.

References:

• expo-google-app-auth
• expo-facebook
• expo-apple-authentication

[esuarezz]

Lets see if we get answer...

El El vie, 7 feb 2020 a las 22:43, Dan Rivett [e-mail]
escribió:

I had the same question. I was surprised when following this tutorial that
the user got booted out into a browser window for authentication on a
native React Native application:

https://dev.to/aws/the-complete-react-native-guide-to-user-authentication-with-the-amplify-framework-ib2

I'm using Expo and it supports native authentication with Google,
Facebook, and Apple among others, but I don't know if I can use that and
federate with AWS Cognito so that the user is created and managed there
after the initial external authorization?

I am struggling with the end user experience if I have no choice but boot
them to a browser window as in Android at least there's no way to at least
do it in a modal browswer window inside the app as far as I'm aware, and I
do think it's a second rate user experience to not support it inside the
application.

References:

• expo-google-app-auth
  https://docs.expo.io/versions/v36.0.0/sdk/google/
• expo-facebook https://docs.expo.io/versions/latest/sdk/facebook/
• expo-apple-authentication
  https://docs.expo.io/versions/v36.0.0/sdk/apple-authentication/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aws-amplify/amplify-js/issues/4684?email_source=notifications&email_token=ACSTPCVH64KMTW2FLGU3K3LRBXP2FA5CNFSM4KEPEC2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELE4HNI#issuecomment-583648181,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACSTPCVKMSSUPEA5GJSF6Y3RBXP2FANCNFSM4KEPEC2A
.

[iartemiev]

I apologize for the delayed response. I believe I had misunderstood the question.
There's currently not a way to facilitate native, i.e. "browserless" authentication through Amplify if you would like to use User Pools in your app. Please feel free to open a feature-request for this functionality.

If you don't need User Pools, the alternative would be performing native authentication in Expo and then passing the tokens you get back to Auth.federatedSignIn, in order to get AWS credentials via Identity Pools. E.g. https://docs.amplify.aws/lib/auth/advanced/q/platform/js#identity-pool-federation

[esuarezz]

Thanks, that is useful