Decoding firebase id token failed, auth/argument error - node.js

Question

I'm trying to authenticate using user requests and it appears that I'm it is failing even though I have the correct token (and in fact, from the decoded token, I can pull the uid, which I thought means it succeeded. On the client side, this is where my token is generated
const getIdToken = async() => {
if (firebaseAuth.currentUser) {
const token = await firebaseAuth.currentUser.getIdToken(true);
return token;
}
}
The tokens are added to headers in my axios requests
const header = await createHeader(userIdToken);
try {
await axios.post(SERVICE_PATH + '/gardens/addNew', garden, {headers: header})
via this functin
export const createHeader = async function(userIdToken) {
const payloadHeader = {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${userIdToken}`,
},
};
return payloadHeader;
}
On the server-side, I decode
async function decodeIdToken(req, res, next) {
const header = req.headers?.authorization;
if (header !== 'Bearer null' && req.headers?.authorization?.startsWith('Bearer ')) {
const idToken = req.headers.authorization.split('Bearer ')[1];
admin
.auth()
.verifyIdToken(idToken)
.then(function (decodedToken) {
return next();
})
.catch(function (error) {
console.log(error);
return res.sendStatus(403);
});
} else {
res.sendStatus(401);
}
}
This is just in my server.js file (the last loaded middleware, after express, cors, and json)
app.use(decodeIdToken);
I've compared the tokens on the client and server and they appear correct. It even seems like the token is in fact decoded, since I can print the uid, but I may not be understanding that correctly. I'm very confused why I'm getting an argument error in particular.
After reviewing the headers, I've realized I confounded myself by having two separate requests with different formats. I'm posting both here, because both need to work, and I'm not seeing what I expected in the axios documentation on how to do this.
The first request takes this format:
await axios.post(SERVICE_PATH + '/gardens/addNew', garden, {headers: header})
And results in the following for req.headers on the server
{
host: 'localhost:5000',
connection: 'keep-alive',
'sec-ch-ua': '" Not;A Brand";v="99", "Microsoft Edge";v="97", "Chromium";v="97"',
accept: 'application/json, text/plain, */*',
authorization: 'Bearer undefined',
'sec-ch-ua-mobile': '?0',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36 Edg/97.0.1072.69',
'sec-ch-ua-platform': '"Windows"',
origin: 'http://localhost:3000',
'sec-fetch-site': 'same-site',
'sec-fetch-mode': 'cors',
'sec-fetch-dest': 'empty',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.9'
}
So it seems like the headers aren't going through, even though I explicitly added them the way I expected I should.
The second request type has no body, only params, so I pass the header as the second argument (which was what I was trying NOT to do, because I thought this was wrong, so I was phasing this out)
const res = await axios.get(SERVICE_PATH + '/plants/', header);
Which results in a header that looks the same as above, but with a defined token where it said undefined before. I don't believe it is throwing any firebase errors.
After seeing this, I think my question should actually have been, what is the right way to pass headers in an axios request? Should I be building them into the body if I need to pass additional objects? The examples I found largely seemed to have headers or a body rather than both, and the docs said to pass headers as the 3rd parameter (from my understanding), so now I'm confused :(

Answer 1

As it turns out, there were two problems I was running into. The first was not understanding how to properly send headers in axios (requiring the { headers } object containing key value pairs, not another object) and the second was not understanding how to properly set data into the header in my middleware. My updated code looks like
client (for requests with a body)
await axios.post(SERVICE_PATH + '/gardens/addNew', garden, { headers: header.headers})
And on the server I updated the try block for my token decoding to
admin
.auth()
.verifyIdToken(idToken)
.then(function (decodedToken) {
req['decodedToken'] = decodedToken;
return next();
})