Auth Guards in Angular

How AuthGuard in Angular Works?

AuthGuard in Angular serves as a critical component for controlling access to specific routes within an Angular application. It ensures that only authorized users can access certain routes by intercepting navigation attempts and applying defined authorization logic. Here's a step-by-step explanation of how AuthGuard functions:

Creation of AuthGuard:

• Begin by creating an AuthGuard in your Angular application. You can do this using the Angular CLI or by manually creating the necessary files.
• Typically, an AuthGuard implements the CanActivate interface, which requires the implementation of a canActivate method.

Injecting Dependencies:

• In your AuthGuard implementation, you can inject dependencies such as the AuthService and the Router. These dependencies are essential for checking the user's authentication status and for handling redirection when necessary.

canActivate Method:

• The canActivate method is the core of AuthGuard. It is executed each time a user attempts to navigate to a route protected by the AuthGuard.
• Inside the canActivate method, you typically check the user's authentication status. This may involve making API calls, inspecting session or token data, or verifying user roles and permissions.
• If the user is authenticated and authorized to access the route, the canActivate method should return true, allowing navigation to proceed.
• If the user lacks authentication or authorization, the canActivate method should return false, preventing access to the protected route.

Applying AuthGuard to Routes:

• To secure specific routes, you need to apply the AuthGuard to those routes within your Angular routing configuration. This is usually done in the canActivate property of a route definition.
• For instance, if you want to protect the /dashboard route and allow access only to authenticated users, configure it like this:

• Here, the canActivate property includes the AuthGuard to be applied to the /dashboard route.

Redirecting Unauthorized Users:

• If the canActivate method of the AuthGuard returns false, Angular's routing system will automatically prevent navigation to the protected route.
• Additionally, within the AuthGuard, you can use the Router service to redirect unauthorized users to a different route, such as a login page. This ensures that unauthorized users are directed to the appropriate location for authentication or other required actions.

AuthGuard in Angular is a fundamental tool for controlling access to routes based on user authentication and authorization. By implementing the CanActivate interface and applying the AuthGuard to specific routes, you can effectively secure parts of your Angular application, ensuring that only authorized users can access protected areas.

Types of AuthGuard

There are several types of Auth Guards in Angular, each serving a specific purpose. Let's delve into each of them in detail:

CanActivate:

The CanActivate Auth Guard is used to determine if a user can access a specific route. It is commonly used for route-level authorization. When a user tries to navigate to a route protected by the CanActivate guard, Angular will call the canActivate method of the guard class. If this method returns true, the user is allowed to access the route; otherwise, access is denied.

Use Cases:

• Checking if a user is authenticated before allowing access to a route.
• Verifying if a user has specific roles or permissions required for a particular route.

Example:

CanActivateChild:

The CanActivateChild Auth Guard is used for guarding child routes within a parent route. It allows you to specify guards for the child routes while still protecting the parent route. When navigating to a child route, Angular checks both the CanActivate and CanActivateChild guards associated with the parent and child routes, respectively.

Use Cases:

• Protecting specific sections or features within a parent route.

Example:

CanDeactivate:

The CanDeactivate Auth Guard is responsible for allowing or preventing users from leaving a route with unsaved changes. It is commonly used in scenarios where you want to prompt the user for confirmation before leaving a form or page with unsaved data.

Use Cases:

• Confirming if a user wants to leave a form without saving changes.
• Preventing accidental navigation away from a page with unsaved data.

Example:

CanLoad:

The CanLoad Auth Guard controls whether lazy-loaded modules are loaded based on user privileges. It is used to prevent the loading of modules until specific conditions are met, such as user authentication or authorization.

Use Cases:

• Delaying the loading of feature modules until a user is authenticated.
• Loading modules based on user roles or permissions.

Example:

These are the main types of Auth Guards in Angular, each serving a specific purpose to control access and behavior in your application based on user authentication and authorization status. You can combine these guards to create complex access control scenarios in your Angular application.

Implementation

To implement an AuthGuard in Angular, you need to create the AuthGuard, create a service for authentication logic, and apply the AuthGuard to specific routes. Here's a step-by-step guide:

Step - 1: Create a New Angular Application

You can create a new Angular application using the Angular CLI with the following command:

Step - 2: Create the AuthGuard

You can create an AuthGuard using the Angular CLI as follows:

This command will generate an auth.guard.ts file with a default canActivate method.

Step - 3: Create an Authentication Service

To handle authentication logic, create an authentication service. You can generate a service using the Angular CLI:

In this service, implement a method to check the user's authentication status. For example:

Step - 4: Implement the AuthGuard

Open the auth.guard.ts file generated earlier and implement the canActivate method. Inject the AuthService and Router into the guard for checking the authentication status and handling redirection:

Step - 5: Apply AuthGuard to Routes

In your application's routing configuration (usually found in app-routing.module.ts), apply the AuthGuard to specific routes by using the canActivate property:

Now, the AuthGuard is applied to the /dashboard route, ensuring that only authenticated users can access it. You can apply the AuthGuard to other routes as needed.

Step - 6: Protect Other Routes

You can follow a similar process to protect other routes by applying the AuthGuard to those routes in the routing configuration.

Users who are not authenticated will be redirected to the login page or another specified route.