auth0 / auth0-vue

Auth0 authentication SDK for Vue.js apps
Other
136 stars 24 forks source link

Response from getAccessTokenSilently is not valid/correct #186

Closed KenEucker closed 1 year ago

KenEucker commented 1 year ago

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

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 commented 1 year ago

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