Server-side rendering (SSR) crash with 'Document not found' error in Keycloak-angular with Angular 17 #539

sanjay-noknok · 2024-02-01T06:02:44Z

Issue Description:
When enabling server-side rendering (SSR) in a Keycloak-angular project with Angular 17, the application crashes with a "Document not found" error. Disabling SSR resolves the issue.

Steps to Reproduce:

Create a new Keycloak-angular project.
Enable SSR in the Angular configuration.
Implement Keycloak-angular
Attempt to run the application.
Observe the crash with the "Document not found" error.

Expected Behavior:
The application should run successfully with SSR enabled, displaying the expected content.

Actual Behavior:
The application crashes with a "Document not found" error when SSR is enabled.

Additional Context:

Angular version: 17
Keycloak-angular version: [v15.0.0]
Keycloak-js version: [v22.0.5]
Operating system: [Windows 11]
Any relevant configuration changes made: [insert changes made to enable SSR]

OZIOisgood · 2024-02-02T19:33:19Z

Hey, @sanjay-noknok
Could you provide us the configuration in your project(the way you have “implemented keycloak-angular”)
Maybe the problem is in the way how have you provided keycloak-angular things.

sanjay-noknok · 2024-02-12T04:40:42Z

@OZIOisgood Thank you for your response.
Here are my keycloak configurations

keycloak.config.ts i have put this file in src/environments folder

import { KeycloakConfig } from "keycloak-js";

const keycloakConfig: KeycloakConfig = {
  URL: "<keycloak-url-here>",
  realm: "<realm-here>",
  clientId: "<client-id-here>",
};

export default keycloakConfig;

app.config.ts file

import { KeycloakAngularModule, KeycloakService } from "keycloak-angular";
import { APP_INITIALIZER } from "@angular/core";
export const appConfig: ApplicationConfig = {
  providers: [
    { provide: APP_INITIALIZER, useFactory: initializer, multi: true, deps: [KeycloakService] },
    KeycloakService, 
    importProvidersFrom(KeycloakAngularModule),
    //other modules added
   ]
}

assets/silent-check-sso.html

<html>
  <body>
    <script>
      parent.postMessage(location.href, location.origin);
    </script>
  </body>
</html>

keycloak-initializer.ts

import { environment } from "@env/environment";
import { KeycloakOptions, KeycloakService } from "keycloak-angular";

export function initializer(keycloak: KeycloakService): () => Promise<boolean> {
  const options: KeycloakOptions = {
    config: environment.keycloak,
    initOptions: {
      onLoad: "login-required",
      checkLoginIframe: true,
    },
    enableBearerInterceptor: true,
    bearerPrefix: "Bearer",
    loadUserProfileAtStartUp: false,
    bearerExcludedUrls: ["/assets", "/clients/public"],

    shouldAddToken: (request) => {
      const { method, url } = request;

      const isGetRequest = "GET" === method.toUpperCase();
      const acceptablePaths = ["/assets", "/clients/public"];
      const isAcceptablePathMatch = acceptablePaths.some((path) => url.includes(path));

      return !(isGetRequest && isAcceptablePathMatch);
    },

    shouldUpdateToken: (request) => {
      return !request.headers.get("token-update") === false;
    },
  };

  return () => keycloak.init(options);
}

auth.service.ts

import { Injectable } from "@angular/core";
import { KeycloakService } from "keycloak-angular";
import { KeycloakProfile, KeycloakTokenParsed } from "keycloak-js";

@Injectable({
  providedIn: "root",
})
export class AuthService {
  constructor(private keycloakService: KeycloakService) {}

  public getLoggedUser(): KeycloakTokenParsed | undefined {
    try {
      const userDetails: KeycloakTokenParsed | undefined = this.keycloakService.getKeycloakInstance().idTokenParsed;
      return userDetails;
    } catch (e) {
      console.error("Exception", e);
      return undefined;
    }
  }

  public isLoggedIn(): boolean {
    return this.keycloakService.isLoggedIn();
  }

  public loadUserProfile(): Promise<KeycloakProfile> {
    return this.keycloakService.loadUserProfile();
  }

  public login(): void {
    this.keycloakService.login();
  }

