CODEWITHSUNDEEP
angularkeycloakkeycloak-angularkeycloak-js
soung
soung

Reputation: 1614

How to handle SSR with provideKeycloak in Angular's appConfig?

I am working on an Angular application with SSR, and I'm trying to upgrade my project to angular 19. I'm using the new keycloak-angular provideKeycloak for authentication. My current configuration works fine in a browser environment, but I encounter issues when running it in an SSR environment because window is not available on the server.

Here is my current appConfig:

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideKeycloak } from 'keycloak-angular';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = { 
  providers: [
    provideRouter(routes, withComponentInputBinding()), 
    provideClientHydration(), 
    provideHttpClient(withFetch()),
    provideKeycloak({
      config: environment.keycloak,
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`
      }
    })
  ]
};

The issue:

  1. The window object is not available on the server, causing the SSR build to fail.
  2. I want to handle SSR properly and use a neutral configuration or skip Keycloak initialization when running on the server.

Unluckely, there isn't any information about SSR on the official upgrade page : https://github.com/mauriciovigolo/keycloak-angular/blob/main/docs/migration-guides/v19.md

Upvotes: 1

Views: 82

Answers (1)

Naren Murali
Naren Murali

Reputation: 56650

You have to raise a issue on github for official support for angular SSR. That is the long term solution. I see you have already done this:

Is there a guide for using SSR with Angular 19 and provideKeycloak?

As a temporary workaround, you can try the below configuration. I am recommending this until the keycloak-angular team, fixes the package to support SSR.

app.config.ts

import {
  ApplicationConfig,
  mergeApplicationConfig,
  provideZoneChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import {
  provideClientHydration,
  withEventReplay,
} from '@angular/platform-browser';
import { provideKeycloak } from 'keycloak-angular';

export const browserOnlyConfig = {
  providers: [
    provideKeycloak({
      config: {
        url: 'keycloak-server-url',
        realm: 'realm-id',
        clientId: 'client-id',
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          typeof window !== 'undefined'
            ? window?.location?.origin + '/silent-check-sso.html'
            : '',
      },
    }),
  ],
};

export const commonConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(withEventReplay()),
  ],
};

export const appConfig = mergeApplicationConfig(
  commonConfig,
  browserOnlyConfig
);

app.config.server.ts

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { commonConfig } from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [provideServerRendering()],
};

export const config = mergeApplicationConfig(commonConfig, serverConfig);

Stackblitz Demo -> cd test -> npm i -> npm run start

Upvotes: 1

Related Questions