SSR auth header

[fn-bucket]

I find this problem all over the internet and in the nuxt discord, but never a link or any instructions anywhere on exactly the best way to get the auth cookie translated to the authorization header for my graphql server. Thus, refreshing a page never works.

// nuxt.config.ts
{
 ...
  'graphql-client': {
    codegen: false,
    tokenStorage: {
      mode: 'cookie',
      cookieOptions: {
        path: '/',
        secure: false, // defaults to `process.env.NODE_ENV === 'production'`
        httpOnly: true, // Only accessible via HTTP(S)
        maxAge: 60 * 60 * 24 * 5 // 5 days
      }
    }
}

and I am setting the token

  async function handleLogin() {
    const { data } = (await useAsyncGql({
      operation: 'Authenticate',
      variables: {
        "username": selectedAppUser.value
      }
    }))
    const authToken = data.value.authenticate
    useGqlToken(authToken)
    await afterLogin()
  }

and queries work fine until I refresh the page, then it bombs.

I can see the cookie on the server if I put in a middleware, but from there I am stuck.

Is there more direct documentation on this, or do I just need to learn more Nuxt fundamentals?

https://nuxt.com/docs/guide/directory-structure/server#accessing-request-cookies

this is how I can see the cookie on the server, but I cannot figure out what to do from there...

[Diizzayy]

and queries work fine until I refresh the page, then it bombs.

@fn-bucket The issue you're facing here is two fold, let me explain.

You've enabled the httpOnly flag for the cookie options in tokenStorage, hence the useGqlToken utility isn't able to handle the storing nor retrieving ( during SSR / on refresh ) of the auth cookie. However though, given that you are in-fact seeing the cookie in the middleware, It's safe to assume that the cookie is being set being by the Authenticate mutation http response.

If you wish to continue using the httpOnly cookie, You'll have to inspect the name of the cookie being stored and set tokenStorage.name to match it, that would enable this module to properly retrieve the token. Given the aforementioned, the client (browser) will not be able to read the httpOnly cookie, so upon making the login request ( Authenticate mutation in your case ), you'll still need to call the useGqlToken utility with the token received in the response to apply the token. As it pertains to SSR, once you've set tokenStorage.name to match the httpOnly cookie being stored, the nuxt-graphql-client module will automatically handle extracting and applying the token.

@fn-bucket Feel free to ask any other questions you may have.

Additional notes:

• useAsyncGql should only be used to query for data that is required to render a page, outside of that you should leverage Gql Functions for making queries / mutations.

  async function handleLogin() {
-    const { data } = (await useAsyncGql({
-     operation: 'Authenticate',
-      variables: {
-        "username": selectedAppUser.value
-      }
-    }))
+  const { authenticate } = await GqlAuthenticate({ username: selectedAppUser.value })

    const authToken = authenticate
    useGqlToken(authToken)
    await afterLogin()
  }

[fn-bucket]

@Diizzayy - thanks a ton.

I disabled httpOnly and it works great.

FWIW, the docs for Gql functions could have an example - maybe just as simple as THIS_GRAPHQL_FILE will generate THIS_GQL_FUNCTION. I did not understand that I could do the GqlAuthenticate line - even though I see it now upon closer reading.

[Diizzayy]

@fn-bucket Thanks for pointing that out, I'll update the documentation to make it clearer for others.