1

I am trying to create a login functionality using nuxtjs with the nuxtjs apollo-module and nodejs in the backend using apollo-server. I would like to pass the token from the frontend (nuxtjs/apollo-client) to the backend (nodejs/apollo-server).

Signin Function

async signin () {
  const email = this.email
  const password = this.password
  try {
    const res = await this.$apollo.mutate({
      mutation: signIn,
      variables: {
        email,
        password
      }
    }).then(({ data }) => data && data.signIn)
    const token = res.token
    await this.$apolloHelpers.onLogin(token)
    this.$router.push('/')
  } catch (err) {
    // Error message
  }
}

nuxtjs.config

import Cookies from 'js-cookie'
const token = Cookies.get('apollo-token')

apollo: {  
  clientConfigs: {
    httpEndpoint: 'http://localhost:8000/graphql',
    httpLinkOptions: {
      credentials: 'include',
      headers: {
        'authorization': token ? token : '' // passing the token on this line fails it returns '' 
      }
    }
  }
},

Cookie in Browser DevTools

enter image description here

I am unable to pass the token to the authorization header. I also tried to do it using localStorage (`'authorization': (process.client) ? localStorage.getItem('token'`) : ' '`) but this does not seem to be possible because of the server side rendering.

The token is saved in a cookie called 'apollo-token'. However the Authoriation header in the format 'Bearer token' is not set. According to the apollo-client documentation this should be set automatically (https://github.com/nuxt-community/apollo-module#authenticationtype-string-optional-default-bearer).

I would be very very thankful for any kind of help!

Schwesi
  • 4,753
  • 8
  • 37
  • 62

1 Answers1

0

i encountered the same issue , this is strange , after some time it started working automatically my configurations was

httpEndpoint: process.env.GRAPHQL_URL,
httpLinkOptions: {
  credentials: 'same-origin'
},
watchLoading: '~/plugins/apollo-watch-loading-handler.js',
errorHandler: '~/plugins/apollo-error-handler.js',
wsEndpoint: null, // process.env.STRAPI_GRAPHQL_WS_URL,
tokenName: 'session-token',
authenticationType: 'Bearer',
// Enable Automatic Query persisting with Apollo Engine
persisting: false,
// Use websockets for everything (no HTTP)
// You need to pass a `wsEndpoint` for this to work
websocketsOnly: false

also you should wrap your configs in "default"

apollo: {  
 clientConfigs: {
  default : { 
    httpEndpoint: process.env.GRAPHQL_URL,
    httpLinkOptions: {
     credentials: 'same-origin'
    },
    watchLoading: '~/plugins/apollo-watch-loading-handler.js',
    errorHandler: '~/plugins/apollo-error-handler.js',
    wsEndpoint: null, // process.env.STRAPI_GRAPHQL_WS_URL,
    tokenName: 'session-token',
    authenticationType: 'Bearer',
    persisting: false,
    websocketsOnly: false 
  }
 }
},

if this doesn't work try

  // in default config object
  getAuth: () => token ? `Bearer ${token}`: '',

Please let me know if it works

jibrail_
  • 97
  • 5