Amplify-js: AWS Cognito : How to create my own UI

[guillaumecodet]

* Which Category is your question related to? *
Authentication

* What AWS Services are you utilizing? *
AWS Cognito

* Provide additional details e.g. code snippets *

At the moment I'm using the Amazon Cognito domain ( example: https://.auth.eu-west-2.amazoncognito.com ), but the customization is very limited, so I would like to create my own oauth2 ui.

I looked at the documentation, but I can't find how to create, signup, signin a user using the client_id, and send back the authorization code.

Thank you with your help.

[powerful23]

If you want to have you own customized ui, maybe you can take a look at this: https://github.com/aws-amplify/amplify-js/issues/1316#issuecomment-408228241

[itaied246]

I'm also working on designing my own UI.
Didn't find a complete solution though, still try to find a way to combine all the pieces.

I would recommend you read the docs.
Specifically, if you are using react, there are higher order components you can integrate and even modify the pages / components.

I would like to hear from you if you find a way to modify it completely and keep the auth flows.

[ajb3ck]

We are also looking at this, however, cannot find how to have cognito send back an auth code for a user in a cognito user pool. Our goal is to replicate the same oauth2 flows available with the built in pages to a ui we fully control.

Has anyone found how to have an auth code generate for a user pool native (not a social login) account without using the hosted ui?

Thanks!

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

[Sytten]

Can this be done currently in the end? The way I see it you have to create a custom identity provider that would do the sign in with the pool or something like it?

[powerful23]

With the latest version of Amplify you can customize your own UI for oauth2 login. Please check the latest doc: https://aws-amplify.github.io/docs/js/authentication#oauth-and-hosted-ui

@guillaumecodet Please let us know if you want to reopen the issue.

[krlm]

@powerful23 Please confirm if I understand it correctly. The UI can be changed only for a particular Amplify application. It's not like a shared, hosted UI which can be used to provide Single Sign On experience among a few different applications? If so, how can I create custom UI which would behave as hosted UI, without creating custom oauth server over cognito user pool?

[whimzyLive]

@powerful23 can please provide more info on how to setup self hosted ui with cognito oauth2 server? All the docs that I have come across only describe, how to use cognito oauth2 using cognito hosted UI.

[tayyab-sarwar]

With the latest version of Amplify you can customize your own UI for oauth2 login. Please check the latest doc: https://aws-amplify.github.io/docs/js/authentication#oauth-and-hosted-ui

@guillaumecodet Please let us know if you want to reopen the issue.

@powerful23
For Facebook and Google it's working fine.
How can i skip Hosted UI for SAML/Ping Identity provider? is there a way to skip hosted UI?
Or can i create custom UI instead of using Cognito Hosted UI?

[raffibag]

Seems like this thread veered a bit off course. There are many of us still wondering if it's possible to host our own, fully customized (and, importantly, _localized_) version of the AUTHORIZATION endpoint (https://docs.aws.amazon.com/cognito/latest/developerguide/authorization-endpoint.html). The solution offered seems to apply only to customizing the federated services within the existing hosted UI.

Would be nice to get a clear, concise answer on this: will Cognito ever provide the tools for users to fully customize the Cognito OAuth2 authorization endpoint (assuming this is even possible)? The handful of css tweaks that are currently available aren't really cutting it for a lot of us. Perhaps making every style element fully customizable would be a more feasible solution (for starters, we can't even change the institutional #909090 body element background color; or the comically large "Forgot Password" heading, attached).

[juanvillegas]

@raffibag I second this, plus the hosted UI immediately adds an unnecessary extra user interaction: user goes to mysite.com/login, clicks sign in with google, sees the hosted ui where she has to click log in with google again...

[KendallWeihe]

@raffibag agreed. I'll hone in on, _is this even possible?_ Sifting through the API docs, I see InitiateAuth followed up by RespondToAuthChallenge. It seems to me that with these two things, one could _conceivably_ host their own authorization endpoint, but those docs feel incomplete.

It boils down to... how can we exchange _(1) code challenge, (2) username, (3) and password_ for an auth code?