Authentication issues using token in angular 6 + node js - node.js

Question

I trying to build an Authentication function in angular with node js as my server,
and i have issues with the identification of the token that sent from angular.
I using the angular HttpInterceptor service to handle with the headers, and i am created a middelware function inside my node js. the error that i receiving is:
{headers: HttpHeaders, status: 401, statusText: "Unauthorized"..
Any help will be appreciated
Middleware function
const jwt = require("jsonwebtoken");
module.exports = (req, res, next) => {
try {
const token = req.headers.authorization.split(" ")[1];
jwt.verify(token, "this_is_the_secret");
next();
} catch (error) {
res.status(401).json({ message: "Auth failed!" });
}
};
Middleware implantation
router.post('/orders', checkAuth, function(req,res,next){
Order.create(req.body.order, function(err, createdOrder){
if (err) return next(err)
.then()
Show.findByIdAndUpdate({"_id": req.body.showId}, {"$push":{"takenSeats": req.body.takenSeatsIds}})
.exec(function(err, updatadShow){
if (err) return next(err)
console.log(updatadShow)
})
res.json(createdOrder)
})
})
Auth service in angular
import { Injectable } from "../../../node_modules/#angular/core";
import { HttpClient } from "../../../node_modules/#angular/common/http";
import { AuthData } from "../models/auth-data.model";
#Injectable({ providedIn: "root"})
export class AuthService {
private token: string
signupUrl = "http://localhost:3000/signup";
loginUrl = "http://localhost:3000/login"
constructor(private http: HttpClient){}
getToken(){
return this.token
}
createUser(email: string, password:string){
const authData: AuthData = {email: email, password: password}
this.http.post(this.signupUrl, authData)
.subscribe(response => {
console.log(response)
});
}
login(email: string, password){
const authData: AuthData = {email: email, password: password}
this.http.post<{token: string}>(this.loginUrl,authData)
.subscribe(response => {
console.log(response)
const token = response.token
this.token = token;
console.log("token" + this.token)
});
}
}
AuthInterceptor service
import { HttpInterceptor, HttpRequest, HttpHandler } from "../../../node_modules/#angular/common/http";
import { Injectable } from "../../../node_modules/#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)
}
}
[Edit] Sates of the Authentication token
console.log of the login response
{token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6I…Q3OH0.fCgCuHQkDHHgJHq8LFqeVxLayyr-9U-Y6_23_9FGHkU", expiresIn: 3600}
auth.service.ts:35 tokeneyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imlnb3JybzYyMUBnbWFpbC5jb20iLCJ1c2VySWQiOiI1YjU4YjYwYTUxMDkyNDI4Njg1MDM3MzIiLCJpYXQiOjE1MzI1NDc4NzgsImV4cCI6MTUzMjU1MTQ3OH0.fCgCuHQkDHHgJHq8LFqeVxLayyr-9U-Y6_23_9FGHkU
console.log of the req.headers.authorization after posting to a route without implementation of the middleware
BearereyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imlnb3JybzYyMUBnbWFpbC5jb20iLCJ1c2VySWQiOiI1YjU4YjYwYTUxMDkyNDI4Njg1MDM3MzIiLCJpYXQiOjE1MzI1NDc4NzgsImV4cCI6MTUzMjU1MTQ3OH0.fCgCuHQkDHHgJHq8LFqeVxLayyr-9U-Y6_23_9FGHkU
console.log of the states inside the middleware function
logging points
const jwt = require("jsonwebtoken");
module.exports = (req, res, next) => {
try {
console.log(" Before the split " + req.headers.authorization)
const token = req.headers.authorization.split(" ")[1];
console.log(" After The split " + req.headers.authorization)
jwt.verify(token, "this_is_the_secret");
next();
} catch (error) {
res.status(401).json({ message: "Auth failed!" });
}
};
Result
Before the split BearereyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imlnb3JybzYyMUBnbWFpbC5jb20iLCJ1c2VySWQiOiI1YjU4YjYwYTUxMDkyNDI4Njg1MDM3MzIiLCJpYXQiOjE1MzI1NDc4NzgsImV4cCI6MTUzMjU1MTQ3OH0.fCgCuHQkDHHgJHq8LFqeVxLayyr-9U-Y6_23_9FGHkU
After The split BearereyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imlnb3JybzYyMUBnbWFpbC5jb20iLCJ1c2VySWQiOiI1YjU4YjYwYTUxMDkyNDI4Njg1MDM3MzIiLCJpYXQiOjE1MzI1NDc4NzgsImV4cCI6MTUzMjU1MTQ3OH0.fCgCuHQkDHHgJHq8LFqeVxLayyr-9U-Y6_23_9FGHkU

Answer 1

Ok. I found up what was the problem, I didnt put space after the "Bearer "
In the HttpInterceptor