Search code examples
vue.jssecuritynuxt.jsapollostrapi

How to hide an authentication token on Nuxt.js 2?

I needed to query my Strapi backend from my NuxtJS frontend via Apollo, using a JWT authentication token. I searched a lot, without success, on how to hide the authentication token on Nuxt.js 2. I tried with .env and privateRuntimeConfig :

  • With .env, when I was using process.env.MY_KEY, the value of the key was displayed in plain text in /_nuxt/app.js, in the browser.
  • With privateRuntimeConfig, I simply couldn't access to the key from the nuxt.config.js.

Here is my nuxt.config.js Apollo configuration :

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint:
          process.env.NODE_ENV === "production"
            ? process.env.BACKEND_URL ||
              "my-website.com/graphql"
            : process.env.BACKEND_URL || "http://localhost:1337/graphql",

        httpLinkOptions: {
          headers: {
            authorization: `Bearer MY_JWT_TOKEN`,
          },
        },
      },
    },
  },

Feel free to ask for additional informations.

Solution

  • OP solved the issue by using a Strapi token that is read-only, preventing any undesired person from being able to edit OP's CMS content.

    Other alternatives would have been: