Auth0 Home Blog Docs

How can I use the Lock modal to authorise my SPA client to access my Node API?

lock
client
nodejs
spa
vuejs

#1

I have a Node.js API (koa) and a single-page app client (Vue.js). I’d like the SPA to have a login button that shows the Lock modal/form and lets users sign up/in using username-passwords. Once signed in successfully, they’ll be able to access the restricted endpoints of my API. I’m pretty sure I’m almost there, but it seems like the “auth0 client” I’ve setup doesn’t know how to talk to the “auth0 api” I’ve setup.

I setup an “API” in Auth0, then wired my koa app to use koa-jwt and node-jwks-rsa - it now works with one of the example payloads in Auth0’s API “test” section. I also setup a “Client” in Auth0, then got the Lock modal to show and I log the result to console. But what gets logged is an access_token that’s very short (like 26 chars) and very different from the payload from the API’s “test” section.

It seems if I play with the “audience” property on the client, it does seem to generate an access_token that works, but (a) it prompts the user to “authorize” their account to work with the API (similar to OAuth, but I can’t imagine why it would do that in this scenario), and (b) setting the “audience” property in Lock is undocumented and I’m not sure it’s supported.

I’ve been struggling for several hours now trying to figure out how to do this, and I keep feeling like I’m missing something obvious, because I assume this is what most people use Auth0 for?


#2

At this time, usage of Lock directly from within your own client application is not supported if you want to leverage API Authorization functionality (aka audience parameter).

Although there is work in progress to provide this possibility, for now it’s not supported/documented and as such I would recommend you to consider the use of Auth0.js v8 library which fully supports it and for which there is documentation.

In particular, you should take a look at the authorize method which allows you to redirect to the hosted login page (and still show Lock there) which could mean a similar experience while being able to leverage the API authorization functionality.


#3

Well, ran into this too. Such a common scenario. Please fix this as soon as possible. The 30mm should help.


#4

Well, ran into this too. Such a common scenario. Please fix this as soon as possible. The 30mm should help.


#5