Jwt Malformed. Auth request to server

I'm building fullstack project using Angular, NestJS and PostgreSQL. Trying to build Authn and Authz using Auth0. User can store data in DB, one of column is the unique sub id from Auth0. My idea is: When user is logged in client, and want to retrieve data, makes req to server where its should check client JWT-Sub with DB-Sub.

So here is problem. Client token is retrieved, sent to server, but there is error by this Guard:

PS: Quick edit. When I pass JWT token in Postman by hand, request is OK, data fully retrived. Maybe it's problem on client side?

import { Injectable } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt') {
handleRequest(
...args: Parameters<
InstanceType<ReturnType<typeof AuthGuard>>['handleRequest']
>
) {
console.log(args);
return super.handleRequest(...args);
}
}


Here is error:

[
null,
false,
JsonWebTokenError: jwt malformed
at module.exports [as verify] (C:\Projects\dnd-server\node_modules\jsonwebtoken\verify.js:70:17)
at module.exports [as JwtVerifier] (C:\Projects\dnd-server\node_modules\passport-jwt\lib\verify_jwt.js:4:16)
at C:\Projects\dnd-server\node_modules\passport-jwt\lib\strategy.js:104:25
at JwtStrategy.secretProvider [as _secretOrKeyProvider] (C:\Projects\dnd-server\node_modules\jwks-rsa\src\integrations\passport.js:42:14)
at JwtStrategy.authenticate (C:\Projects\dnd-server\node_modules\passport-jwt\lib\strategy.js:99:10)
at attempt (C:\Projects\dnd-server\node_modules\passport\lib\middleware\authenticate.js:378:16)
at authenticate (C:\Projects\dnd-server\node_modules\passport\lib\middleware\authenticate.js:379:7)
at C:\Projects\dnd-server\node_modules\@nestjs\passport\dist\auth.guard.js:88:3
at new Promise (<anonymous>)
at C:\Projects\dnd-server\node_modules\@nestjs\passport\dist\auth.guard.js:80:83,
ExecutionContextHost {
args: [ [IncomingMessage], [ServerResponse], [Function: next] ],
constructorRef: [class CharacterController],
handler: [AsyncFunction: findOne],
contextType: 'http',
getRequest: [Function: getRequest],
getResponse: [Function: getResponse],
getNext: [Function: getNext]
},
undefined
]


Here is my auth.strategy.ts:

import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import * as jwksRsa from 'jwks-rsa';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
constructor() {
super({
// Extract JWT from the Authorization header
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),

// Validate the token's issuer and audience
issuer: `https://${process.env.AUTH0_DOMAIN}/`,
audience: process.env.AUTH0_AUDIENCE,

// Use Auth0's public key to verify the token's signature
secretOrKeyProvider: jwksRsa.passportJwtSecret({
cache: true,
rateLimit: true,
jwksRequestsPerMinute: 5,
jwksUri: `https://${process.env.AUTH0_DOMAIN}/.well-known/jwks.json`,
}),

algorithms: ['RS256'],
});
}

async validate(payload: any) {
return {
sub: payload.sub, // 'sub' claim
};
}
}


Here is my character.controller.ts where I retrieve data from DB:

import {
Body,
Controller,
Get,
Param,
Post,
Req,
UseGuards,
} from '@nestjs/common';
import { CharacterService } from './character.service';
import { Character } from './character.model';
import { JwtAuthGuard } from 'src/auth/auth.guard';

@Controller('character')
export class CharacterController {
constructor(private readonly characterService: CharacterService) {}

@Post()
async create(@Body() character: Character): Promise<Character> {
const createdCharacter = await this.characterService.create(character);
console.log('Character created successfully:', createdCharacter);
return createdCharacter;
}

@Get(':id')
@UseGuards(JwtAuthGuard)
async findOne(@Param('id') id: string, @Req() req): Promise<Character> {
const sub = req.user?.sub;
if (!sub) {
console.error("The 'sub' parameter is undefined or null.");
throw new Error("Invalid 'sub' parameter");
}

console.log('Server SUB:', sub);

const character = await this.characterService.findOne(+id);
if (!character) {
console.error(`Character with ID ${id} not found.`);
throw new Error('Character not found');
}

if (character.sub !== sub) {
console.error(
`Server SUB ${sub} does not match character sub ${character.sub}.`,
);
throw new Error('Unauthorized access');
}

return character;
}
}


And here is part of my creator.component.ts where I am trying to make request to server:

saveFormDataToFile() {
const data = this.characterCreationForm.value;
this.http.post("http://localhost:3000/character", data).subscribe(
(response) => {
console.log("Form data saved successfully:", response);
},
(error) => {
console.error("Error saving form data:", error);
}
);
}

retrieveFormDataFromServer(id: number) {
const authToken = this.auth.idTokenClaims$;

authToken.subscribe((token) => {
if (token) {
const headers = new HttpHeaders().set(
"Authorization",
`Bearer ${token.__raw}`
);

console.log("FULL TOKEN:", token);
console.log("Access token retrieved successfully:", token.__raw);
this.http
.get(`http://localhost:3000/character/${id}`, { headers })
.subscribe(
(response: any) => {
console.log("Form data retrieved successfully:", response);
this.characterCreationForm.patchValue(response);
},
(error) => {
console.error("Error retrieving form data:", error);
}
);
} else {
console.error("Error retrieving access token.");
}
});
}

Continue reading...