Amplify-js: Amplify Auth with Hosted UI process Stripe OAuth url

Created on 24 Apr 2019  路  13Comments  路  Source: aws-amplify/amplify-js

Describe the bug
In my Angular project, I have configured AWS Amplify with OAuth and Hosted UI.

Everything is working fine. When I want to connect with Google, I am redirected back with an url like http://localhost:4200/?code=de79bfa4-xxxxxx&state=2xxxxxx which is well handled by the AWS Amplify Hub.

Now, I want to configure Stripe Connect in my project which also use an OAuth connection flow.

So I configure my OAuth link as defined in the documentation by adding a link as below:

<a class="stripe-connect" href="https://connect.stripe.com/oauth/authorize?response_type=code&client_id=ca_xxxxxx&scope=read_write"><span>Connect with Stripe</span></a>

Problem
I am redirected back with an url like http://localhost:4200/stripe?scope=read_write&code=ac_xxxxxx

Unfortunately, this url is also processed by Amplify and I got the following error message :

zone.js:1152 POST https://[domain].amazoncognito.com/oauth2/token 400
core.js:15724 ERROR Error: Uncaught (in promise): Error: invalid_grant
Error: invalid_grant

To Reproduce
Steps to reproduce the behavior:

  1. Configure the sample repository with Amplify Auth Hosted UI
  2. Edit the Stripe client_id in stripe.component.html
  3. Start the project
  4. Connect with google
  5. Navigate to Settings
  6. Click on the link 'Connect with Stripe'
  7. On the Stripe form, click 'Ignore this account form'
  8. See the error

Expected behavior
Amplify do not proceed the Stripe url

Screenshots
If applicable, add screenshots to help explain your problem.
Capture d鈥櫭ヽran 2019-04-24 脿 01 07 48

Desktop (please complete the following information):

  • OS: MacOS Mojave v 10.14.4
  • Browser Chrome
  • Version 73.0.3683.103

Additional context
N/A

Sample code
Sample repo available : https://github.com/JohanRin/sample-amplify-stripe.git

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

Failed to load resource: the server responded with a status of 400 ()
ConsoleLogger.js:88 [DEBUG] 11:58.755 AuthClass - Error in cognito hosted auth response Error: invalid_grant
at OAuth. (OAuth.js:143)
at step (OAuth.js:52)
at Object.next (OAuth.js:33)
at fulfilled (OAuth.js:24)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17299)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
ConsoleLogger.js:88 [DEBUG] 11:58.756 Hub - Dispatching to auth with Object
ConsoleLogger.js:88 [DEBUG] 11:58.756 Hub - Dispatching to auth with Object
ConsoleLogger.js:88 [DEBUG] 11:58.756 Hub - Dispatching to auth with Object
ConsoleLogger.js:88 [DEBUG] 11:58.756 Hub - Dispatching to auth with Object

Angular Auth bug

Most helpful comment

Thanks everyone for the research! Indeed, authenticating with Stripe via Cognito would be a feature request, but Amplify handling the URL because Stripe also uses code seems like a bug:

https://github.com/aws-amplify/amplify-js/blob/ab08e38e22801e3a212f299057ecc9670fae5633/packages/auth/src/Auth.ts#L1811-L1823

I'm going to bring this up with the team with the recommendation that we track _both_ sides of the OAuth flow (so that it works for federated sign-in with Google, but ignores Stripe).

All 13 comments

With the OAuth flows in Amplify and the code-grant flow, once you get redirected back from the 3rd party Amplify will automatically parse the URL to retrieve the code and use this to retrieve credentials from the 3rd party /token endpoint. I'm unsure if Stripe has this flow in a similar manner to Google, Facebook, etc. If not then it would not work in the same manner.

From my understanding, Stripe seems to have this workflow (see below for more details).

My question
How to configure Amplify to process my Stripe URL?
Is there something planned with the Amplify CLI or do I need to configure it manually?


From the Stripe documentation

screenshot-1

Focus on:

screenshot-2

screenshot-3

Ok I see. Amplify does not support Auth.federatedSignIn using a 3rd party as the federation endpoint which is what is outlined above. The token endpoint is only supported via Cognito User Pools OAuth endpoint at this time. However you can federate with User Pools using social providers like Google, Facebook, and Login with Amazon as well as a 3rd party OIDC provider, so one thing you might try is to setup Stripe as an OIDC provider in your User Pool: https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-oidc-idp.html

I cannot guarantee this would work though as it is dependent on Stripe's OIDC support.

I contacted the Stripe support who told me they do not support OIDC for now.

My question
Is is possible to add exceptions or even filters to Amplify for not automatically parse URL?

Stripe support answer:

Stripe Connect's OAuth API is based upon OAuth 2.0 but it does not implement OpenID Connect at this time. When a user is redirected back to your endpoint after signing up or authenticating their existing account with Stripe, you will need to make a request to Stripe to complete the connection process and obtain their account credentials.

any update?

At this time it's not possible. This is a feature request for the future.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Also having this same issue. Would appreciate if this issue is addressed with the next update for aws-amplify

same problem any workaround? should we just remove social provider sign in and keep regular sign in?

Will amplify stop parsing url if we deactivate federated signin from amplify-cli? Anyone who could reply to this answer would be great as I m stuck right now

Thanks everyone for the research! Indeed, authenticating with Stripe via Cognito would be a feature request, but Amplify handling the URL because Stripe also uses code seems like a bug:

https://github.com/aws-amplify/amplify-js/blob/ab08e38e22801e3a212f299057ecc9670fae5633/packages/auth/src/Auth.ts#L1811-L1823

I'm going to bring this up with the team with the recommendation that we track _both_ sides of the OAuth flow (so that it works for federated sign-in with Google, but ignores Stripe).

Running into the same issue with Intuit.

Apparently Intuit does support OpenID "... Intuit鈥檚 OAuth 2.0 authentication implementation, which conforms to the OpenID Connect specification and is OpenID Certified. To explore this workflow interactively, experiment with the OAuth 2.0 playground."

However, I don't want to have to rely on that / cognito support for it. I want to be able to manually handle auth flows with code in the URL.

Resolving as the above Pull Request has been merged in order to resolve this issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

callmekatootie picture callmekatootie  路  3Comments

shinnapatthesix picture shinnapatthesix  路  3Comments

ldgarcia picture ldgarcia  路  3Comments

leantide picture leantide  路  3Comments

cosmosof picture cosmosof  路  3Comments