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:

// ParameterHashLocationStrategy.ts

import { Injectable } from '@angular/core';
import { HashLocationStrategy } from '@angular/common';

@Injectable()
export class ParameterHashLocationStrategy extends HashLocationStrategy {
	override prepareExternalUrl(internal: string): string {
		return window.location.search + super.prepareExternalUrl(internal);
	}
}

Now we need to tell Angular to use this location strategy in app.module.ts:

// app.module.ts

import { LocationStrategy } from '@angular/common';
import { ParameterHashLocationStrategy } from './ParameterHashLocationStrategy';

@NgModule({
  ...
  providers: [
    ...
    {
	  provide: LocationStrategy,
	  useClass: ParameterHashLocationStrategy
    }  
  ],
  ...
})
...

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.