Amplify-js: Cognito hosted UI federatedSignIn not working with react native:- "Error in cognito hosted auth response Error: invalid_request"

[malithjkmt]

As in the docs I used oauth configs to login using fb | google with config like in below template.

const config = {
  Auth: {
    identityPoolId: process.env.REACT_APP_IDENTITY_POOL_ID,
    region: process.env.REACT_APP_REGION,
    userPoolId: process.env.REACT_APP_USER_POOL_ID,
    userPoolWebClientId: process.env.REACT_APP_USER_POOL_WEB_CLIENT_ID,
    oauth : {
      domain : 'your-domain-prefix.auth.us-east-1.amazoncognito.com', 
      scope : ['phone', 'email', 'profile', 'openid','aws.cognito.signin.user.admin'], 
      redirectSignIn : 'http://localhost:3000/auth/', 
      redirectSignOut : 'http://localhost:3000/signout/', 
      responseType: 'code'
    }
  }
}
````
Configured with ` Amplify.configure(config)` when the app starts.

Added 

Hub.listen("auth", ({ payload: { event, data } }) => {
switch (event) {
case "signIn":
console.log('signed in data: ', data)
break;
case "signOut":
this.setState({ user: null });
break;
}
});

in the componentDidMount() and used `Auth.federatedSignIn({ provider: 'Facebook' })` and `Auth.federatedSignIn({ provider: 'Google' })`  to signIn.

"react": "^16.5.2",
"aws-amplify": "^1.1.28",
"aws-amplify-react": "^2.3.8"

**Works 100% on React web app** (both Fb and Google logins)

But, when I try this with **react-native** app with following changes,

  redirectSignIn : 'app://myapp/auth/', 
  redirectSignOut : 'app://myapp/signout/',

below happens,

1. open browser, get permissions from user and redirect to cognito domain endpoint aouth2/authorize 
2. return to app with 'code' 
3. then, frontend amplify tries to retrieve tokens from token endpoint using that 'code'

But, it fails with **`AuthClass - Error in cognito hosted auth response Error: invalid_request`**

"react": "16.4.1",
"react-native": "0.56.0",
"aws-amplify": "^1.1.28",
"aws-amplify-react-native": "2.1.12",

NOTE: redirect uri in aws cognito console was set matching to the frontend

then I tried with following library variations

