"auth0-spa-js" get JWT for API access with correct audience

Help
,
1

I’m trying to have my Vue SPA to access my demo API.
I have this up and running with a "Regular Web Application” see Auth0-php regular web app + API - #13 by martin.bjerge
I have been reading this documentation Call Your API from Your Single-Page App

In my main.js I initialize auth0:

// Install the authentication plugin here
const domain = AuthConfig.domain
const clientId = AuthConfig.clientId
Vue.use(Auth0Plugin, {
  domain,
  clientId,
  authorizationParams: {
    audience: 'https://api.example.com',
    redirect_uri: 'http://localhost:8080/'
  },
  onRedirectCallback: appState => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    )
  }
})

In my Home.vue component, I have a login button that works, and I can get all the user details.
I then have a second button that should make a call to my API.

async api () {
      const idToken = await this.$auth.getIdTokenClaims()
      const accessToken = await this.$auth.getTokenSilently({ audience: 'https://api.example.com', detailedResponse: true })
      console.log('AccessToken:')
      console.log(accessToken)
      console.log('Bearer ' + accessToken.id_token)

      const result = await fetch('https://api.example.com/api/public', {
        method: 'GET',
        headers: {
          Authorization: 'Bearer ' + accessToken.id_token
        }
      })
      this.api_data = await result.text()
      // this.api_data = result
      console.log(this.api_data)
    },

All my code can be found here: GitHub - martinbjerge/auth0_simple_api: Example of how to setup a simple API and protect it with AUTH0 and how to access it.

Here the problem is that a “audience” value in the jwt (token) I get is not what I specified but the clientId of my SPA. Hence then I don’t get access to my API.

Any ideas to what I’m doing wrong here?

3

Hi @martin.bjerge,

It looks like the token you are passing is the ID Token, not an Access Token. That would explain why it contains an audience claim with your client ID.

Our Vue Quickstart shows how to retrieve an Access Token.

Please let me know if you have any questions.

1 Like
4

Thank you very much for your input.

Sorry did not mention that I’m coding in Vue 2, as I also use bootstrap-vue which to my knowledge don’t work in Vue 3 yet.

So, I’m using @auth0/auth0-spa-js and I don’t see the function “getAccessTokenSilently” in that SDK

Can’t I do this in Vue 2?

5

See this method.

1 Like
6

Thanks, unfortunatly this did not work.

I have tried diferent options.

But i still get the SPA auduence with this and not the audience i provide in ConfAudience?

      const differentAudienceOptions = {
        authorizationParams: {
          audience: ConfAudience,
          scope: 'read:all',
          redirect_uri: 'http://localhost:8080'
        }
      }
      const accessToken = await this.$auth.getTokenWithPopup(differentAudienceOptions)

I have also update the code at github.

7

Can you please show an example response you are seeing from the getTokenSilently method?

9

My BAD - Problem solved!

I have by mistake been looking at the id_token and not the access_token.

A bit og background:
The access_token was until i provided the updated audience not a JWT but an Opaque token.
Hence to get a JWT, I accessed the id_token as this is a JWT. But forgot to look back at the access_token when I added the correct audience.

@dan.woda Thanks for your input and patience with me, the auth0 newbie :blush:

Here is link til my github with the above example:

1 Like
10

Glad you got it figured out! Let us know if you have any other questions.

11

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