tezvyn:

How to create a singleton Angular auth service

AI-drafted, machine-checkedSource: angular.devbeginner
How to create a singleton Angular auth service

Tests Angular dependency injection and singleton scope. Strong answer: use the Injectable decorator with providedIn set to root for an application-wide singleton, then inject it into components.

WHAT THIS TESTS: This question evaluates your understanding of Angular's dependency injection system and how to share state across components using a singleton service. The interviewer wants to see if you know the modern recommended pattern for service registration and instantiation rather than legacy module-based approaches.

A GOOD ANSWER COVERS: First, state that the class uses the Injectable decorator imported from Angular core. Second, explain that providedIn set to root inside the decorator metadata makes the service a singleton available application-wide without adding it to a module providers array. Third, describe storing authentication state as a BehaviorSubject or Signal inside the service so components can subscribe to changes reactively. Fourth, mention that components receive the service through constructor injection, ensuring Angular manages the single instance. Fifth, note that tree-shaking is improved when using providedIn root because the service can be removed by the build system if no component injects it.

COMMON WRONG ANSWERS: Instantiating the service manually with the new keyword bypasses Angular's injector and breaks the singleton guarantee. Providing the service in a component's providers array creates a separate instance per component subtree, which is incorrect for global authentication state. Using NgModule providers still works but shows outdated knowledge and loses tree-shaking benefits. Forgetting to mention Injectable entirely and instead discussing component decorators like Component or NgModule.

LIKELY FOLLOW-UPS: How would you handle token refresh in this service? How do you prevent memory leaks from open subscriptions when components destroy? What changes if lazy-loaded modules need their own authentication scope? How would you expose this state using Angular Signals instead of RxJS subjects?

ONE CONCRETE EXAMPLE: You create AuthService with Injectable and providedIn root. Inside, you define private authStatus equals new BehaviorSubject with an initial value of false. You expose isAuthenticated$ equals this.authStatus.asObservable and methods like login and logout that call next. In a NavbarComponent constructor, you inject private auth of type AuthService and subscribe to auth.isAuthenticated$ in ngOnInit to show or hide a logout button. Because the service is provided in root, both NavbarComponent and DashboardComponent share the exact same BehaviorSubject instance and see state changes immediately.

Read the original → angular.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.