https://supertokens.com/ logo
Join Discord
Powered by
Nuxt 3 This token cannot reach because it is http ...
# support-questions-legacy
p
Nuxt 3 This token cannot reach because it is http only. How do I get it?
r
hey @productdevbook
it's intentionally httpOnly - for security reasons
p
I guess it's a security issue but I don't know how to access it
r
if you only want the payload of it on the frontend, you can use the 
Session.getAccessTokenPayloadSecurely
function
if you want to get the full token on the frontend, then you will need to enable use with JWT and then read that on the frontend. Checkout our docs for enabling JWT with sessions
p
Copy code
ts
import {
  ApolloClient,
  InMemoryCache,
  createHttpLink,
} from '@apollo/client/core/index.js'
import {
  DefaultApolloClient,
  provideApolloClient,
} from '@vue/apollo-composable/dist/index.esm.js'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  const a = useCookie('sAccessToken')
  // console.log(a.value, 'aaa')
  const httpLink = createHttpLink({
    credentials: 'include',
    uri: 'http://127.0.0.1:3001/graphql',
    headers: {
      authorization: `Bearer ${a.value}`,
    },
  })

  const cache = new InMemoryCache()

  let apolloClient: ApolloClient<any>

  if (process.server) {
    apolloClient = new ApolloClient({
      ssrMode: true,
      link: httpLink,
      cache,
    })
    nuxtApp.hook('app:rendered', () => {
      nuxtApp.payload.data.apollo = apolloClient.extract()
    })
  }
  else {
    apolloClient = new ApolloClient({
      link: httpLink,
      cache,
      ssrForceFetchDelay: 100,
    })
  }

  nuxtApp.hook('app:rendered', () => {
    if (process.server)
      nuxtApp.payload.apollo = apolloClient.cache.extract()
  })

  provideApolloClient(apolloClient)
  nuxtApp.provide('$apollo', { DefaultApolloClient, apolloClient })
})
There is such a code, I can't get it, it seems impossible to get it here
r
yea.. so checkout our guide on graphql. You don't need to use 
authorization
headers at all if the graphql layer is in the same apiDomain as the supertokens API
otherwise you can enable the JWT feature and read the JWT on the frontend and add it to the 
authorization
header
p
Copy code
ts
      Session.init({
        jwt: {
          enable: true,
          issuer: 'http://localhost:3001/auth',
          propertyNameInAccessTokenPayload: 'session',
        },
      }), // initializes session features
thats true
r
please see docs on how to read the JWT on the frontend. It's all there in the docs
p
r
yup
see the other pages in this section
p
i applied all of these
yes all reading docs
Copy code
const ab = await Session.getAccessTokenPayloadSecurely()
  if (ab.session)
    token = ab.session
No instance of Session found. Make sure to call the Session.init method. If you are trying to use this method doing server-side-rendering, please make sure you move this method inside a componentDidMount method or useEffect hook.
if
Copy code
ts
  nuxtApp.hook('app:suspense:resolve', async () => {
    const ab = await Session.getAccessTokenPayloadSecurely()
    if (ab.session)
      token = ab.session
  })
If I use it like that, I can't get the token on the ssr side
r
please see if you are doing session.init properly. I think you had run into this issue previously as well.
also, 
ab.session
is wrong. It should be 
ab.jwt
- please see the docs
p
this fixed but empty client
server see token
r
it should be 
ab.jwt
as mentioned in the docs
3 Views
PreviousNext
Powered by