1

I have an Angular 13 App, with uses @auth0/auth0-angular. When I tried to implement SSR, it spits out error that window is not defined. I added the following to server.ts

  const domino = require('domino');
  const fs = require('fs');
  const path = require('path');
  const template = fs.readFileSync(path.join(__dirname, '..', 'browser', 'index.html')).toString();
  const win = domino.createWindow(template);
  global['window'] = win;
  global['document'] = win.document;

This resolved few issues, however after hours of troubleshooting, I came to know that the remaining errors are spit by Auth0, @auth0/auth0-angular.

I read this in @auth0/auth0-angular docs and this in angular-universal docs. I now understand the issue and that there is a solution for it, that has been acknowledged by both the libraries, however I find it hard to implement. I was wondering if there are some sample implementation for the same, of if there is anyone who has already done this?

Any help is appreciated. Thanking you all in anticipation.

Random
  • 3,807
  • 2
  • 30
  • 49
  • Both links refer to https://github.com/auth0/auth0-angular#angular-universal. Guess you meant the universal gotchas for the second link https://github.com/angular/universal/blob/main/docs/gotchas.md – Alex Cooper Feb 18 '23 at 10:16

1 Answers1

0

I faced with the same issue, and spent some time for digging into it, here is the possible solution.

Apply those changes to app.server.module:

import * as crypto from 'crypto';
import { createWindow } from 'domino';
import * as fs from 'fs';

if (!global.window) {
  const template = fs.readFileSync('./src/index.html').toString();
  const win = createWindow(template);
  (global as any).window = win;
  (global as any).window.crypto = crypto;
  (global as any).window.isMobileOnServer = true;
  (global as any).document = win.document;
  (global as any).navigator = win.navigator;
  (global as any).location = win.location;
}

Also add a provider

{provide: AuthService, useValue: {}