Search code examples
angularamazon-s3amazon-cloudfrontopenid-connectokta

Redirection issue with angular application static web site hosted in Amazon S3 bucket with OKTA Authorization grant with PKCE flow

I have hosted angular 9 app on Amazon S3 as static website hosting and integrated with a OIDC authentication provider (OKTA) and Authorization grant with PKCE flow.

App is deployed successfully and when I click Login, my app gets redirected to okta for login, but when OKTA redirects using implicit/callback, my browser throw following error-

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: implicit/callback

I have also used CloudFront to redirect http to https.

My application setup is:

  1. Angular app build and uploaded to Amazon S3
  2. S3 static website hosting
  3. Cloud Front Distribution for S3
  4. Hosted domain(Route 53) to CloudFront
Solution

  • Thanks Gary!

    I was able to resolve this issue by following steps:

    1. Wrote redirection rules in S3 bucket -

      403 index.html 404 https www.mydomain.com #!/

    2. Updated the CloudFront behavior to forward the query strings by Selecting "Forward all, cache based on all" in CloudFront behavior for "Query String Forwarding and Caching"

    3. Updated the Error document to index.html in CloudFront "Error Pages" for 403 and 404.

    4. Adding following JavaScript to index.html file

    <body>
  <script>
      var hash = window.location.hash;
      const newHashpath = hash.replace("#!/",""); //(/#!(\/.*)$/.exec(window.location.pathname) || [])[1];
      if (newHashpath) {
        // history.replace(path);
        window.history.pushState({},'',newHashpath);
      }
    </script>
  <app-root></app-root>
</body>