UserPool signIn gives CORS error when hitting Cognito domain

[sescotti]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye) CPU: (5) arm64 unknown Memory: 3.18 GB / 7.67 GB Container: Yes Shell: 5.1.4 - /bin/bash Binaries: Node: 20.10.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.8.1 - /usr/local/bin/npm pnpm: 8.11.0 - /usr/local/share/npm-global/bin/pnpm npmPackages: @testing-library/jest-dom: ^5.17.0 => 5.17.0 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^13.5.0 => 13.5.0 @types/jest: ^27.5.2 => 27.5.2 @types/node: ^16.18.68 => 16.18.68 @types/react: ^18.2.45 => 18.2.45 @types/react-dom: ^18.2.18 => 18.2.18 aws-amplify: ^6.0.7 => 6.0.7 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 react-scripts: 5.0.1 => 5.0.1 typescript: ^4.9.5 => 4.9.5 web-vitals: ^2.1.4 => 2.1.4 npmGlobalPackages: eslint: 8.55.0 pnpm: 8.11.0 tslint-to-eslint-config: 2.14.1 typescript: 5.3.3 ```

Describe the bug

Hi, I'm using aws-amplify v6 to use AWS Cognito as my auth strategy. I'm facing CORS issues while trying to use the basic functions from the library. Tried to debug the process to see if there was any way of bypassing this but couldn't find anything.

Getting this error

Access to fetch at 'https://xxxxxxxxxxxxxxxxxx.auth.us-east-1.amazoncognito.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Not sure if the same happens with a custom domain (although after examining the library code, I think it will happen too)

Expected behavior

The library sets the right conditions to avoid hitting a CORS error.

Reproduction steps

1- Clone the following repo https://github.com/sescotti/amplify-cors (Optional: open repo in devcontainers) 2- Install dependencies. 3- Replace the values in App.tsx (lines 6 to 8) 4- Run npm run start and navigate to localhost:3000 5- Fill the form and click Submit.

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[israx]

hey @sescotti . Sorry for any inconvenience while using the library. Based on the code base, seems that you are trying to use a custom endpoint ? Custom endpoints need to be configured on the userpool console. However if you are not using custom endpoints, you only need to provide your userPoolId and userPoolClientId to make requests using the Auth APIs.

[sescotti]

hi @israx thanks for the response. I was trying to use the Cognito domain that I generated in the console (screenshot below)

I was just testing out the amplify-cognito integration with the bare minimum, although at some point the idea is to start using a custom domain. will I have the same problem in that case? is there any way to circumvent this?

thanks!

[cwomack]

Hey there, @sescotti 👋. Like @israx stated above, this looks like it could be tied to the userPoolEndpoint that you're setting as the Cognito Hosted UI URL . The default userPoolEndpoint might be getting overwritten, so can you possibly try just commenting out/removing line #14 in your App.tsx (within the Amplify.configure call). This shouldn't give you any issues when moving to your custom domain, but you may need to specify other properties within the Cognito object if you're doing a scoped Auth config. Check out this link to the docs for an example.

Were you able to resolve the issue with CORS errors though?

[sescotti]

hi @cwomack ok so this is my bad...these domains are ONLY to be used with HostedUI/OAuth, so I don't need to configure them. After removing the userPoolEndpoint property and it worked perfectly, no CORS error in sight.

thanks a lot to both.

[nadetastic]

@sescotti glad you were able to get this resolved, I'll mark this issue as resolved.