Securing Endpoints with JWT Guards

Welcome to the lesson on securing endpoints with JWT Guards in your NestJS application. In our previous lessons, we laid a solid foundation for user authentication. We explored creating users with encrypted passwords using bcrypt, and then we progressed to integrating JSON Web Tokens (JWT) for authentication. Now, we'll focus on safeguarding API endpoints using Guards in NestJS. This step is crucial for ensuring that sensitive resources are protected and only accessible to authenticated users. By the end of this lesson, you'll be able to implement a JWT-based security layer for your ToDo app's endpoints.

Guards in NestJS act as middleware, determining if a request can proceed upon its received verification. We’ll create an AuthGuard that uses JWTs to ensure that only authenticated requests gain access:

1. Define the AuthGuard:

   TypeScript

   import { Injectable, CanActivate, ExecutionContext, UnauthorizedException } from '@nestjs/common';
   import { JwtService } from '@nestjs/jwt';
   import { Request } from 'express';
   
   @Injectable()
   export class AuthGuard implements CanActivate {
     constructor(private jwtService: JwtService) {}
   
     async canActivate(context: ExecutionContext): Promise<boolean> {
       const request = context.switchToHttp().getRequest();
       try {
         // Extract and verify the JWT from the request header
         const payload = await this.verifyToken(request);
         request['user'] = payload; // Attach the user to the request
       } catch {
         throw new UnauthorizedException();
       }
       return true;
     }
   
     private async verifyToken(request: Request): Promise<any> {
       const authHeader = request.headers.authorization || '';
       const [type, token] = authHeader.split(' ');
   
       if (type !== 'Bearer' || !token) {
         throw new UnauthorizedException();
       }
   
       // Verify the token using the JwtService and return the payload
       const payload = await this.jwtService.verifyAsync(token);
       return payload;
     }
   }

2. Explanation:

   • The AuthGuard checks each incoming request for a JWT in the Authorization header.
   • If present and valid, it attaches the user payload from the JWT to the request object.
   • If not, it throws an UnauthorizedException, blocking access to the endpoint.

This Guard is a crucial part of your security strategy, ensuring only authenticated requests can reach certain endpoints.

In a NestJS application, securing all routes by default ensures that only authenticated users can access the application's resources. By integrating the AuthGuard at the module level, we can enforce this security measure across all endpoints, except those explicitly marked as public.

In this configuration, the AuthGuard is added to the providers array, allowing it to be automatically injected where needed. The JwtService is also included since it's a dependency required by the AuthGuard for verifying tokens.

app/src/auth/auth.module.ts

import { Module } from '@nestjs/common';
import { APP_GUARD } from '@nestjs/core';
import { JwtModule } from '@nestjs/jwt';
import { AuthService } from './auth.service';
import { AuthController } from './auth.controller';
import { UserModule } from '../user/user.module';
import { jwtConstants } from './constants';
import { AuthGuard } from './auth.guard';

@Module({
  imports: [
    UserModule,
    JwtModule.register({
      global: true,
      secret: jwtConstants.secret,
      signOptions: { expiresIn: '60s' },
    }),
  ],
  providers: [
    // Add the Auth Guard to require a token
    // for all routes! Unless marked with @Public()
    {
      provide: APP_GUARD,
       useClass: AuthGuard,
    },
    AuthService,
  ],
  controllers: [AuthController],
})
export class AuthModule {}

After implementing these changes, all routes within the application will require a valid JWT token. This pattern ensures a strong security stance by default, minimizing potential unauthorized access to application endpoints.

In some cases, you’ll want to allow public access to specific routes, like registration or login. We’ll implement a Public decorator that allows you to mark these routes as exceptions.

• Public is a custom decorator using SetMetadata.
• It marks certain endpoints as public by associating metadata with them to be read by the guard (next).
• NestJS guards can read this metadata to selectively allow public access.

