Response from getAccessTokenSilently is not valid/correct

[KenEucker]

Describe the problem

response from getAccessTokenSilently is not a valid jwt, and not the token I expect.

What was the expected behavior?

the response form getAccessTokenSilently is usable as an authorization header when using Auth0 with my graphql server. (graphql-yoga)

Reproduction

// server.ts (server)
import { useAuth0 } from '@envelop/auth0'
...
const yoga = createYoga({
  plugins: [
    useAuth0({
      domain: process.env.AUTH0_DOMAIN,
      audience: process.env.AUTH0_AUDIENCE,
      secret: process.env.AUTH0_SECRET,
      headerName: 'authorization',
      preventUnauthenticatedAccess: true,
      extendContextField: 'auth0',
      tokenType: 'Bearer',
    }),
  ],
...

// app.ts (client)
import { createApp } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { apolloClient } from './store'
import auth from './auth'
...
const app = createApp(App)

// Auth
app.use(auth)

// GraphQL
app.provide(DefaultApolloClient, apolloClient)
...

// auth.ts (client)
import { createAuth0 } from '@auth0/auth0-vue'
...
const auth = createAuth0({
        domain: process.env.AUTH0_DOMAIN ?? '',
        client_id: process.env.AUTH0_CID ?? '',
        redirect_uri: window.location.origin,
        useRefreshTokens: true,
      })
...
export default auth

// store.ts (client)
...
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { setContext } from '@apollo/client/link/context'

const uri = `${process.env.GRAPH_URL}${
  process.env.GRAPH_PORT !== '80' ? `:${process.env.GRAPH_PORT}` : ''
}/${process.env.GRAPH_PATH}`

// HTTP connection to the API
const httpLink = createHttpLink({
  uri,
})

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('author-token')
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  }
})

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
export const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache,
  /// TODO: grab from env
  connectToDevTools: process.env.DEV === 'true',
})
...

// state.ts (client)
...
const storedToken = useStorage('author-token', '')
const auth0Token = await auth.getAccessTokenSilently()

if (auth0Token.length) {
  storedToken.value = auth0Token
}
...

Environment

• **Version of auth0-vue used: 1.0.2
• **Version of vue used: 3.2.45
• **Which browsers have you tested in? Chrome, Firefox
• **Other modules/plugins/libraries that might be involved: Vue Apollo, Graphql-yoga

What is happening

When using the above code, requests to the graphql server contain the authorization header, which looks like this:
"yJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIiwiaXNzIjoiaHR0cHM6Ly9kZXYtMG4wZ2poanEudXMuYXV0aDAuY29tLyJ9..qvoto_1iPspap5Fq.qeLSUkBUn0Vo5kHQ-lOfKBBi7BxmycyZUoyr3UyT03DhmZP5mcLJRJYRw0dFjiC3XVyQAuN9mP64F2nKYrGWHvYjSVu_DUxiAfB-u3u5P8zs97gyUZFZnjLz3_y73lt20vl2RxchX5bnlci3KjXVHhr_INm274B3gs7mMz4bFJVHx-Z2Pu3c4laWPcMh5htcnlOgelQGn2Xz5kpx6oa5B8pWAO8RYlYpZ0qmIUsv9oiNPjl4QCx_7uwWhTH6xzUefS2kcFB8s9_tNEcjweZCDDelc7i7mpu8ZbIc4d9oWYKhGc8X5H3a3Qtjv0LY0FX-9yc43AV_tFT5-RoBNkoZbJNDXbqdug.vSoSEEtxoPsDzVTzPNdr7g"

And that token string is not valid according to jwt.io and produces the following error:

ERR Error: Failed to decode authentication token! 
at verifyToken (file:///Users/keneucker/Dev/GraphQL-demo/node_modules/@envelop/auth0/esm/index.js:65:15)
at onContextBuilding (file:///Users/keneucker/Dev/GraphQL-demo/node_modules/@envelop/auth0/esm/index.js:72:50)

[KenEucker]

I figured out my issue was that I wasn't passing the audience in the configuration of createAuth0.