Amplify-js: Authentication with User Pool and social provider

[itaied246]

As cognito docs states, one can authenticate with 3rd party providers (like Facebook) using only the user pool.

From amplify authentication docs, I followed this example, but it requires the identityPoolId.

So, how can I authenticate a user on a custom UI with a 3rd party providers using only the user pool?

[mlabieniec]

@itaied246 the identityPoolId comes from Cognito Federated Identities service. If you use the aws-amplify/amplify-cli you can just amplify add auth to get this setup. Then you need to configure auth (per doc you referenced above). Then pass the tokens from the third party provider (facebook etc) to the Auth.federatedSignIn() method, per the Auth guide.

[keitzer]

@mlabieniec In our instance, and I believe in @itaied246 as well... we're trying to use AWS Amplify with our React Native app in order to sign users in with Facebook / Google... BUT... into the User Pools.

We've followed this guide
https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html?shortFooter=true

And it works with that suggested URL at the bottom of the guide.... the facebook login with that URL goes to the User Pool.

However, when we implemented Auth.federatedSignIn(), it goes to the Identity Pool (Federated Identities)...

Is there a way to set up our login so that the Facebook (and Google) sign in can go through the User Pool? Even if it means not using AWS Amplify (although we'd love to, if possible).

Since Auth.signIn() goes through User Pool, and that guide linked above _also_ goes through User Pool... Are we doing something wrong???

[itaied246]

Anyone?

[powerful23]

@keitzer @itaied246 if you want to sign in to the Cognito User Pool with federated providers, you should use Cognito Hosted UI: https://aws-amplify.github.io/amplify-js/media/authentication_guide.html#configuring-the-hosted-ui

Also #1143 may help you to make it work in React Native.

[itaied246]

But that's the point, I don't want to use the hosted UI...
There too many customizations I need to do and the hosted UI don't offer

[powerful23]

@itaied246 maybe you can try this: https://github.com/aws-amplify/amplify-js/issues/1316#issuecomment-408228241

[itaied246]

Ok thanks, I'll try it.
Why doesn't amplify encapsulate it?

[powerful23]

@itaied246 good point. I will update this in our doc.

[itaied246]

@powerful23 is there a way to federate with user pool?
In the thread you sent, after authenticating with the URL you still have to federate to cognito.
In their discussion they show how to use the identity pool.

I see this question pops up a lot, in the gitter and in other issues.
This simple thing is not clear, not from amplify docs and not from cognito docs.

[powerful23]

@itaied246 yeah for now the only way to get federated with Cognito User Pool is through Cognito Hosted UI. The Cognito Service team is currently working on to provide another way to do that without Hosted UI and once they are done(the similar way like Auth.federatedSignIn() which is used to federate with Cognito Identity Pool), we can integrate it into Amplify ASAP.

[mtraynham]

@powerful23 is there any timeline on when that would be completed?

[mandriv]

@powerful23 do you have any updates on this issue?
Ideally, I'd like to manage users using User Pools only, without the need for identity pools for FB / Google authentication or OAuth redirects. Hope that makes sense.

[mlabieniec]

you can federated directly against the social provider in your user pool via constructing a link documented in the docs:
https://aws-amplify.github.io/docs/js/authentication#launching-the-hosted-ui

see the code snippet there. You can use that link will go directly to the hosted uI, which will transparently redirect to the social provider, and then back to your application, by-passing the hosted ui all together.

[mtraynham]

@mlabieniec We’re looking for a solution that allows developers to use a custom UI, not the hosted one with redirects. This is mostly because the hosted one provides a clunky experience. Can you please reopen this?

[mlabieniec]

Ok got it will mark as feature request

[Gerharddc]

@itaied246 yeah for now the only way to get federated with Cognito User Pool is through Cognito Hosted UI. The Cognito Service team is currently working on to provide another way to do that without Hosted UI and once they are done(the similar way like Auth.federatedSignIn() which is used to federate with Cognito Identity Pool), we can integrate it into Amplify ASAP.

Would it be possible to provide Amplify with the attributes it needs to create the user pool user manually and then use https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AdminLinkProviderForUser.html to associate that user pool user with a federated user? I guess the answer is probably yes so the more important question is, if that is done, will Amplify be able to pick up on that link next time you sign in?

[juan-dambra]

Any updates on this new feature?

[uclaeagit]

We've been using the solution shown by @powerful23 here to add a custom Facebook Login button to our registration page. We also have normal Cognito user pool login with custom UI and I'm working on adding Google now.

As far as I can tell this solution is the only way to get a Facebook button working with Custom UI and User Pool only (IE - not Federated Identity Pool). But maybe I'm missing something.

[undefobj]

Hello everyone, we have created an RFC for feature work that should make the challenges found in this issue easier in the future. If you have a moment please read through the details and add any comments: https://github.com/aws-amplify/amplify-js/issues/2716

Your feedback in the RFC will help us ensure that we are delivering the best experience possible. Thank you.

[undefobj]

Hello everyone, in addition to the above RFC we have also now released React Native support for the Hosted UI which includes an HOC which allows you to build out UI components in your app: https://aws-amplify.github.io/docs/js/authentication#launching-the-hosted-ui-in-react-native

[powerful23]

I am going to close this issue. Please let us know if you have further concern.
The documentation about how to use OAuth is here: https://aws-amplify.github.io/docs/js/authentication#oauth-and-hosted-ui

[polson]

Can this be done on native app clients (iOS and Android?)

[Jun711]

@powerful23
Regarding https://aws-amplify.github.io/docs/js/authentication#oauth-and-hosted-ui, is it only for hosted UI as the links has #oauth-and-hosted-ui?

I think this thread is asking for using custom UI?

[ianmartorell]

As of the implementation of https://github.com/aws-amplify/amplify-js/issues/2716 you can call Auth.federatedSignIn({ provider: 'Facebook' }) and it will sign in using User Pool Federation provided you have Amplify configured that way.