  public logout(): void {
    this.keycloakService.logout(window.location.origin);
  }

  public redirectToProfile(): void {
    this.keycloakService.getKeycloakInstance().accountManagement();
  }

  public getRoles(): string[] {
    return this.keycloakService.getUserRoles();
  }
}

auth.guard.ts

import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from "@angular/router";
import { KeycloakAuthGuard, KeycloakService } from "keycloak-angular";

@Injectable({
  providedIn: "root",
})
export class AuthGuard extends KeycloakAuthGuard {
  constructor(
    protected override readonly router: Router,
    protected readonly keycloak: KeycloakService
  ) {
    super(router, keycloak);
  }

  public async isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    // Force the user to log in if currently unauthenticated.
    if (!this.authenticated) {
      await this.keycloak.login({
        redirectUri: window.location.origin + state.url,
      });
    }

    // Get the roles required from the route.
    const requiredRoles = route.data["roles"];

    // Allow the user to proceed if no additional roles are required to access the route.
    if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) {
      return true;
    }

    // Allow the user to proceed if all the required roles are present.
    return requiredRoles.every((role) => this.roles.includes(role));
  }
}

OZIOisgood · 2024-02-12T11:49:03Z

@sanjay-noknok
Guards and Interceptors should now be written as plain JavaScript function.
As of Angular 15 they have deprecated class-based guards and interceptors.

Maybe it is a problem, why you are facing some issues. Try to use function-based AuthGuard:

import { CanMatchFn, Router, UrlTree } from '@angular/router';
import { inject } from '@angular/core';

// Services
import { KeycloakService } from 'keycloak-angular';

export const authGuard: CanMatchFn = async (route, segments): Promise<boolean | UrlTree> => {
  const router = inject(Router);
  const keycloakService = inject(KeycloakService);

  const authenticated: boolean = await keycloakService.isLoggedIn();

  if (!authenticated) {
    await keycloakService.login({
      redirectUri: window.location.origin,
    });
  }

  // Get the user Keycloak roles and the required from the route
  const roles: string[] = keycloakService.getUserRoles(true);
  const requiredRoles = route.data?.['roles'];

  // Allow the user to proceed if no additional roles are required to access the route
  if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) {
    return true;
  }

  // Allow the user to proceed if ALL of the required roles are present
  const authorized = requiredRoles.every((role) => roles.includes(role));
  // Allow the user to proceed if ONE of the required roles is present
  //const authorized = requiredRoles.some((role) => roles.includes(role));

  if (authorized) {
    return true;
  }

  // Display my custom HTTP 403 access denied page
  return router.createUrlTree(['/access']);
};

And Bearer Interceptor should be provided as:

export const appConfig: ApplicationConfig = {
  providers: [
    KeycloakService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: KeycloakBearerInterceptor,
      multi: true
    },
    provideRouter(routes),
    provideHttpClient(withInterceptorsFromDi())
  ]
};

withInterceptorsFromDi() is used here to specify that class-based Interceptor will be used, since there is no function-based one in angular-keycloak yet.

sanjay-noknok · 2024-02-14T05:11:55Z

@OZIOisgood Thank you for your response. I appreciate that.
I tried your code and enabled the ssr from angular.json file
Still getting the same issue.

If there is any other solution please do share with me.

Thank you.

aknuth · 2024-02-14T17:27:04Z

having the same problem with SSR and this config:

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080',
        realm: 'bizmatch',
        clientId: 'bizmatch-angular-client'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: (<any>window).location.origin + '/assets/silent-check-sso.html'
      },
      bearerExcludedUrls: ['/assets'],
      shouldUpdateToken(request) {
        return request.headers.get('token-update') !== 'false';
      }
    });
}

getting an error: "window is not defined" instead of "document is not defined" ..

naeimsf · 2024-02-27T08:57:10Z

same issue here withAngular 17 SSR enabled.

naeimsf · 2024-02-27T09:25:11Z

Just found a workaround (StackOverflow)
Add these lines to providers in app.config.ts file

KeycloakAngularModule,
    KeycloakService,
    {
      provide: APP_INITIALIZER,
      useFactory: initKeycloak,
      multi: true,
      deps: [KeycloakService],
    },

