Access Denied Error from protected routes from react app hosted on AWS Amplify

Question

I have hosted my react app on AWS Amplify. On trying to access a protected route of the application I am getting the following error on screen This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3C8377104116CA48</RequestId>
<HostId>nL3bDs+kXEWE8uBFPTLkFLpRg6CCmKfejftWs5wmTWYO6K6WDzpwsDXJCFTK0EFhjJdaHECfuos=</HostId>
</Error>

How do I resolve this?

Answer 1

I found a solution myself from one of AWS forum where a user was kind to share the solution he got from AWS support. I guess AWS does not want the world to know the solutions to the problems it creates so as to sell the support package. Anyway, here is the solution:

In AWS Amplify console in 'Rewrites and Redirects' section add this record

Source Address: </^((?!\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
Target: /index.html
Type: 200 (Rewrite)

That is it. It magically gets resolved. I don't know why this has to be done or what went wrong in the first place, but taking this action resolves it.