Angular Hash-Based Routing Issues
When using magic links or OAuth in an Angular application with hash-based routing, you may encounter an issue where the token passed in the URL is not properly verified. As a result, users are redirected back to the login or sign-up page without any progress or error messages. This issue is caused by how Angular’s default hash-based routing handles query parameters. This guide explains how to resolve this issue.
Custom Location Strategy
Since the default hash-based routing disregards query parameters, we must implement a custom hash-based location strategy that includes the query parameters. We first create the custom strategy by extending and overriding the default hash-based strategy:
Now we need to tell Angular to use this location strategy in app.module.ts
:
You should now be able to use Magic Link, Oauth, and Enchanted Link for both Flows and SDKs while continuing to use a hash-based location strategy in your Angular application.