'Authorization: Bearer Undefined'

Question

the Authorization header is always undefined when I am trying to login. Tried setting AOT = false in my angular.json file but to no avail. What is the issue here?

Auth-Interceptor

import { HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { AuthService } from "./auth.service";


@Injectable()
export class AuthInterceptor implements HttpInterceptor{
    constructor(private authService: AuthService){}

    intercept(req: HttpRequest<any>, next: HttpHandler){
        const authToken = this.authService.getToken();
        const authRequest = req.clone({
            headers: req.headers.set("Authorization", "Bearer " + authToken)
        })
        return next.handle(authRequest)
    }   
}

checkAuth middleware on backend

const jwt = require('jsonwebtoken');

module.exports = (req, res, next) => {
    try{
        const token = req.headers.authorization.split(" ")[1]
        jwt.verify(token, "asderfghtyu")
        next();
    }
    catch(error) {
        res.status(401).json({
            message: "Authorization failed macha"
        })
    }
}

auth-service.ts

 export class AuthService {
  private token: string;

  constructor(private http: HttpClient) { }

  getToken(){
    return this.token;
  }
  
  createUser(FullName: string, email: string, role: string, password: string) {
    const authData: AuthData = { FullName: FullName, email: email, role: role, password: password }
    this.http.post("http://localhost:3300/api/user/signup", authData)
      .subscribe(result => {
        console.log(result);
      })
  }

  login(email: string, password: string){
    this.http.post<{token: string}>("http://localhost:3300/api/user/login", {email: email, password: password})
    .subscribe(response=>{
      const token = response.token;
      this.token = token;
    })
  }

 

Here is the auth-service.ts file where getToken() function is present

Answer 1

In your Auth-Interceptor, replace -

const authRequest = req.clone({
        headers: req.headers.set("Authorization", "Bearer " + authToken)
    })

with -

const authRequest = !authToken ? req : req.clone({
        setHeaders: { Authorization: `Bearer ${authToken}` }
    });

This will add an Authorization header only if you have a token. If authService.getToken() returns undefined, no Authorization header will be added to the request.