Getting an "Access Denied" error when I reload my React app on AWS Amplify

Question

I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.

I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.

Here is an image of the error:

My Amplify app rewrites & redirects :

Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.

user_13381001 · Answer

I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple, Edit your Rewrites and redirects by adding a new rule.

source address =

target address = /index.html

status = 200 (Rewrite)

Country code can be left blank

Save and try refreshing your app again. It should probably work.

use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

user_1819000 · Answer

Then you can just put in (as Dhruv Godambe posted above)

as the Source address and

/index.html as your target address

user_5968703 · Answer

You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.

{
        "source": "",
        "target": "/index.html",
        "status": "200",
        "condition": null
}

Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

user_5238300 · Answer

The correct rule should be like this:

Source address: 
Target address: /index.html
Status: 200

user_14819065 · Answer

Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html

I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).

Here is how to deploy manually correctely:

Run this command

npm run build

Now a build folder will be created.

2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.

3. Upload that compressed file Inside the build directory Now this should work just fine.
:)

user_1960482 · Answer

I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.

Here is how I fixed it:

Run build command
```
npm run build
```
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.

App will run fine on AWS Amplify.

Getting an "Access Denied" error when I reload my React app on AWS Amplify

6 Answers