Implementing Authentication and Authorization in Angular Applications

In modern web applications, especially those built by an expert Angular Development Company, authentication and authorization are critical pillars of security. Developing either a complex enterprise application or a basic dashboard, you will require some way to authenticate (verify) user identity and authorize (grant or deny) access to various operations.

In this post, you will learn how to implement both with the help of Angular, one of the most powerful frameworks for building scalable front-end applications. If you’re seeking Angular Development Services, understanding these core security mechanisms is essential before diving into advanced app architecture and deployment.

What is Authentication and Authorization?

• Authentication- It is the process of establishing the identity of a user. It responds to the question: What are you?
• Authorization concerns the resources a user should have access to. It replies: What can you do?

The concepts are commonly combined to secure sensitive areas of an application.

1. Setting Up the Angular Project

To get started, create a new Angular project:

new angular-auth-demo

cd angular-auth-demo

Add Angular routing and select the styles format you prefer (CSS, SCSS, etc.).

2. Creating the Authentication Service

We’ll start by creating an AuthService that will manage login, logout, and user session logic.

ng generate service auth

In auth.service.ts, add basic login and logout logic:
@Injectable({ providedIn: ‘root’ })
export class AuthService {
  private loggedIn = new BehaviorSubject<boolean>(false);
  login(username: string, password: string): Observable<any> {
    // This would typically be an HTTP request to your API
    if (username === ‘admin’ && password === ‘password’) {
      localStorage.setItem(‘token’, ‘fake-jwt-token’);
      this.loggedIn.next(true);
      return of({ success: true });
    }
    return of({ success: false });
  }
  logout(): void {
    localStorage.removeItem(‘token’);
    this.loggedIn.next(false);
  }
  isLoggedIn(): Observable<boolean> {
    return this.loggedIn.asObservable();
  }
}

3. Handling JWT Tokens

After a successful authentication, you typically get a JWT (JSON Web Token). You can:

• Save it in localStorage or sessionStorage (carefully)
• Employ HttpOnly cookies (safer, configuration on server needed)

We will use an HTTP interceptor to pass the token to make authenticated API requests.

4. Creating an HTTP Interceptor

ng generate interceptor auth
In auth.interceptor.ts:
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem(‘token’);
    if (token) {
      const cloned = req.clone({
        headers: req.headers.set(‘Authorization’, `Bearer ${token}`)
      });
      return next.handle(cloned);
    }
    return next.handle(req);
  }
}
Register this interceptor in app.module.ts.

5. Implementing Route Guards

Create a route guard to protect specific routes:
ng generate guard auth
In auth.guard.ts:
@Injectable({ providedIn: ‘root’ })
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}
  canActivate(): boolean {
    const token = localStorage.getItem(‘token’);
    if (token) {
      return true;
    }
    this.router.navigate([‘/login’]);
    return false;
  }
}
Apply this guard to secure routes in app-routing.module.ts.

6. Role-Based Authorization

If your JWT contains role information, you can extend the guard:

canActivate(): boolean {
  const token = localStorage.getItem(‘token’);
  const userRole = decodeJwt(token).role; // using a JWT decoding function
  if (token && userRole === ‘admin’) {
    return true;
  }
  this. router.navigate([‘/unauthorized’]);
  return false;
}

7. Creating Login UI

Use Angular Reactive Forms to build a login form:

<form [formGroup]=”loginForm” (ngSubmit)=”onSubmit()”>
  <input formControlName=”username” placeholder=”Username” />
  <input type=”password” formControlName=”password” placeholder=”Password” />
  <button type=”submit”>Login</button>
</form>
In your component:
loginForm = this.fb.group({
  username: [”],
  password: [”]
});
onSubmit() {
  const { username, password } = this.loginForm.value;
  this.authService.login(username, password).subscribe();
}

8. Logout and Session Handling

• Include a Logout button to remove the token and send back users.
• Take token expiration into account to do auto-logout:
• Expire JWT tokens (exp)
• Expiration can be managed with RxJS timers or Angular interceptors
• You can optionally use Refresh Tokens to prolong sessions

9. Additional Tips for Securing Angular Apps

• HTTPS all communication
• Do not store sensitive data on the client-side storage
• CSRF protection should be enabled in case cookies are being used
• Employ backend identity providers that are secure, such as:
  • Firebase Authentication
  • Auth0
  • OAuth2 + JWT with Spring Boot/Node.js