Single-Page App Email Redirect Issue
For single-page applications (SPAs), the Redirect To URL may contain the hash and route for a particular state/view in the app, followed by route parameters.
This can cause the following issue with the Redirect To URL:
Which will result in a user getting redirected to following URL:
This is per the RFC 3986 spec that defines the expected order of a URL as
However, SPA frameworks (such as Angular) typically expect URLs in the
scheme|authority|path|fragment|query format (with the query string parameters at the end). This causes the application not to enter the expected state.
For example, with the above URL, the app will be routed to
/ instead of
Using a Query String Parameter
To work around this limitation of SPA frameworks, it is recommended to use a server-side callback URL as the redirect To URL with a
route parameter that preserves the SPA app route for the redirect. Once in this server-side URL, simply redirect to the SPA route saved in the
route parameter along with rest of the query string.
- Add a server-side URL as the redirect To URL with a
routeparameter that records the SPA route for the redirect.
- Next, create a server-side route controller that reads the
routeand other parameters from the URL and redirects to the SPA route specified in
routeparameter. Remember to append the other parameters received from Auth0.