I ran into this problem the other day. I’m playing around with Auth0 for user management and authentication. I rigged up all the Auth0 components in my Vue.js app. Per Auth0’s documentation, I created the proper apps and API. Yet, when I added route authorization to my Node.JS backend using Auth0, I kept receiving a ‘JWT Malformed’ error.
This made no sense to me. I spent lots of time trying various things, confirming that tokens were being created, confirming that tokens were correct, etc.
At the end of the day, I added the ‘Audience’ from Auth0 to the login settings in Vue. It turns out, you need to tie your app and API together with the ‘audience’ value. I’ll post an example below.
But first, why did I make this mistake, and what can we learn from it? After reflecting on the situation, it boils down to Auth0’s poor documentation. Apparently while trying to remediate this problem, I found numerous complaints about it.
Auth0’s documentation makes no mention anywhere that the audience needs to be added to the login information. At one point I had a hunch that I needed to tie the API and App together somehow in Auth0, but I couldn’t find any documentation for it whatsoever. I triple checked after I had that hunch.
I don’t remember why I thought that adding the ‘audience’ key/value pair to the login script would work, but nonetheless, I tried adding it, and that worked.
We can use this as a learning experience, though. I highly doubt this was malicious on Auth0’s part. I can’t even say it was laziness. Rather, someone there didn’t think to spell it out.
This is a reason I am a big advocate on tieing the responsabilities of customer facing documentation with technical support staff. I know that’s some serious cross polination of skills there, but tech support folks are intamately familiar with not only the problems customers face, but the nuances of those problems, too.
I can’t say how many times I’ve seen engineers get frustrated by customers getting frustrated because those engineers don’t understand why the customer is getting frustrated in the first place.
Technical support staff are the bedside nurses for your business. Give them the power to make your customers live’s easier.
Anyway, here’s an example of the change I needed to make below.
Here’s a screenshot of the code:
That screenshot comes from the main.js file in my Vue.js project.
Look at the app.use statement for Auth0. That’s almost a copy and paste job directly from Auth0’s documentation except the ‘audience’ is added to it. I also swapped each value for an ‘environment variable.’
If you keep getting JWT malformed errors using Auth0 in Vue and Node.js (or any other app using Auth0), make sure that the audience for your API in Auth0 is added to the CreatAuth0 initialization in the main.js file in your app.
