Server Side Rendering doesnt work with Auth0, NX + Angular (SSR)

Help
,
1

I put together a PoC to test the angular universal with auth0 and I experience the following error when I navigate to the server side rendered path:

Router Event: NavigationError
  NavigationError(id: 1, url: '/auth', error: ReferenceError: location is not defined)
  NavigationError {
    id: 1,
    url: '/auth',
    error: ReferenceError: location is not defined
        at shouldHandleCallback (webpack:///node_modules/@auth0/auth0-angular/fesm2020/auth0-auth0-angular.mjs:457:19)
        at constructor (webpack:///node_modules/@auth0/auth0-angular/fesm2020/auth0-auth0-angular.mjs:289:14)
        at factory (webpack:///node_modules/@auth0/auth0-angular/fesm2020/auth0-auth0-angular.mjs:465:17)
        at getNodeInjectable (webpack:///node_modules/@angular/core/fesm2022/core.mjs:4391:44)
        at searchTokensOnInjector (webpack:///node_modules/@angular/core/fesm2022/core.mjs:4318:16)
        at lookupTokenUsingNodeInjector (webpack:///node_modules/@angular/core/fesm2022/core.mjs:4267:34)
        at getOrCreateInjectable (webpack:///node_modules/@angular/core/fesm2022/core.mjs:4179:23)
        at Module.ɵɵdirectiveInject (webpack:///node_modules/@angular/core/fesm2022/core.mjs:11996:19)
        at NodeInjectorFactory.AuthComponent_Factory (webpack:///apps/angular-universal/src/app/pages/auth/auth.component.ts:30:27)
        at getNodeInjectable (webpack:///node_modules/@angular/core/fesm2022/core.mjs:4391:44),
    target: RouterStateSnapshot {
      _root: TreeNode { value: [ActivatedRouteSnapshot], children: [Array] },
      url: '/auth'
    },
    type: 3
  }
ERROR ReferenceError: location is not defined
    at shouldHandleCallback (./node_modules/@auth0/auth0-angular/fesm2020/auth0-auth0-angular.mjs:457:19)
    at constructor (./node_modules/@auth0/auth0-angular/fesm2020/auth0-auth0-angular.mjs:289:14)
    at factory (./node_modules/@auth0/auth0-angular/fesm2020/auth0-auth0-angular.mjs:465:17)
    at getNodeInjectable (./node_modules/@angular/core/fesm2022/core.mjs:4391:44)
    at searchTokensOnInjector (./node_modules/@angular/core/fesm2022/core.mjs:4318:16)
    at lookupTokenUsingNodeInjector (./node_modules/@angular/core/fesm2022/core.mjs:4267:34)
    at getOrCreateInjectable (./node_modules/@angular/core/fesm2022/core.mjs:4179:23)
    at Module.ɵɵdirectiveInject (./node_modules/@angular/core/fesm2022/core.mjs:11996:19)
    at NodeInjectorFactory.AuthComponent_Factory (./apps/angular-universal/src/app/pages/auth/auth.component.ts:30:27)
    at getNodeInjectable (./node_modules/@angular/core/fesm2022/core.mjs:4391:44)

Although, the auth0 login works but the page is not rendered server side which is what I want to achieve.

I did stumble upon this stackoverflow article but unfortunately this did not help to resolve the issue I’m facing.

Any help would be appreciated, cheers!

2

I have the same error on Angular with SSR

I managed to fix doing this:

on your router guard:

export const Auth0Guard = async () => {
  const platformService = inject(PlatformService);

  if (!platformService.getIsBrowser()) {
    return false;
  }
  const authService = inject(AuthService);

  const isAuthenticated = await firstValueFrom(authService.isAuthenticated$);

  if (!isAuthenticated) {
    authService.loginWithRedirect();
    return false;
  }
  return true;
};

my platform.service

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({
  providedIn: 'root' 
})
export class PlatformService {
  private isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(this.platformId);
  }

  getIsBrowser(): boolean {
    return this.isBrowser;
  }
}

is not the best way but works!

3

I forgot the imports

import { inject } from ‘@angular/core’;

import { AuthService } from ‘@auth0/auth0-angular’;

import { PlatformService } from ‘…/platform.service’;

import { firstValueFrom } from ‘rxjs’;