signal - effect not notifying

I have a problem where I have signals created in a service and I want to make sure the components injecting this service get notify when a value is set in the signal. This is not currently happening with my code here:

@Injectable({
providedIn: 'root'
})
export class AuthService {

firebaseApp = inject(FirebaseApp);
auth = getAuth(this.firebaseApp);
db = getFirestore(this.firebaseApp);
currentUser = signal<CUser | null>(null);
router = inject(Router);

constructor() {}

listenForAuthService() {
return new Promise<boolean>(resolve => {
onAuthStateChanged(this.auth, async (user) => {
if (user) {
const uid = user.uid;
const cUser = {
user: user,
uid: uid
};
this.currentUser.set(cUser);
resolve(true);
} else {
this.currentUser.set(null);
this.router.navigateByUrl("/login");
resolve(false);
}
});
});
}
}


Now this is the appComponent:

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

constructor(private authService: AuthService) {
effect(() => {
console.log(this.authService.currentUser());
});
}

ngOnInit(): void {
// this.authService.signOut();
}

}


When I refresh the page I see the one time execution of the effect with a null value, after that the method in the service executes and set the value to a User object and here is the problem, the effect never log again the new value, so that means that my component never get notify with the new value.

Any help will be appreciated.

Continue reading...