@nhost/nuxt

NuxtJS module to use Nhost's GraphQL, authentication and storage in a NuxtJS app.

Using NPM:

$ npm install --save @nhost/nuxt

or using Yarn:

$ yarn add @nhost/nuxt

Other recommended NPM packages: nhost-js-sdk @nuxtjs/apollo graphql-tag

Add the module and configure nhost in nuxt.config.js:

{
  modules: [
    '@nhost/nuxt'
  ],
  nhost: {
    baseURL: "https://backend-REPLACE.nhost.app"
    // optional other nhost-js-sdk setup options
  }
}

Check out our documentation for all the available nhost-js-sdk options.

This module provides a middleware that automatically handles auth guards to protect pages.

1. Add nhost/auth to your Nuxt config middleware:

{
  router: {
    middleware: ["nhost/auth"];
  }
}

1. Define the home and logout routes on the nhost config

{
  nhost: {
    routes: {
      home: '/dashboard',
      logout: '/'
    }
  }
}

Users who attempt to access auth guarded pages without being logged in gets redirected to the logout route, and users who are logged in and attempt to access guest pages gets redirected to the home route.

These routes can also be set to either undefined or false which will disable their respective functionality. They are also available under this.$nhost.$options.routes on Vue components or ctx.$nhost.$options.routes on the Nuxt Context.

1. Finally, add an nhostAuth property to your Nuxt pages:

export default {
  nhostAuth: true,
};

nhostAuth takes the following values:

1. true: Users must be authenticated to access this page. If the user is not authenticated, the user gets redirected to the logout route.
2. false: This is the default value; no authentication required.
3. 'guest': This page can only be accessed by unauthenticated users. Users who are logged in will be redirected to the home route.

If you're using Typescript, make sure to include @nhost/nuxt to your Typescript config types:

{
  compilerOptions: {
    types: ["@nhost/nuxt"];
  }
}

To use this library with @nuxtjs/apollo, create two Nuxt plugins: nuxt-apollo-config.js and nhost-apollo-ws-client.js inside your plugins folder with the following content:

export default (ctx) => {
  return {
    httpEndpoint: "https://hasura-<REPLACE>.nhost.app/v1/graphql",
    wsEndpoint: "wss://hasura-<REPLACE>.nhost.app/v1/graphql",
    getAuth: () => {
      const token = ctx.$nhost.auth.getJWTToken();
      return token ? `Bearer ${token}` : null;
    },
  };
};

export default (ctx) => {
  const subscriptionClient = ctx.app.apolloProvider.defaultClient.wsClient;

  ctx.$nhost.auth.onAuthStateChanged((state) => {
    if (subscriptionClient.status === 1) {
      subscriptionClient.close();
      subscriptionClient.tryReconnect();
    }
  });

  ctx.$nhost.auth.onTokenChanged(() => {
    if (subscriptionClient.status === 1) {
      subscriptionClient.tryReconnect();
    }
  });
};

Then, in your Nuxt config:

{
  [...]
  "plugins": [
    {
      "src": "~/plugins/nhost-apollo-ws-client.js",
      "mode": "client"
    }
  ],
  "apollo": {
    "clientConfigs": {
      "default": "~/plugins/nhost-apollo-config.js"
    }
  },
  [...]
}

This module exposes an $nhost property on the Vue object and on the NuxtJS Context, which is an instance of NhostClient.

You can find a full example project with this library and @nuxtjs/apollo here.