CODEWITHSUNDEEP
reactjsamazon-web-servicesaws-amplify
Vinit Khandelwal
Vinit Khandelwal

Reputation: 527

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

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>

Error as seen on browser

How do I resolve this?

Upvotes: 7

Views: 6694

Answers (3)

jayseven525
jayseven525

Reputation: 95

Vinit Khandelwal answer is correct but if anyone is looking for the documentation regarding this issue, here it is. It's a simple configuration add in the Amplify console. Works like a charm!

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

Upvotes: 3

Thomas Steven
Thomas Steven

Reputation: 41

When you create a project through the amplify console it automatically creates rewrite rules. When you create a project from the CLI it does not create rewrite rules.

You can copy the re-write rules Amplify uses on a project created from the console to the rewrite rules for your project.

I've included the rewrite rules below.

[
    {
        "source": "/<*>",
        "target": "/index.html",
        "status": "404-200",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

Upvotes: 1

Vinit Khandelwal
Vinit Khandelwal

Reputation: 527

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.

Upvotes: 25

Related Questions