Issue Description:
After authentication with Auth0, the user receives a 404 Not Found error when redirected to the /authorize route on their Agora Builder web application. The application fails to handle the callback correctly after the user logs in.
Platform/SDK:
React web application (Agora Builder app) integrated with Auth0, hosted on Vercel.
Error Message:
404 Not Found – DOMAINNAME.COM/authorize
Step by Step Solution:
1. Check Auth0 configuration:
- Go to your Auth0 Dashboard → Applications → Settings.
- Make sure the Allowed Callback URLs field includes your actual callback route. For example:
https://yourdomain.com/callback- Save your changes.
2. Update your React routes:
- Open your React application’s routing setup file and replace or add a route for the callback:
jsx
<Route path="/callback" element={} />
- Remove or correct any route referencing /authorize.
3. Verify hosting configuration on Vercel:
- Ensure that your vercel.json file is located in the root directory of your project.
- This file should include a rewrite rule that redirects all routes to your index.html file, allowing client-side routing to handle navigation without throwing 404 errors. Example:
json
{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}
- Redeploy the application after updating the configuration.
4. Test the login flow:
- Sign in again using Auth0 and verify that the application correctly redirects to /callback instead of /authorize.
Root Cause:
The /authorize endpoint belongs to Auth0 and should not be hosted in the React app. Additionally, the vercel.json configuration file was placed in the wrong directory, so the routing rules were not applied, causing the 404 error.
Prevention/Best Practice:
- Always ensure the callback URL in Auth0 matches the route handled in your app.
- Keep hosting configuration files (like
vercel.json) in the project’s root directory. - Confirm SPA fallback routing is enabled so all routes correctly resolve to
index.html.