"aws-amplify": "1.2.29-unstable.0", "aws-amplify": "1.2.29-unstable.1", "aws-amplify": "1.2.29-unstable.2"
"@aws-amplify/auth": "1.2.25-unstable.2"
"aws-amplify-react-native": "2.1.13-unstable.2"
`` But same issue. Among hundred of tries, it worked once! received all 3 tokens (access, id, refresh) But, right after it, with the same configurations, it again began to fail with sameinvalid_request` error.

NOTE: tried with brand new fb, google accounts

Can someone help me with this please?

[lenarmazitov]

I have the same error. Before everything was worked fine.

[malithjkmt]

UPDATE

Works when you disable 'remote debugger'!
Somehow it interfere the Hub module's listening to events.

@jordanranz @powerful23 do you have any explanation for this?

[lenarmazitov]

UPDATE

Works when you disable 'remote debugger'!
Somehow it interfere the Hub module's listening to events.

@jordanranz @powerful23 do you have any explanation for this?

Confirm with react-native up to 0.58.*

But have to notice that for react-native >= 0.59.0 "Error: invalid_request" happens all time. !

[woles]

I have production app in with everything worked as it should around ~2 weeks ago,
now withouth any change in code, same build cause invalid_request

1) New user is created in cognito
2) User cant login to the app by federatedSignIn

react-native 0.57.1
aws-amplify: 1.1.25
aws-amplify-react-native: 2.1.10

If anybody have an idea for the solution.... on production build i dont have remote debugger, anyway same effect

[woles]

I checked one more thing:
when responseType: 'token'
and you will check Implicit grant in options it works fine but the docs says that there is no auto refreshing of token this way -> temporary solution for developing

[Davis10733]

I have same issue with responseType: 'code'. But it can work with responseType: 'token'.
I have question, since there is no refresh token so we need to execute Auth.federatedSignIn() when the access token is expired, right ?

[woles]

Yes, you need to take care for token refresh by yourself - I hope sombody will fix that quickly.

[iamdavidmartin]

I had the same issue with "invalid_request". I tried implementing the polyfill people are using (referenced here) and I was able to get authentication to "work". "Work" in quotes because now there's a new error, however authentication is successful.

The new error is "invalid_grant". Authentication is successful in spite of this error. So far I can't tell if it's an error on my end or with Amplify. I believe it's with Amplify because I've created a bare-bones test app with one screen and one file.

If you try the polyfill, please let me know if you also encounter "invalid_grant". Thanks!

[loganwedwards]

@iamdavidmartin I put the polyfill in and am getting a different error than before:
Exception+processing+authorization+code. In fact this error is propagated from the original code callback:

// The state param is obfuscated here
success app-staging:///?error_description=Exception+processing+authorization+code&state=xxxxxxxxxxxx&error=server_error#_=_

Other Hub events that I have logged are:
The OAuth response flow failed and A failure occurred when returning to the Cognito Hosted UI

Update: It does appear I am getting logged in with invalid_grant, but now seeing what others have reported: Can't find variable: URLSearchParams.

[iamdavidmartin]

@LoganArnett Ok, so since we're both getting it, invalid_grantseems to be an Amplify error.

I suppose I'm just going to have to wait for Amplify to get these problems fixed. Fortunately my project isn't shipping for a couple of months.

[uchar]

Same here.
Using this config file :

const awsmobile ={
  "aws_appsync_region": "ap-southeast-2",
  Auth: {
    identityPoolId: "...",
    region: "...",
    userPoolId: "...",
    userPoolWebClientId: "...",
  },
  oauth : {
    domain : '...',
    scope : [ 'aws.cognito.signin.user.admin'],
    redirectSignIn : 'myapp://signin',
    redirectSignOut : 'myapp://signout',
    responseType: 'code'
  }
};

export default awsmobile;

When I use Auth.federatedSignIn({provider: 'Google'}); and enabling DEBUG log level I get these errors :

'[DEBUG] 10:21.378 OAuth - Calling token endpoint:
 https://magnyv5-domain.auth.ap-southeast-2.amazoncognito.com/oauth2/token with', { grant_type: 'authorization_code',
   code: 'a17c40d4-1a3f-47f4-b67c-7915d649101b',
   client_id: '.....',
   redirect_uri: 'myapp://signin',
   code_verifier: 'RDoPZ0ZfThCD8HJGMHn2RbwiLpERnnARSXHIwDAT7L2laDls09G6R1bpTNGuNn3KgRPolty2tMCXKBbiypb2FriyVmZbhtzqdnlAmo8TQsF6mneV5obZjwRCpeB49Ay6' }
 '[DEBUG] 10:22.190 AuthClass - Error in cognito hosted auth response', { [Error: invalid_request]
   line: 175806,
   column: 32,
   sourceURL: 'http://localhost:8081/index.delta?platform=android&dev=true&minify=false' }
 '[DEBUG] 10:22.331 Hub - Dispatching to auth with ', { event: 'signIn_failure',
   data:
    { [Error: invalid_request]
      line: 175806,
      column: 32,
      sourceURL: 'http://localhost:8081/index.delta?platform=android&dev=true&minify=false' },
   message: 'The OAuth response flow failed' }
 '[DEBUG] 10:22.335 Analytics - on hub capsule auth', { event: 'signIn_failure',
   data:
    { [Error: invalid_request]
      line: 175806,
      column: 32,
      sourceURL: 'http://localhost:8081/index.delta?platform=android&dev=true&minify=false' },
   message: 'The OAuth response flow failed' }

If I take the params from the above log and use them in postman, It just works fine and return accessToken,refreshToken . So it seems an amplify problem and not hosted ui.

[ltankey]

It seems related to https://github.com/facebook/react-native/issues/23922 and https://github.com/aws-amplify/amplify-js/issues/3183

RN has introduced a global URLSearchParams. If we use delete globals.URLSearchParams then it is sure to break for other libraries that expect it. Amplify seems to try to handle both scenarios (presumably web vs native):

https://github.com/aws-amplify/amplify-js/blob/master/packages/auth/src/OAuth/OAuth.ts#L144

    const { access_token, refresh_token, id_token, error } = await (await fetch(oAuthTokenEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: typeof URLSearchParams !== 'undefined' ? new URLSearchParams(body) : body
      }) as any).json();

      if (error) {
        throw new Error(error);
      }

Strange though that this seems to fail if an implementation of URLSearchParams is provided.

[ltankey]

Using a RN polyfill (with something like whatwg-url) works but results in the Amplify fetch call to not send a body. If the fetch call just sends the string it forms beforehand (as it was before URLSearchParams was introduced in RN 59) it worked fine.

Is this required in amplify? Is it just additional sanitisation?

[jenshandersson]

Thanks for that info @ltankey. It works fine both on web and mobile when just removing that logic. Why do we need URLSearchParams there at all?

body: typeof URLSearchParams !== 'undefined' ? new URLSearchParams(body) : body
=>
body: body

https://github.com/aws-amplify/amplify-js/blob/master/packages/auth/src/OAuth/OAuth.ts#L144

[ltankey]

I ended up writing a monkey patch for it so I didn't have to fork the lib. It feels like the check is an additional layer of sanitisation, and used for the browser but ignored otherwise for native (or was, because it wasn't implemented).

[jenshandersson]

Yea same here. But if it works just as fine without URLSearchParams then it should just be removed 🤷‍♂️

[ltankey]

Agreed. It seems that to populate body it already goes through code which formats it correctly

[jenshandersson]

I submitted a PR #3576, lets see what the maintainers say.

[ltankey]

@iamdavidmartin I'm getting the same issues with a polyfill described in #3576

Did you have any luck fixing this? It seems I am getting many events to Hub, sometimes a combination of signIn_failure but ultimately end up signing in (sometimes), which is really strange.

[iamdavidmartin]

@ltankey When the user logs in initially, everything works fine. On subsequent app reloads I have the same problem as you do: signIn_failure and cognitoHostedUI_failure. However, the user is still authenticated.

Like you said, really strange. At this time, I'm moving on with other development and I'll come back to this in a while hoping that there's been some resolution.

[iamdavidmartin]

@ltankey This error disappeared for me today. Maybe Amplify fixed this issue. Is it fixed on your end?

[dineshmatta]

@iamdavidmartin I am still getting the error with 1.1.30 version of aws-amplify library

[Unhandled promise rejection: Error: invalid_request]

• node_modules/@aws-amplify/auth/lib/OAuth/OAuth.js:143:44 in
• node_modules/@aws-amplify/auth/lib/OAuth/OAuth.js:52:27 in step
• ... 11 more stack frames from framework internals

[dineshmatta]

Also tried updating aws-amplify-react-native to 2.1.14, but still same error

[iamdavidmartin]

@dineshmatta i should have been more specific. the error the disappeared for me was invalid_grant. you're getting invalid_request which i was able to solve with this fix others provided:

import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";    
polyfillGlobal("URLSearchParams", () => undefined);    
delete global.URLSearchParams;    

[dineshmatta]

Thanks @iamdavidmartin for clarifying, that resolved invalid_request error for me. But I am still getting Error: invalid_grant error event after upgrading all my libraries, not sure what I am doing wrong

[dineshmatta]

@iamdavidmartin Never mind, I just upgraded my aws-amplify library to 1.1.31-unstable.5 version after @manueliglesias fix and it is now working for me

Thanks @manueliglesias

[ni3galave]

I am also getting the same issue even successful login using google federation.
OAuth - Error handling auth response., [Error: invalid_grant]

"aws-amplify": "^1.2.2",
"aws-amplify-react": "^2.5.2",
"aws-amplify-react-native": "^2.2.2",

[vfreestone]

I facing same issue, tried with latest version of aws-amplify.

[kavyasoni]

Is it resolved? I am still blocked on this. @iamdavidmartin how can I do polyfillGlobal in reactJs?

[iamdavidmartin]

@kavyasoni It seems the polyfill is no longer required. I've got it commented out and auth is working. here are some versions of packages i'm using:
"aws-amplify": "^1.1.38",
"aws-amplify-react-native": "^2.1.13",
"aws-appsync": "^2.0.2",
"aws-appsync-react": "^2.0.2",
"react": "16.8.3",
"react-dom": "16.8.3",
react native: 0.59.8

[rahulje9]

I have added google, Facebook id and secret in aws.

But in the hub listener, I'm getting the following error.

signIn_failure [NotAuthorizedException: Identity pool - * poolid * does not have identity providers configured.] However, the users who tried login using facebook and google is registered and is showing in the user list. I'm pretty much stuck at this point, any help would be appreciated.

[anuradhawick]

I am still getting this error in Angular JS with the latest amplify (I got this in v2 also).

However, this only happen in the first attempt. The failing network request has the following params;

grant_type: authorization_code
code: <CODE>
client_id: <CODE>
redirect_uri: https://www.vinyl.lk/

The successful token request has;

grant_type: authorization_code
code: <CODE>
client_id: <CODE>
redirect_uri: https://www.vinyl.lk/
code_verifier:  <CODE>

Anyone having the same problem?

[reggiepangilinan]

I'm also experiencing the same issue @anuradhawick. in my react project. For some reason, the call to get /token is executed twice. even though I have Amplify.configure(awsExports); set up once in the entire app.
I'm using the latest version of amplify
"aws-amplify": "^3.0.20",

With a custom auth UI

There's a lot of similar issue floating around
https://github.com/aws-amplify/amplify-js/issues/3642
https://github.com/aws-amplify/amplify-js/issues/3185#issuecomment-492786930
https://github.com/aws-amplify/amplify-js/issues/6041
https://github.com/aws-amplify/amplify-js/issues/5829
https://github.com/aws-amplify/amplify-js/issues/6172

Any chance you resolved the issue?

[JacksonGariety]

I upgraded @aws-amplify/auth from 3.2.3 to 3.3.1 and now I'm getting this error.

EDIT: after I upgraded, I got an error that said "scope must be a String Array". I'm loading the scope from a .env file, so I just call .split(' ') on the string. That worked, but now I get the invalid_scope error.

EDIT 2: I removed the call to split and changed scope to scopes (plural) and now everything works on the latest version.

[davegravy]

I'm also experiencing the same issue @anuradhawick. in my react project. For some reason, the call to get /token is executed twice. even though I have Amplify.configure(awsExports); set up once in the entire app.
I'm using the latest version of amplify
"aws-amplify": "^3.0.20",

With a custom auth UI

There's a lot of similar issue floating around

3642

#3185 (comment)

6041

5829

6172

Any chance you resolved the issue?

Add my issue to that list:

7364