Now, we must check for the metadata that was injected with the @Public decorator. If it exists, we allow the request to go through.

app/src/auth/auth.guard.ts

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private jwtService: JwtService,
    private reflector: Reflector,
  ) {}
  
  async canActivate(context: ExecutionContext): Promise<boolean> {
    if (this.isPublic(context)) {
      return true;
    }

    // Handle the rest of the Guard the same way
  }
  
  private isPublic(context: ExecutionContext): boolean {
    return this.reflector.getAllAndOverride<boolean>(IS_PUBLIC_KEY, [
      context.getHandler(),
      context.getClass(),
    ]);
  }
}

• isPublic will check for metadata on Controllers or Controller Handlers.
• If we detect the public metadata (via IS_PUBLIC_KEY), we let the request through.
• Otherwise we check for a valid JWT as we did in the previous example.

Most of our API can be protected by the AuthGuard and require a JWT token. However, that is not true for the auth/register and auth/login routes! You don't have a token if you haven't registered or logged-in yet. We can use our @Public() decorator on our routes:

@Controller('auth')
export class AuthController {
  constructor(private readonly authService: AuthService) {}

  @Public()
  @Post('register')
  async register(@Body() createUserDto: UsernameWithPassword) {
    const { username, password } = createUserDto;

    return await this.authService.register(username, password);
  }

  @Public()
  @Post('login')
  async login(@Body() loginUserDto: UsernameWithPassword) {
    const { username, password } = loginUserDto;
    
    const authResponse = await this.authService.logIn(username, password);

    if (!authResponse) {
      throw new HttpException('Invalid credentials', HttpStatus.UNAUTHORIZED);
    }

    return authResponse;
  }

• @Public(): The @Public() decorator sets the isPublic value to true in the metadata. This allows these routes to be executed without a token.

Once authentication is set up in your NestJS application, users will receive a JWT token upon successful login. This token must be included in the HTTP headers for requests to access protected routes. Here's how a consumer can send the JWT token using a sample script.

In this example, we demonstrate how to utilize the JWT token in an HTTP request header using a tool like axios in a JavaScript environment:

send_request.ts

import axios from 'axios';

// Create a new todo item
async function createTodo(token: string) {
  try {
    const response = await axios.post('http://localhost:3000/todos', {
      title: 'Learn NestJS',
      description: `Explore the basics of NestJS`,
    }, {
      // IMPORTANT!  Include the token you received from the login request!
      headers: { Authorization: `Bearer ${token}` }
    });
    return response.data;
  } catch (error: any) {
    console.error('Error:', error.message);
  }
}


// Get all todo items
async function getTodos(token: string) {
  try {
    const response = await axios.get('http://localhost:3000/todos', {
      // IMPORTANT!  Include the token you received from the login request!
      headers: { Authorization: `Bearer ${token}` }
    });
    console.log('Todos:', response.data);
  } catch (error: any) {
    console.error('Error:', error.message);
  }
}

async function run() {
  console.log('Registering a new user');
  await registerUser("testuser");
  
  console.log('\nLogging in the User 1');
  const { access_token } = await loginUser("testuser1");

  console.log('\nCreating a new todo');
  await createTodo(access_token);

  console.log('\nGetting all todo');
  await getTodos(access_token);
}

run();

• The createTodo and getTodo functions require an access_token that was recieved by logging in to the API.
• The access token is passed in as a header to the request.
• Authorization: Bearer ${token}`` is the standard header to set for token in HTTP.

In this lesson, you've learned to secure endpoints using JWT Guards in a NestJS application. We've covered JWT components, authentication with AuthGuard, and marking specific endpoints as public using the Public decorator. These skills are critical to ensuring that only authenticated users can access sensitive data or operations within your application.

Next, you’ll have the opportunity to apply these skills through hands-on practice exercises. Remember, securing API endpoints is a vital real-world skill that enhances the security and integrity of web applications. Great job reaching this far, and keep up the excellent work!