I’m encountering an issue in my Angular 17 application with server-side rendering (SSR) where, upon reloading a page, the login page briefly appears and then disappears. This behavior shouldn’t occur, and I’m struggling to identify the root cause.

I have an authentication guard set up as follows:

export const authGuard = (): CanActivateFn => {
  return route => {
    const auth = inject(AuthService);
    const router = inject(Router);

    if (!auth.session()) {
      const queryParams = { redirect: route.url };

      return router.createUrlTree(['login'], { queryParams });
    }

    return true;
  };
};

Interestingly, if I change the guard to return false instead of redirecting with router.createUrlTree([‘login’], { queryParams }), the issue is resolved, but obviously, I want to redirect users to the login page when authentication is required.

Has anyone encountered a similar issue before with Angular 17 and SSR, or can offer guidance on how to troubleshoot and resolve this?

For your information, I manage authentication with Supabase, and I have auth.session() instantiated.”

function initializeSessionFactory(auth: AuthService) {
  return () => auth.initializeSession();
}

export const provideSupabaseAuthInitializer = () => {
  return {
    provide: APP_INITIALIZER,
    useFactory: initializeSessionFactory,
    deps: [AuthService],
    multi: true,
  };
};