Unable to use react-oidc-context package due to cors issue

Question

I have a react application that uses the react-oidc-context package as well as the oidc-client-ts package. So, I am having an issue with the signinRedirect function to start a login flow. When I start a login flow I am getting an error message that says my request to the authorization endpoint has been blocked due to the CORS policy. And I am at a loss as to how to modify the Cognito CORS policy.

re:Post Agent · Answer

The CORS (Cross-Origin Resource Sharing) issue you're experiencing with your React application using react-oidc-context and oidc-client-ts packages is a common problem when integrating with AWS Cognito. This occurs because the browser is enforcing security measures to prevent unauthorized cross-origin requests.

To resolve this issue, you need to configure CORS settings in your AWS Cognito User Pool. Here are the steps you can take:

1. Log in to the AWS Management Console and navigate to the Cognito service.

2. Select your User Pool.

3. In the left sidebar, under "App integration", click on "App client settings".

4. For the app client you're using, find the "Allowed OAuth Flows" section.

5. In the "Allowed OAuth Scopes" field, ensure that you have the necessary scopes selected (e.g., openid, email, profile).

6. Most importantly, in the "Allowed OAuth Flows" section, make sure "Authorization code grant" is selected.

7. In the "Allowed callback URLs" field, add the URL of your React application (e.g., http://localhost:3000 for local development).

8. Similarly, add your application's URL to the "Allowed sign-out URLs" field.

9. Save the changes.

After making these changes, your React application should be able to initiate the login flow without encountering CORS issues. The key is to ensure that your application's domain is properly registered in the Cognito settings as an allowed origin for OAuth flows.

If you're still experiencing issues after making these changes, double-check that your react-oidc-context configuration in your React app matches the settings in your Cognito User Pool, particularly the client ID, authority, and redirect URI.

Remember to redeploy your application if necessary after making these changes. If the problem persists, you may need to check your network requests in the browser's developer tools to see if there are any specific headers or configurations that need to be adjusted in your Cognito setup.

**Sources**  
[CORS error while accessing an endpoint in API gateway | AWS re:Post](https://repost.aws/questions/QUQNPMb1igReaWYfGy8k8pHg/cors-error-while-accessing-an-endpoint-in-api-gateway)  
[Requests to API Gateway fail with CORS error if I add headers. | AWS re:Post](https://repost.aws/questions/QUEXhLmmw6Rs-I819fPue1LQ/requests-to-api-gateway-fail-with-cors-error-if-i-add-headers)

Unable to use react-oidc-context package due to cors issue

Add your answer

Relevant content