Amplify-js: Integrating Social Sign In/Federated Identity without Hosted UI in Angular 7

[andrewryan1906]

* Which Category is your question related to? *
Authentication

* What AWS Services are you utilizing? *
Cognito, API Gateway

* Provide additional details e.g. code snippets *
I am using Angular 7 and Cognito User Pools, but NOT identity pools. I am not using the hosted UI because I need to control the user experience at login, and I'm using AWS Amplify.

What I would like to do is include a Login with Google on my custom UI, such that when a user clicks it they are authenticated with Google and then upon return, either logged into to the user in the user pool or - if no user exists with the same email - are prompted to be linked to an existing user with an email/password.

How do I do this? What is the best way?

[JakeStoeffler]

I'd love to know the answer to this as well! I can't believe the hosted UI is the only way to use User Pools with an external IdP. Is there not an API available?

[andrewryan1906]

Pinging this thread again for an answer.

[undefobj]

@yuntuowang I believe this is a feature in the Cognito backlog. Can you comment?

[cliffordh]

Very interested in this also

[bijanmmarkes]

When could we expect this feature? Federated Auth is very important.

[andrewryan1906]

Can we at least get an answer on this??

[cliffordh]

I managed to get Facebook login working with User Pools.. it's a little clunky but it works. It involves some manual configuration of Amplify in your main.js (I'm using Vue):

Amplify.configure({
Auth: {
identityPoolId: "",
region: "us-east-1",
userPoolId: "",
userPoolWebClientId: "",

mandatorySignIn: true,

oauth: {
  domain: "",
  scope: ['phone', 'email', 'profile', 'aws.cognito.signin.user.admin', 'openid'],
  redirectSignIn: "https://localhost:8080/",
  redirectSignOut: "https://localhost:8080/",
  responseType: 'code',
  options: {
    AdvancedSecurityDataCollectionFlag: false
  }
},

},
Storage: {
bucket: "",
region: "us-east-1"
}
});

Just the presence of the oauth key above triggers authentication responses over the event bus. There is a little more config to do, but you can get pretty far by digging into the Amplify code, including the code of the hosted UI page, etc.

[JakeStoeffler]

@cliffordh Doesn't that use the Hosted UI though? I think the question here is whether social sign in can be done with user pools without the Hosted UI.

[cliffordh]

@JakeStoeffler It leverages the hosted UI backend but doesn't show the hosted UI interface. For example:

<button onclick="window.location.href='https://xxx.auth.us-east-1.amazoncognito.com/oauth2/authorize?identity_provider=Facebook&amp;redirect_uri=https://localhost:8080/&amp;response_type=code&amp;client_id=xxxxx&amp;scope=aws.cognito.signin.user.admin%20email%20openid"></button>

This never shows the Amazon UI but will show Facebook with the FB permission screens, or it will trigger a redirect back to the redirect_uri if already authorized.

On the Amplify side you need to have oAuth credentials already specified in your Amplify configuration, this triggers automatic parsing in the Amplify JS code for the user credentials.

It would be great if I could do all of this in a popup or something that didn't trigger all the browser redirects in my primary app, but haven't had success with that, yet...

[PunkHaz4rd]

I managed to get Facebook login working with User Pools.. it's a little clunky but it works. It involves some manual configuration of Amplify in your main.js (I'm using Vue):

Amplify.configure({
    Auth: {
        identityPoolId: "",
        region: "us-east-1",
        userPoolId: "",
        userPoolWebClientId: "",
        mandatorySignIn: true,
        oauth: {
            domain: "",
            scope: ['phone', 'email', 'profile', 'aws.cognito.signin.user.admin', 'openid'],
            redirectSignIn: "https://localhost:8080/",
            redirectSignOut: "https://localhost:8080/",
            responseType: 'code',
            options: {
                AdvancedSecurityDataCollectionFlag: false
            }
        },
    },
    Storage: {
        bucket: "",
        region: "us-east-1"
    }
});

Just the presence of the oauth key above triggers authentication responses over the event bus. There is a little more config to do, but you can get pretty far by digging into the Amplify code, including the code of the hosted UI page, etc.

Thanks a lot, that's what missing from the documentation.

[JakeStoeffler]

