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.

Answer 1

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 = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

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