Creating a route guard to determine if a user is logged in using signals

I am new to using signals so I am trying to go that route while building out the authentication system for a new app. I have a service that contains a signal to store the current user info and a method to get that user from the api based on the jwt token in local storage:

auth.service.ts

import { inject, Injectable, signal } from '@angular/core';
import { UserInterface } from '../interfaces/user.interface';
import { UserService } from './user.service';
import { from, Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class AuthService {
currentUserSig = signal<UserInterface | undefined | null>(undefined);

userService = inject(UserService);

getLoggedInUser(): Observable<UserInterface | undefined | null> {
// Check if `the user is logged in
console.log('Checking if user is logged in...');
const token = localStorage.getItem('token');
if (token) {
console.log('Found token:', token);
this.userService.getUser().subscribe((user) => {
if (user) {
console.log('User found:', user);
this.currentUserSig.set(user)
}
})
}
return from([this.currentUserSig()])
}
}


In my app.component I am loading the current user:

export class AppComponent implements OnInit {
authService = inject(AuthService);

ngOnInit(): void {
this.authService.getLoggedInUser()
}
}


My route guard is where I am struggling. I want to do something like this:

export const isAuthenticatedGuard = (): CanActivateFn => {
return () => {
const authService = inject(AuthService);
const router = inject(Router);

if(authService.currentUserSig() !== undefined && authService.currentUserSig() !== null) {
return true
}

return false
};
};


The problem is, due to the asyncronous nature of the getLoggedInUser method, the signal is not set at the time the route guard is called. How can I use signals here and what am I doing wrong in my implementation?

Continue reading...