Angular - AuthGuard not working after refresh

I'm using AuthGuard in Angular, and I've encountered an issue. When I log in successfully, the HomeComponent renders. However, when I refresh the page, HomeComponent doesn't render.

app.routes.ts

import { Routes } from '@angular/router';
import { AuthGuard } from '@auth0/auth0-angular';
import { HomeComponent } from './pages/home/home.component';

export const routes: Routes = [
{ path: "", component: HomeComponent, canActivate: [AuthGuard] }
];


app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LoginButtonComponent } from "../components/login-button/login-button.component";
import { SidebarComponent } from '../components/sidebar/sidebar.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, LoginButtonComponent, SidebarComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'Formatier';
}


I'm using Angular version 18.2.0 and Auth0 Angular SDK version 2.2.3.

Continue reading...