Silent Auth for SPA and API Tokens

Help
1

Hi, I’m having some trouble working with Auth0.js and I’m hoping someone can help clear a few things up for me.

I currently have a SPA where I want the user to be able to log in and out. I’m using Lock.js for the login/logout UI and auth0.js for functions like checkSession(), which I call first thing when the app loads so that the user is signed in silently if they had already been logged in recently. I also have a Node API backend, and I want to use auth0 access tokens to authorize access to those endpoints.

Right now what I’m doing is that I have the audience parameter in my auth0.webAuth set to https://myauth0domain/userInfo, which successfully overrides the pesky consent_required error that I kept getting (I understand that that is a side effect of developing locally). But this means that when I authenticate, I get a short, non-JWT string as my access token. I read on a different forum post that I have to set the audience parameter as my API audience (the one listed on the auth0 dashboard for the custom API I set up).

So here are my questions:

  • what are some general solutions for this kind of setup?
  • do I need to make separate requests for authenticating the user into my SPA and getting access tokens?
  • is it just a matter of correctly configuring my hosts file so that I no longer get the consent_required error?
  • I am familiar with the consent popup that comes up when you try to log in, using Lock.js for example, and the app asks the user to give consent to perform certain actions as specified in the scopes. Is this different from the consent_required error that I keep getting in my console for silent auth? I tried to handle the consent_required error by displaying the login UI whenever that error came up and made the user log in, but the error loops through — even after I try to log in through the Lock UI, I still get the consent_required error.

Thanks for any and all help.

2

But this means that when I authenticate, I get a short, non-JWT string as my access token.

You need to register your API and use its API identifier as the audience in the authorize request (not https://myauth0domain/userInfo).
https://auth0.com/docs/microsites/protect-api/protect-api

I had just answered a very similar question yesterday, here is the answer to that:

You shouldn’t have to deal with any of the prompt/consent explicitly in any way. This should work out of the box with silent authentication (where such is suppressed due to automatically using the prompt=none parameter in the background).

  • is it just a matter of correctly configuring my hosts file so that I no longer get the consent_required error?

That should not be related. It’s probably more related to the configuration of the authorization request done by auth0.js. Maybe you could provide the code how to initialize the webAuth object and call the authorize request, incl. all parameters used.

Note that we also have excellent SPA quickstarts for authentication and authorization. Depending on the tech stack you’re using, these might be a good start to also review the code in there as reference.

Side note: if you’re developing a new SPA, it might make sense to go with the newer auth0-spa-js rather than auth0.js, because it makes the integration even easier, and also supports Silent Authentication. See