and this is the initial function

import { KeycloakService } from 'keycloak-angular';
import { environment } from '../environments/environment';

declare var require: any;
const Keycloak = typeof window !== 'undefined' ? import('keycloak-js') : null;

export function initKeycloak(keycloak: KeycloakService) {
  if (Keycloak !== null) {
    return () =>
      keycloak.init({
        config: environment.keycloakConfig,
        initOptions: {
          onLoad: 'check-sso',
          checkLoginIframe: false,
        },
        enableBearerInterceptor: true,
        bearerPrefix: 'Bearer',
      });
  } else {
    return () => {
      return new Promise<Boolean>((resolve, reject) => {
        resolve(true);
      });
    };
  }
}

naeimsf · 2024-03-29T02:24:13Z

Hi again, actually I have an issue with this method. Need to call keycloakService.getToken() in server side which doesn't work as we don't load keycloak in server side.

Is there any example of working keycloak in SSR mode? need to get token on server side.

alfredarcifa · 2024-04-30T16:29:04Z

Please, follow up.
I have the same issue.

ERROR ReferenceError: document is not defined

"keycloak-angular": "^15.2.1", "keycloak-js": "^24.0.3", "@angular/common": "^17.2.0", "@angular/compiler": "^17.2.0", "@angular/core": "^17.2.0",

EnricoMessall · 2024-05-17T09:47:41Z

Hey there. The problem is overall that SSR doesn't know about the window/document property which is used by keycloak-js. Therefor keycloak-js itself and not only keycloak-angular would need to be Angular based and support the document injection.

The only way to handle that is by using libs that mock the window object and every function that keycloak-js might use from that.

mauriciovigolo self-assigned this Feb 15, 2024

mauriciovigolo added the need-investigation Needs more investigation to identify if it is a bug. label Feb 15, 2024

mauriciovigolo added this to the v16.0.0 milestone Jun 14, 2024

mauriciovigolo added enhancement This issue/PR is an enhancement or new feature. evaluate-in-next-version Evaluate if the feature or change might be included in the next library release. labels Jun 14, 2024

Samyssmile mentioned this issue Jul 4, 2024

window is not defined dnyaneshwargiri/keycloak-angular-integration#2

Closed

Clashsoft mentioned this issue Jul 23, 2024

Fix Frontend Build and Keycloak Reliance Morphclue/apollusia#180

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Server-side rendering (SSR) crash with 'Document not found' error in Keycloak-angular with Angular 17 #539

Server-side rendering (SSR) crash with 'Document not found' error in Keycloak-angular with Angular 17 #539

sanjay-noknok commented Feb 1, 2024

OZIOisgood commented Feb 2, 2024

sanjay-noknok commented Feb 12, 2024 •

edited

Loading

OZIOisgood commented Feb 12, 2024 •

edited

Loading

sanjay-noknok commented Feb 14, 2024

aknuth commented Feb 14, 2024 •

edited

Loading

naeimsf commented Feb 27, 2024

naeimsf commented Feb 27, 2024

naeimsf commented Mar 29, 2024

alfredarcifa commented Apr 30, 2024

EnricoMessall commented May 17, 2024

Server-side rendering (SSR) crash with 'Document not found' error in Keycloak-angular with Angular 17 #539

Server-side rendering (SSR) crash with 'Document not found' error in Keycloak-angular with Angular 17 #539

Comments

sanjay-noknok commented Feb 1, 2024

OZIOisgood commented Feb 2, 2024

sanjay-noknok commented Feb 12, 2024 • edited Loading

OZIOisgood commented Feb 12, 2024 • edited Loading

sanjay-noknok commented Feb 14, 2024

aknuth commented Feb 14, 2024 • edited Loading

naeimsf commented Feb 27, 2024

naeimsf commented Feb 27, 2024

naeimsf commented Mar 29, 2024

alfredarcifa commented Apr 30, 2024

EnricoMessall commented May 17, 2024

sanjay-noknok commented Feb 12, 2024 •

edited

Loading

OZIOisgood commented Feb 12, 2024 •

edited

Loading

aknuth commented Feb 14, 2024 •

edited

Loading