First party SPA using connectors and talking with a first party API

First a disclaimer and an apology: I’ve done a bunch of reading over the last few hours in an attempt to grasp the concepts and best practices before asking my question: the quick start guides, the SPA & custom API guide, the difference between ID Token and Access Token, etc. I can’t seem to wrap my head around it. Sorry.

Next, my goal: I have a SPA. I want end-users to be able to authenticate using either a username and password (using Auth0’s provided username-password-authentication) or one of my two connectors (Google and Microsoft). I have an API that the SPA (and, theoretically, any other consumer) will use to get work done. This API should be able to assess that a user has the proper scopes to perform the actions.

What I need help with: I think I understand that when a user signs in in the SPA, they will be authenticating with Auth0 (for user-pass-auth) or the with Google or Microsoft. The SPA will get an ID Token and an Access Token. The access token’s audience is the SPA, correct? So how do I turn around and authenticate that user with my first-party API so that I can get an Access Token whose audience is the API so that calls can be made in order to do work?

Hi @brewtus

The audience you specify will be your API and not your SPA.

The reason for this is when you make the authentication request to Auth0 you are pretty much saying “I want to authenticate the user so that this SPA (specified by the client_id) can access this API (specified by the audience)”.

This is the reason why you can’t use id_token for API’s since the id_token is intended for you SPA and as such the audience is set to your SPA’s client_id.

You would then send the access_token received by the successful authentication to your API on every HTTPS request using the standard Authorization header with the Bearer <access_token> format.

Hope this helps!

So what does this mean for the SPA? If the user is at the SPA with a link to sign in in front of them, should that link direct them to https://mytenant.auth0.com/authorize with all the necessary things and with the audience set to my API audience and the response type set to token id_token?

Hi @brewtus

Yes, that is essentially correct though I would recommend using the Auth0.js library to generate the URL and redirect the user on your SPA’s behalf.

The reasoning for letting the Auth0.js library handle it is that they keep the library up to date with the latest best practices and such, so that’s one less thing for you to worry about.

Right, yes. That makes sense. I was just curious about what’s happening under the hood there.

So even though the audience that I’m sending is for the API and the access token that I receive will be for my API, the ID token will be for the SPA?

Yes, that is correct.

Just a note that the ID Token is only for the SPA.

Any requests to Auth0 API’s (such as the /userinfo endpoint) require the Access Token.

1 Like

That makes perfect sense.

Thanks for your help!

Glad that you have figured it out!