SPAs and API calls -- how do i determine my user

Help
1

Most apps are going to need to identify a user so that the user has access to their own stuff but not others. E.g. a blogging platform which allows users to edit their own posts but not others. How do i get my user from the auth0 token?

Problem is essentially same as here: How to model entity relationships when user identities are managed by Auth0?

I understand the general approach, but a tutorial or github repo with both the SPA side and the API side would be really helpful, e.g. how do i send my auth0_id (or similar) with my request so that i can use that to determine user on the API side.

3

Hi @kagemusha,

You can find example applications that demonstrate calling an API in our Quickstarts:

Auth0’s SPA SDK follows an OAuth2 flow called Authorization Code Flow with Proof Key for Code Exchange. In this flow, after a user logins, Auth0 will issue the SPA an ID Token and an Access Token:

  • ID Token - This token is used by the SPA to get basic profile information. It is received as a JWT and conveniently decoded by whichever Auth0 SDK you are using. For example with auth0-spa-js:
document.getElementById('login').addEventListener('click', () => {
  auth0.loginWithRedirect({
    redirect_uri: 'http://localhost:3000/'
  }).then(token => {
    //logged in. you can get the user profile like this:
    auth0.getUser().then(user => {
      console.log(user);
    });
  });
});
  • Access Token - The SPA will pass this token in its Authorization header as a bearer token in API requests:
document.getElementById('callApi').addEventListener('click', () => {
  auth0
    .getTokenSilently()
    .then(accessToken =>
      fetch('https://exampleco.com/api', {
        method: 'GET',
        headers: {
          Authorization: 'Bearer ' + accessToken
        }
      })
    )
    .then(result => result.json())
    .then(data => {
      console.log(data);
    });
});

Since it sounds like you may be calling your own API, you will need to register your API with Auth0 and use the API identifier as the audience when you initiate the Auth0 client:


import createAuth0Client from '@auth0/auth0-spa-js';

// either with async/await
const auth0 = await createAuth0Client({
  domain: 'YOUR_DOMAIN',
  client_id: 'YOUR_CLIENT_ID',
  audience: 'YOUR_API_IDENTIFIER'
});

For a more comprehensive walkthrough, I’d recommend taking a look at the Auth0 blog for articles such as:

4

is the access token a JWT also? do I include the identifying info there (e.g. auth0_id)? if so how?

and then I assume I decode the token on the API server call to get the id? If you have a Rails snippet (or some other server-side code) on how to do this, would be helpful

5

Hi @kagemusha,

The Access Token will be a JWT if you provide an audience in the authorization request. For example:

const auth0 = await createAuth0Client({
  domain: 'YOUR_DOMAIN',
  client_id: 'YOUR_CLIENT_ID',
  audience: 'YOUR_API_IDENTIFIER' // <-- use your API identifier as the audience
});

Otherwise, it will be an opaque token that can’t be decoded, but can be used for calling the https://your-domain/userinfo endpoint.

When you provide an audience in your SPA application and receive a JWT for the Access Token, the sub claim of the decoded token will be the user ID within Auth0. You can use this to retrieve additional information about the user.

For an example of using the Ruby on Rails SDK, you can check out the Quickstart:
https://auth0.com/docs/quickstart/webapp/rails/01-login

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.