Amplify-js: PKCE support for aws-amplify-react

[CodingToBeWithHer]

so I would like to use one login screen (web view) in all three platforms: web, android, iOS, this is not possible to do that safely atm, because there is no PKCE support
(Hosted default Cognito UI supports PKCE but it has no possibility to customise any look, like language etc)
so I'd like to see the aws-amplify-react to support PKCE also.

Is your feature request related to a problem? Please describe.
I cannot use aws-amplify-react as webview to sign in with iOS and Android, it would save time if we could reuse webview rather than building separate login for each platform,
PKCE oauth2 flow is required to do that

Describe the solution you'd like

1. the iOS or Android app generates string and string_hash
2. the app opens the web view with the aws-amplify-react an passes the string_hash
3. we send the string_hash together with the sign in request
4. the request returns code instead of tokens
5. the webview returns to the app redirect_uri passing the code
6. the app sends the code together with the string generated in the beginning - the server checks the code and checks that the string matches the string_hash received in the sign in request and returns tokens
7. app can use tokens to access APIs safely

Describe alternatives you've considered
I considered passing directly tokens to the app but it is not secure as redirect uri is not unique for the apps - that's why PKCE flow is required to do that safely in this way

[undefobj]

@CodingToBeWithHer when you say "all three platforms" do you specifically mean React Native when referencing iOS and Android? Or do you mean native development with iOS and Android which does support the Cognito Hosted UI today.

[CodingToBeWithHer]

Cognito Hosted UI:

• hosted by AWS
• can NOT change the language
• very limited modifications to UI only through AWS Cognito Console

aws-amplify-react UI:

• library with built in UI that I can host myself
• can change language
• can change many elements of UI (or fork it and built myself)

aws-amplify-react UI does NOT support PKCE flow, please refer to oauth2 PKCE flow documentation - that is where we use webview for signin and get back code and exchange that for tokens

atm with aws-amplify-react UI I get tokens immediately so it's not possible to use it safely to sign in on Android or iOS

[undefobj]

aws-amplify-react does support Oauth2 flow with the Cognito Hosted UI including code grant flow: https://aws-amplify.github.io/docs/js/authentication#launching-the-hosted-ui-in-react

However this is just for web applications. To clarify from before, when you talk about "it's not possible to use on Android or iOS" are you referring to React Native or are you talking about native iOS and Android app development? We're looking to provide this capability for all those solutions but more specifics would help.

[CodingToBeWithHer]

I am indeed NOT referring to React Native nor iOS nor Android native development.

The oauth2 specification for PKCE flow:
https://oauth.net/2/pkce/
https://auth0.com/docs/api-auth/tutorials/authorization-code-grant-pkce

defines how to use webview for authenticating on native apps.
so indeed I'd like to reuse aws-amplify-react also for native apps but it is not possible until it support the PKCE flow.

[CodingToBeWithHer]

PKCE is supported by Hosted Cognito UI as mentioned here:
https://docs.aws.amazon.com/cognito/latest/developerguide/authorization-endpoint.html

however I cannot use it as language and other aspects cannot be modified in hosted UI.

So alternative could be Built in UI in aws-amplify-react:
https://aws-amplify.github.io/media/ui_library

but this one is not supporting PKCE.

So again, I understand I could use Android and iOS native libraries but I was hoping that with PKCE being supported on aws-amplify-react I could save time to develop only on web authentication and reuse across all platforms

[undefobj]

Ok, so it sounds like you want to just use a web application. To be clear, you are mentioning "use a web view" but that actually is not valid with OAuth flows in native apps as you must use a custom View Controller or Custom Tab solution: https://tools.ietf.org/html/rfc8252

If you are building only a web application then and your users are launching it in the browser of choice on Android or iOS, then today you cannot use the Authenticator component for this flow but we can take that as a feature request. The solution per the links above are to either use the withOauth Higher Order Component or leverage the custom URL with User Pools.

[maziarz]

Any progress with PKCE support?

[undefobj]

PKCE is supported via the hosted UI as outlined above.

We are enhancing functionality to enable you to use it in React Native. We're also looking at making the HOCs a little easier to use in your React apps by passing the social provider as a function via props.

@maziarz aside from these things is there more you're looking for?

[maziarz]

@undefobj is there a way to get in touch with you outside of github, slack etc.? I have premium support.

[CodingToBeWithHer]

@undefobj
the hosted UI has limitations (for example - no way to change language, and other limitations compared to react amplify library)

this ticket was opened asking for PKCE support for aws-amplify-react, so answer that hosted UI supports PKCE does not answer the questions really as my use case does allow me to use the hosted UI (due to limitations like language etc)

[maziarz]

@CodingToBeWithHer Hosted UI is also not an option for me. I am more interested in Authorization Code Grant and PKCE. Seems to be something that is supported in the AUTHORIZATION endpoint, so all hope is not entirely lost.

[undefobj]

@maziarz you can use code grant flow with the hosted UI as outlined in https://aws-amplify.github.io/docs/js/authentication#using-amazon-cognito-hosted-ui by setting responseType: 'code' when calling Amplify.configure().

@CodingToBeWithHer customizations to the hosted UI itself should be made to the Cognito team on the AWS forums here: https://forums.aws.amazon.com/forum.jspa?forumID=173
This is the Amplify project repo which is not specific to any AWS service team. While I can forward your request for more customization to them, it's best if you open a request yourself for tracking purposes. That being said, you can build your own UI if the default hosted settings are not useful for you and build out the URL of the hosted UI to make token exchange calls against it. Please see this section of the documentation for an example: https://aws-amplify.github.io/docs/js/authentication#make-it-work-in-your-app

[maziarz]

@undefobj, unfortunately hosted UI is not an option. If the hosted UI had similar customisations as Auth0 it could have been considered as an option. Instead I prefer that the user goes through our own authentication UI. Again my question is regarding PKCE support in an non-Hosted UI scenario. Why is this feature being ignored/dismissed?

[undefobj]

@maziarz no one is dismissing your request or ignoring it, but this forum is for the general Amplify library and not specific to Cognito. As I noted I'll pass along the request however I also suggest that you raise it with them on their support forum: https://forums.aws.amazon.com/forum.jspa?forumID=173
From an Amplify perspective all we can do is give you the options to use the existing UI or build out your own using the URL as stated before. For service changes you need to raise that with the Cognito team.

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

@CodingToBeWithHer @maziarz we have a PR with PKCE support here: https://github.com/aws-amplify/amplify-js/pull/3005#issuecomment-479737451
This allows you to use either the Hosted UI or just the OAuth endpoint and you'll be able to build out your own custom UX.

[powerful23]

Closing this issue as this feature has been released with the latest version of amplify. Please let us know if you have further concern.