Incorrect Behavior on Page Refresh and Incorrect Logins in SPA

[tristenwallace]

Problem Summary

Our Single-Page Application (SPA), hosted on Amazon S3, encounters issues where interactions that result in navigation to paths like /login lead to a 404 error upon page refresh or when entering incorrect login details. This issue stems from the S3 bucket's inability to handle routes that do not correspond to physical files appropriately. Currently, as a workaround, all such errors redirect users back to the home page.

Details

Amazon S3, which hosts our static SPA, looks for a file matching the exact path in the URL when a page is refreshed or navigated to directly. Since SPAs typically manage routing on the client side and utilize a single index.html to handle all routes, this direct path lookup fails for paths like /login, resulting in a 404 error.

Current Workaround

As a temporary measure, any 404 error redirects to the home page (index.html). This is not an ideal solution as it disrupts the user experience, especially during interactions requiring feedback like login attempts.

Expected Behavior

The application should maintain the current route or display appropriate feedback without redirecting to the home page in cases of:

• Refreshing the page.
• Incorrect login attempts that should ideally redirect back to the login page with an error message instead of causing a route failure.

Steps to Reproduce

1. Navigate to <application_url>/login
2. Enter incorrect login credentials.
3. Observe the behavior (results in a 404 error and redirects to the home page).
4. Refresh the page at any non-root URL, e.g., <application_url>/dashboard
5. Observe that the refresh leads to a 404 error and redirection to the home page.

Possible Solutions

• Integrating CloudFront with S3: Configure AWS CloudFront as a CDN to handle routing more gracefully by serving index.html for all unmatched routes with a 200 status, allowing client-side routing to function correctly.
• Implementing a Redirect Service: Utilize Lambda@Edge for advanced routing and error handling patterns before requests hit the S3 bucket.
• Enhanced Client-Side Handling: Improve error handling mechanisms on the client side to manage navigation failures and display appropriate user feedback gracefully.

[tristenwallace]

Problem

When you refresh a page, the browser tries to directly access the file on the server, which doesn't exist for dynamic routes in an SPA. Instead, all routes should return the index.html file, which then lets the client-side routing handle the correct view.

Fix

CloudFront Configuration

1. Default Root Object:

• Go to your CloudFront distribution in the AWS Management Console.
• Under General, set the Default Root Object to index.html.

2. Behavior Settings:

• Navigate to the Behaviors tab.

• Select the behavior for your default cache behavior (usually /).

• Click Edit.

• Ensure the following settings:

  • Viewer Protocol Policy: Redirect HTTP to HTTPS or HTTPS Only.
  • Allowed HTTP Methods: GET, HEAD, OPTIONS.
  • Cache Based on Selected Request Headers: None.
  • Object Caching: Use Origin Cache Headers.
  • Forward Cookies: None.
  • Query String Forwarding and Caching: None.

3. Error Pages Configuration:

• Go to the Error Pages tab.

• Create a custom error response:

  • HTTP Error Code: 404
  • TTL (seconds): 0
  • Custom Error Response: Yes
  • Response Page Path: /index.html
  • HTTP Response Code: 200

4. Invalidate CloudFront Cache:

• Go to the Invalidations tab.
• Click Create Invalidation.
• Enter /* to invalidate all cached files.
• Click Invalidate.

Summary

1. S3 Configuration: Ensure static website hosting is enabled and both index and error documents are set to index.html.

2. CloudFront Configuration:

   • Set the default root object to index.html.
   • Configure error pages to serve index.html for 404 errors.

3. Invalidate Cache: Ensure CloudFront serves the latest content.