Nhost v2

.env.example

@@ -1,7 +1,5 @@
 # Replace xxxxxx with NHost project ID
-HASURA_HTTP_URL=https://hasura-xxxxxx.nhost.io/v1/graphql
-HASURA_WSS_URL=wss://hasura-xxxxxx.nhost.io/v1/graphql
+HASURA_HTTP_URL=https://hasura-xxxxxx.nhost.app/v1/graphql
+HASURA_WSS_URL=wss://hasura-xxxxxx.nhost.app/v1/graphql
 
-NHOST_LOGIN_URL=https://backend-xxxxxx.nhost.io/auth/local/login
-NHOST_USER_URL=https://backend-xxxxxx.nhost.io/auth/user
-NHOST_REFRESH_URL=https://backend-xxxxxx.nhost.io/auth/refresh-token
+NHOST_BASE_URL=https://backend-xxxxxx.nhost.app

assets/css/tailwind.css

@@ -0,0 +1,5 @@
+/* purgecss start ignore */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+/* purgecss end ignore */
+@import 'tailwindcss/utilities';

nuxt.config.js

@@ -1,7 +1,6 @@
 require('dotenv').config()
 
 export default {
-  mode: 'universal',
   /*
   ** Headers of the page
   */
@@ -81,27 +80,14 @@ export default {
   },
   auth: {
     strategies: {
-      refresh: {
-        _scheme: '~/plugins/refreshScheme.js',
-        prefix: 'auth',
-        endpoints: {
-          login: {
-            url: process.env.NHOST_LOGIN_URL,
-            method: 'post',
-            token: 'jwt_token'
-          },
-          refresh: {
-            url: process.env.NHOST_REFRESH_URL,
-            method: 'post',
-            token: 'refresh_token'
-          },
-          logout: false,
-          user: {
-            url: process.env.NHOST_USER_URL,
-            method: 'get',
-            propertyName: 'user'
-          }
-        }
+      nhost: {
+        _scheme: '~/plugins/nhostScheme.js',
+        prefix: 'nhost',
+        config: {
+          base_url: process.env.NHOST_BASE_URL,
+          ssr: true
+        },
+        tokenName: 'auth.jwt_token'
       }
     },
     plugins: [
@@ -112,6 +98,7 @@ export default {
   ** Build configuration
   */
   build: {
+    transpile: ['@nuxtjs/auth'],
     postcss: {
       preset: {
         features: {

package.json

@@ -13,24 +13,27 @@
     "test": "jest"
   },
   "dependencies": {
-    "@nuxtjs/apollo": "^4.0.0-rc19",
-    "@nuxtjs/auth": "^4.8.5",
-    "@nuxtjs/axios": "^5.3.6",
-    "@nuxtjs/dotenv": "^1.4.0",
-    "cookie-universal-nuxt": "^2.1.0",
+    "@nuxtjs/apollo": "^4.0.1-rc.5",
+    "@nuxtjs/auth": "^4.9.1",
+    "@nuxtjs/axios": "^5.12.2",
+    "@nuxtjs/dotenv": "^1.4.1",
+    "cookie-universal-nuxt": "^2.1.4",
     "dotenv": "^8.2.0",
-    "nuxt": "^2.0.0"
+    "nhost-js-sdk": "^2.3.1",
+    "nuxt": "^2.14.7"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config": "^1.0.1",
-    "@nuxtjs/eslint-module": "^1.0.0",
-    "@nuxtjs/tailwindcss": "^1.0.0",
-    "@vue/test-utils": "^1.0.0-beta.27",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
-    "eslint": "^6.1.0",
-    "eslint-plugin-nuxt": ">=0.4.2",
-    "jest": "^24.1.0",
-    "vue-jest": "^4.0.0-0"
+    "@nuxtjs/eslint-config": "^4.0.0",
+    "@nuxtjs/eslint-module": "^3.0.0",
+    "@nuxtjs/tailwindcss": "^3.2.0",
+    "@vue/test-utils": "^1.1.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "eslint": "^7.13.0",
+    "eslint-config-developit": "^1.2.0",
+    "eslint-plugin-nuxt": "^1.0.0",
+    "eslint-plugin-vue-libs": "^4.0.0",
+    "jest": "^26.6.3",
+    "vue-jest": "^3.0.7"
   }
 }

pages/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    Index
+    <h1>Index</h1>
+
+    <nuxt-link to="/secure">
+      /secure
+    </nuxt-link>
   </div>
 </template>
 

pages/login.vue

@@ -7,7 +7,7 @@
 
       <p>
         <input
-          v-model="username"
+          v-model="email"
           type="email"
           placeholder="Email"
         >
@@ -32,7 +32,7 @@ export default {
   name: 'LoginPage',
   data () {
     return {
-      username: '',
+      email: '',
       password: '',
 
       error: '',
@@ -44,16 +44,14 @@ export default {
       this.error = ''
       this.loading = true
 
-      if (!this.username || !this.password) {
+      if (!this.email || !this.password) {
         return
       }
 
       try {
-        await this.$auth.loginWith('refresh', {
-          data: {
-            username: this.username,
-            password: this.password
-          }
+        await this.$auth.loginWith('nhost', {
+          email: this.email,
+          password: this.password
         })
 
         this.$router.push(this.$route.query.next || '/')

plugins/apollo.js

@@ -5,7 +5,7 @@ export default function ({ app }) {
   client.wsClient.connectionParams = () => {
     return {
       headers: {
-        Authorization: `Bearer ${app.$cookies.get('auth.jwt_token')}`
+        Authorization: `Bearer ${app.$auth.strategy.auth.getJWTToken()}`
       }
     }
   }

plugins/auth.js

@@ -15,9 +15,7 @@ export default function ({ route, redirect, app }) {
   }
 
   // If we're not logged in, redirect to /login
-  if (!app.$auth.loggedIn) {
-    redirect(302, '/login', {
-      next: route.fullPath
-    })
+  if (!app.$auth.strategy.auth.isAuthenticated()) {
+    redirect(302, '/login')
   }
 }

plugins/nhostScheme.js

@@ -0,0 +1,48 @@
+import nhost from 'nhost-js-sdk'
+import LocalScheme from '@nuxtjs/auth/lib/schemes/local'
+
+export default class NHostScheme extends LocalScheme {
+  // Override `fetchUser` method of `local` scheme
+  constructor (ctx, options) {
+    super(ctx, options)
+
+    this.cookies = this.$auth.ctx.app.$cookies
+
+    nhost.initializeApp(this.options.config)
+
+    this.auth = nhost.auth()
+
+    this.auth.onAuthStateChanged(this._setCookie.bind(this))
+  }
+
+  fetchUser () {
+    const user = this.auth.isAuthenticated()
+      ? {}
+      : null
+
+    this.$auth.setUser(user)
+    return
+  }
+
+  login ({ email, password }) {
+    this.auth.login(email, password)
+  }
+
+  _setCookie (isLoggedIn) {
+    if (!this.options.tokenRequired) {
+      return
+    }
+
+    if (isLoggedIn) {
+      this.fetchUser()
+      const token = `${this.options.tokenType} ${this.auth.getJWTToken()}`
+      this.cookies.set(this.options.tokenName, token, {
+        path: '/'
+      })
+    } else {
+      this.cookies.remove(this.options.tokenName, {
+        path: '/'
+      })
+    }
+  }
+}