Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify

Question

Been racking my brain on this for a couple of days. I am trying to deploy my react app on AWS Amplify. When I launch the application I am correctly directed to a sign in page (Uses Auth0 Universal login) After logging in I am redirected back to my web app through the callback URL.

When my page loads I get the following message

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>B2173BDEE0658858</RequestId>

<HostId>
TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
</HostId>
</Error>

I am not hosting the web app through an s3 bucket, I uploaded my build file directly to AWS Amplify.

Any ideas on what the issue is?

Answer 1

Use this rule on amplify console.

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