Thanks @cliffordh, I have a feeling this would work for most people's use cases, but it's not quite what I was looking for. I was looking for a programmatic way to authenticate with User Pools after signing in with the third party IdP and getting an id token. Basically, something similar to the federatedSignIn() function which Amplify provides for Identity Pools. Such an API would allow me to use my IdP's native APIs for the various devices I need to support, rather than having to go thru a web page. I have one device in particular that can't display a webpage very easily.

I would still like to get an answer from the AWS team regarding if/when a federated sign in API will be available for User Pools.

[cliffordh]

@JakeStoeffler without a doubt this is not perfect and I'd also welcome a solution from AWS team... I'm just hacking around it for now :-)

[manueliglesias]

Hi,

At the moment, the hosted UI is the only way to use User Pools with a token/code from an external IdP, there is no API to allow you to directly pass a token/code from the idP into the user pool for authentication.

@cliffordh 's solution is the closest thing to do something similar, but as @JakeStoeffler pointed out, it requires a browser/web view. Hopefully this unblock some people (also, there is similar support for hosted ui in ReactNative on the way)

I'll bring this feature request to the cognito team's attention.

[cliffordh]

@manueliglesias is there any chance to release the source of the hosted UI backend itself?

[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.

[AdamShechter9]

looking forward to this.
Need third party login (google) to work with aws-amplify for my angular application.
would be great if it could be just work with the hosted UI. (custom UI would be amazing).

[powerful23]

@andrewryan1906 now you can customize your own ui and use Auth.federatedSignIn for OAuth flow. Please check the doc: https://aws-amplify.github.io/docs/js/authentication#oauth-and-hosted-ui

Closing the issue. Please let us know if you have further concern.

[davidfarinha]

Hello,
I'm using React Native and configured followed the steps on the new Amplify documentation link above, it didn't mention how to setup the signin/signout redirect URI with React Native so I used "http://localhost:3000/". Now when I call federatedSignIn, it opens facebook but I get the error "URL Blocked: The redirect failed because the redirect URI is not white-listed in the app client's OAuth settings".
Any ideas?

[furyozo]

Hello,
I'm using React Native and configured followed the steps on the new Amplify documentation link above, it didn't mention how to setup the signin/signout redirect URI with React Native so I used "http://localhost:3000/". Now when I call federatedSignIn, it opens facebook but I get the error "URL Blocked: The redirect failed because the redirect URI is not white-listed in the app client's OAuth settings".
Any ideas?

Hi, I am sure you fixed your issue in the meantime, but just in case anyone is looking for a solution to this problem, usually when you get this facebook "redirect failed" error, it is beacuse you have not added the URI you want to redirect to in facebook for developers > my apps > your app name > Facebook login > Settings > Valid OAuth Redirect URIs

[grreatgun]

Hello,
I'm using React Native and configured followed the steps on the new Amplify documentation link above, it didn't mention how to setup the signin/signout redirect URI with React Native so I used "http://localhost:3000/". Now when I call federatedSignIn, it opens facebook but I get the error "URL Blocked: The redirect failed because the redirect URI is not white-listed in the app client's OAuth settings".
Any ideas?

Hi, I am sure you fixed your issue in the meantime, but just in case anyone is looking for a solution to this problem, usually when you get this facebook "redirect failed" error, it is beacuse you have not added the URI you want to redirect to in facebook for developers > my apps > your app name > Facebook login > Settings > Valid OAuth Redirect URIs

FYI - I did enter in the Valid Oauth..still not working. still searching

[askdesigners]

I just wanted to pop in and say that I've found cognito to be an overall disappointment. Everything about it is either extremely limiting, or extremely confusing. There are so many concepts that are mentioned by never explained well, and all documentation assumes that you don't mind using 400kb frontend libraries just for freaking user authentication. Amplify seems cool if you are doing 100% standard login flows, but as soon as you aren't you are straight SOL. The design of this entire technology is really lacking in overall vision and direction. I'm sure that many very smart people have put in a lot of time to build this but it does _not_ solve the issue in a good way, and in fact actually creates just as much if not more work as building custom auth would.

[PunkHaz4rd]

This is definitely the place to rant about Cognito, instead of private emailing the support of AWS for an issue concerning the features available in Cognito.

[askdesigners]

I want it to be public, so that other people know while doing research that there are many pitfalls. So many things vanish into private email, and it creates a giant blackhole around solutions and weaknesses in these products.