Access Denied when requesting route after authentication - AWS Cloudfront and AWS S3

Question

I have a S3 bucket of a Vuejs application with the content shown in the link s3 bucket content

To deliver that content i have a distribution in Cloudfront. To make that distribution secure, i created a OAI to associate into Cloudfront distribution and S3 bucket. ** The distribution origin is the bucket not the bucket domain. So when i request the Cloudfront domain the login page is shown, after click on the login button an OIDC flow is started, and when the Callback router is requested is showed a page with acess denied as the link show acess denied. To try to get around this problem I created a function in CLoudfront that checks the url and renders the index.html, but that didn't work. How can i fix this? Remembering that I don't have a subdirectories with index.html inside them. I have an index.html that loads the js scripts that are built in the vue process

score 2 · Accepted Answer · answered Jan 26 '22 at 18:53

2

I solved the problem registering an Error pages in Cloudfront distribution, in my case a 403 error code, so when 403 is launched the Cloudfront redirects to index.html, and from there vue knows what do. btw i found the solution here answer

answered Jan 26 '22 at 18:53

Wendel Rios

41
1
6

After it redirects to the index.html, it not loading the font and icons. How can I solve this? – Theepag Dec 14 '22 at 06:34

score 0 · Answer 2 · answered Jan 21 '22 at 15:18

0

You might want to consider adding a web page redirect rule in your S3 that will serve the index.html file if a logical route (Virtual, belongs to the vue router and not a physical file) is hit so that your CF won't serve 404s. Here is a link that explains more about S3 redirect rules.

You can try adding this code on your S3 bucket's redirection rule:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com</HostName>
      <ReplaceKeyWith>index.html</ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

answered Jan 21 '22 at 15:18

Allan Chua

9,305
9
41
61

1

actually is like a 403 code. thanks for your response, i will read about the S3 redirect rules. – Wendel Rios Jan 21 '22 at 15:22
You are welcome Wendel! If the solution works, you can mark this response as the answer so other people who experience the same issue can solve the problem too man! – Allan Chua Jan 21 '22 at 15:23
okay, if it works i will. – Wendel Rios Jan 21 '22 at 15:26

score 0 · Answer 3 · answered Mar 25 '23 at 08:08

You need to update the Rewrites and redirects configuration for Single Page App in AWS Amplify Console

Go to AWS Amplify
Choose your application
App Setting => Rewrites and redirects
Add a rule:

Source address: /<*>
Target address: /<*>
Type: 404 (Rewrite)

Save. Everything has been set up!

Access Denied when requesting route after authentication - AWS Cloudfront and AWS S3

3 Answers3