I am using a signal to store the logged in user. When loading a page I want to load the logged in user from a token. This is done in ngOnInit in appponent:

ngOnInit(): void {
// Check if `the user is logged in
const token = localStorage.getItem('token');
if (token) {
  this.userService.getUser().subscribe((user) => {
    if (user) {
      this.authService.currentUserSig.set(user)
    }
  });
} else {
  // User is not logged in, redirect to login page or perform other actions
  console.log('User is not logged in');
}

}

Within my component I want to check if a user is authenticated before loading the component, otherwise redirect to the login page:

ngOnInit(): void {
  if (this.authService.currentUserSig()) {
    this.loadStudents()
  }
  else {
    this.router.navigateByUrl('/login');
  }

}

The problem is the signal is undefined when the ngOnInit is loaded in the component because the asynchronous call in the appponent has not set the value yet. How can I make sure the logic in ngOnInit in the appponent finished loading before the component attempts to load?

I am using a signal to store the logged in user. When loading a page I want to load the logged in user from a token. This is done in ngOnInit in appponent:

ngOnInit(): void {
// Check if `the user is logged in
const token = localStorage.getItem('token');
if (token) {
  this.userService.getUser().subscribe((user) => {
    if (user) {
      this.authService.currentUserSig.set(user)
    }
  });
} else {
  // User is not logged in, redirect to login page or perform other actions
  console.log('User is not logged in');
}

}

Within my component I want to check if a user is authenticated before loading the component, otherwise redirect to the login page:

ngOnInit(): void {
  if (this.authService.currentUserSig()) {
    this.loadStudents()
  }
  else {
    this.router.navigateByUrl('/login');
  }

}

The problem is the signal is undefined when the ngOnInit is loaded in the component because the asynchronous call in the appponent has not set the value yet. How can I make sure the logic in ngOnInit in the appponent finished loading before the component attempts to load?

• angular
• authentication
• signals
• angular-signals

• check provideAppInitializer functionality – Andrei Commented 8 hours ago

1 Answer 1

Wrap the logic in an effect, so that it is execute only when the signal is ready and has a value (anything other than undefined).

constructor(): void {
  effect(() => {
    const currentUserSig = this.authService.currentUserSig();
    if(currentUserSig !== undefined) {
      if (currentUserSig) {
        this.loadStudents()
      }
      else {
        this.router.navigateByUrl('/login');
      }
    }
  });
}

Now make sure your currentUserSig has an initial value of undefined:

@Injectable({ providedIn: 'root' })
export class authService {
  currentUserSig =  signal<string | undefined>(undefined); // initial value before setting.
  ...
}

Now after the ngOnInit runs you need to ensure it either has a valid token value, or null so that the expression is evaluated.

ngOnInit(): void {
  // Check if `the user is logged in
  const token = localStorage.getItem('token');
  if (token) {
    this.userService.getUser().subscribe((user) => {
      if (user) {
        this.authService.currentUserSig.set(user);
      } else {
        this.authService.currentUserSig.set(null);
      }
    });
  } else {
    // User is not logged in, redirect to login page or perform other actions
    console.log('User is not logged in');
    this.authService.currentUserSig.set(null);
  }
}