├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.json ├── playground ├── .gitignore ├── app.vue ├── middleware │ └── auth.js ├── nuxt.config.ts ├── package.json ├── pages │ ├── graphql.vue │ ├── index.vue │ ├── private.vue │ └── storage.vue └── tsconfig.json ├── src ├── module.ts └── runtime │ ├── composables │ ├── useAccessToken.ts │ ├── useNhostClient.ts │ ├── useNhostUser.ts │ └── useRefreshToken.ts │ ├── plugins │ ├── nhost.client.ts │ └── nhost.server.ts │ ├── server │ └── api │ │ └── session.ts │ └── types │ └── index.d.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .nuxt 3 | *.log 4 | cache/ 5 | lib/ 6 | types/ 7 | .DS_Store 8 | coverage 9 | sw.* 10 | dist 11 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | '@nuxtjs/eslint-config-typescript' 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | #pnpm 17 | pnpm-lock.yaml 18 | 19 | # Generated dirs 20 | dist 21 | 22 | # Nuxt 23 | .nuxt 24 | .output 25 | .vercel_build_output 26 | .build-* 27 | .env 28 | .netlify 29 | 30 | # Env 31 | .env 32 | 33 | # Testing 34 | reports 35 | coverage 36 | *.lcov 37 | .nyc_output 38 | 39 | # VSCode 40 | .vscode 41 | 42 | # Intellij idea 43 | *.iml 44 | .idea 45 | 46 | # OSX 47 | .DS_Store 48 | .AppleDouble 49 | .LSOverride 50 | .AppleDB 51 | .AppleDesktop 52 | Network Trash Folder 53 | Temporary Items 54 | .apdisk 55 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## 1.1.0 (2022-08-02) 6 | 7 | 8 | ### Features 9 | 10 | * **auth:** make compossable for accessToken ([dee8fc9](https://github.com/xlanex6/nuxt-nhost/commit/dee8fc9eefd6ad0575bc47f7e845b26f01e06790)) 11 | * **graphql:** Basic DEMO ([0be9bc2](https://github.com/xlanex6/nuxt-nhost/commit/0be9bc266145f974ee08f022c6621027e0c54622)) 12 | * **README:** check TODO as done ([5b24604](https://github.com/xlanex6/nuxt-nhost/commit/5b246041893b6798b63e12f6e4543e3074eb5f8d)) 13 | * **readme:** Mark graphql as done ([b3e2893](https://github.com/xlanex6/nuxt-nhost/commit/b3e2893311f82b32c4388a1fe95c7169b3f0f018)) 14 | * **readme:** Roadmap + documentation ([f6a006d](https://github.com/xlanex6/nuxt-nhost/commit/f6a006d5547c988b7c7918902de2439041d7f0a4)) 15 | * **storage:** Add Storage demo ( dirty ) ([76992fd](https://github.com/xlanex6/nuxt-nhost/commit/76992fd63f3449ae6edcc5f315831d182a508404)) 16 | 17 | 18 | ### Bug Fixes 19 | 20 | * **auth:** token => refreshToken on server plugin ([3969734](https://github.com/xlanex6/nuxt-nhost/commit/396973437c0a48a01e7fe98e1c98edcbe90c8536)) 21 | * Better command for Beta release ([22d4512](https://github.com/xlanex6/nuxt-nhost/commit/22d45121af0fa5fa7cac8eb8e9127367963bdbe1)) 22 | * **clean:** debugger off ([103dc33](https://github.com/xlanex6/nuxt-nhost/commit/103dc335ce3ce003f946c65cabdca37c431e4f24)) 23 | * **readme:** Fixing typo ([65a6776](https://github.com/xlanex6/nuxt-nhost/commit/65a6776fde8b61fbb1d770356a7d284088cb1c6b)) 24 | * **refreshToken:** Change name of composable ([a95292e](https://github.com/xlanex6/nuxt-nhost/commit/a95292e7201e933ca301a001b916e04b67d7552d)) 25 | * **token:** Rename token to refreshToken ([59debcb](https://github.com/xlanex6/nuxt-nhost/commit/59debcbd45fcee7734678c76059b1949860d2c1b)) 26 | * typo on readme ([1443f5a](https://github.com/xlanex6/nuxt-nhost/commit/1443f5ac09abdad80dde00f7f4bdb97e89a491fa)) 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Alex Duval 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NUXT / NHOST 2 | 3 | > [NHOST](https://nhost.io/) module for [NUXT](https://v3.nuxtjs.org/) 4 | 5 | **DO NOT USE IN PRODUCTION - WIP** 6 | 7 | 8 | ## ROADMAP 9 | 10 | - [x] init module 11 | - [x] basic setup / config 12 | - [x] make composables for client 13 | - [x] make composables for User / token 14 | - [x] add middelware with cookie, refresh token 15 | - [x] add middelware in demo to protect route if not login 16 | - [x] Auth feature READY 17 | - [x] Auth refacto ( accessToken != refeshToken) 18 | - [ ] Composables useAccessToken if needed in server side ( JWT / role ) 19 | - [ ] make composables for GRAPHQL request ? 20 | - [x] GRAPHQL feature + demo 21 | - [ ] make composables for storage ? 22 | - [ ] make composables for fonctions ??? Nuxt + serverless on the edge. 23 | - [ ] Basic design for demo / playground 24 | - [ ] publish demo on Netlify 25 | - [ ] Basic test with vitest 26 | - [ ] Add doc, base on DOCUS 27 | - [ ] Publish on npm 28 | - [ ] PR on Nuxt Modules 29 | 30 | 31 | 32 | ## Nuxt 2 33 | 34 | If you are looking for a solution with Nuxt 2, checkout https://github.com/nhost/nuxt 35 | 36 | 37 | ## Development 38 | 39 | 1. Clone this repository 40 | 2. Install dependencies using `yarn install` or `npm install` 41 | 3. Run `npm run dev:prepare` to generate type stubs. 42 | 4. Use `npm run dev` to start [playground](./playground) in development mode. 43 | 44 | ## License 45 | 46 | [MIT License](./LICENSE) 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-nhost", 3 | "version": "1.1.0", 4 | "license": "MIT", 5 | "type": "module", 6 | "repository": "xlanex6/nuxt-nhost", 7 | "contributors": [ 8 | { 9 | "name": "Alex Duval " 10 | } 11 | ], 12 | "exports": { 13 | ".": { 14 | "import": "./dist/module.mjs", 15 | "require": "./dist/module.cjs" 16 | } 17 | }, 18 | "main": "./dist/module.cjs", 19 | "types": "./dist/types.d.ts", 20 | "files": [ 21 | "dist" 22 | ], 23 | "scripts": { 24 | "prepack": "nuxt-module-build", 25 | "dev": "nuxi dev playground", 26 | "lint": "eslint --ext .js,.ts,.vue .", 27 | "dev:build": "nuxi build playground", 28 | "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground", 29 | "release": "nuxt-module-build && standard-version && git push --follow-tags && npm publish --tag beta" 30 | }, 31 | "dependencies": { 32 | "@nhost/nhost-js": "1.1.6", 33 | "@nuxt/kit": "3.0.0-rc.2", 34 | "defu": "6.0.0", 35 | "graphql": "16.4.0" 36 | }, 37 | "devDependencies": { 38 | "@nuxt/module-builder": "latest", 39 | "@nuxtjs/eslint-config-typescript": "latest", 40 | "eslint": "latest", 41 | "nuxt": "^3.0.0-rc.2", 42 | "standard-version": "^9.3.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /playground/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | 3 | node_modules 4 | *.log 5 | .nuxt 6 | nuxt.d.ts 7 | .output 8 | .env 9 | .history 10 | -------------------------------------------------------------------------------- /playground/app.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /playground/middleware/auth.js: -------------------------------------------------------------------------------- 1 | export default defineNuxtRouteMiddleware(() => { 2 | const user = useNhostUser() 3 | 4 | if (!user.value) { 5 | return navigateTo('/') 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtConfig } from 'nuxt' 2 | import nhostModule from '../src/module' 3 | 4 | export default defineNuxtConfig({ 5 | modules: [ 6 | nhostModule 7 | ], 8 | nhost: { 9 | backendUrl: 'https://idysbigbtjjtorsxqtxh.nhost.run', 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "nuxt-nhost", 4 | "engines": { 5 | "node": ">=v16.14.2" 6 | }, 7 | "scripts": { 8 | "dev": "nuxi dev", 9 | "build": "nuxi build", 10 | "start": "node .output/server/index.mjs", 11 | "lint": "eslint --ext .ts,.js,.vue ." 12 | }, 13 | "devDependencies": { 14 | "nuxt": "^3.0.0-rc.2", 15 | "typescript": "^4.6.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /playground/pages/graphql.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /playground/pages/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | -------------------------------------------------------------------------------- /playground/pages/private.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | -------------------------------------------------------------------------------- /playground/pages/storage.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 56 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { fileURLToPath } from 'url' 3 | import { defu } from 'defu' 4 | import { defineNuxtModule, addPlugin, addServerMiddleware } from '@nuxt/kit' 5 | 6 | 7 | 8 | export interface ModuleOptions { 9 | backendUrl: string 10 | cookies?: object 11 | } 12 | 13 | export default defineNuxtModule({ 14 | meta: { 15 | name: 'nuxt-nhost', 16 | configKey: 'nhost', 17 | compatibility: { 18 | nuxt: '^3.0.0' 19 | } 20 | }, 21 | defaults: { 22 | backendUrl: '', 23 | cookies: { 24 | name: 'nhost', 25 | lifetime: 60 * 60 * 8, 26 | domain: '', 27 | path: '/', 28 | sameSite: 'lax' 29 | } 30 | }, 31 | 32 | setup(options, nuxt) { 33 | 34 | // Default runtimeConfig 35 | nuxt.options.runtimeConfig.public.nhost = defu(nuxt.options.runtimeConfig.public.nhost, { 36 | backendUrl: options.backendUrl, 37 | cookies: options.cookies 38 | }) 39 | 40 | // Transpile runtime 41 | const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url)) 42 | nuxt.options.build.transpile.push(runtimeDir) 43 | 44 | addPlugin(resolve(runtimeDir, 'plugins', 'nhost.client')) 45 | addPlugin(resolve(runtimeDir, 'plugins', 'nhost.server')) 46 | 47 | // Add nhost composables 48 | nuxt.hook('autoImports:dirs', (dirs) => { 49 | dirs.push(resolve(runtimeDir, 'composables')) 50 | }) 51 | 52 | addServerMiddleware({ 53 | route: '/api/_nhost/session', 54 | handler: resolve(runtimeDir, 'server/api/session') 55 | }) 56 | 57 | // // Optimize cross-fetch 58 | // extendViteConfig((config) => { 59 | // config.optimizeDeps = config.optimizeDeps || {} 60 | // config.optimizeDeps.include = config.optimizeDeps.include || [] 61 | // config.optimizeDeps.include.push('cross-fetch') 62 | // }) 63 | 64 | // // Optimize websocket only at dev time 65 | // if (nuxt.options.dev) { 66 | // extendViteConfig((config) => { 67 | // config.optimizeDeps.include.push('websocket') 68 | // }) 69 | // } 70 | } 71 | }) 72 | -------------------------------------------------------------------------------- /src/runtime/composables/useAccessToken.ts: -------------------------------------------------------------------------------- 1 | import { useNhostClient } from './useNhostClient' 2 | export const useAccessToken = () => { 3 | const { auth } = useNhostClient() 4 | // TS should be good, useState 5 | return auth.getAccessToken() 6 | } 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/runtime/composables/useNhostClient.ts: -------------------------------------------------------------------------------- 1 | import { NhostClient } from '@nhost/nhost-js'; 2 | import { useRuntimeConfig, useNuxtApp } from '#app' 3 | 4 | export const useNhostClient = (): NhostClient => { 5 | const nuxtApp = useNuxtApp() 6 | 7 | const { nhost: { backendUrl } } = useRuntimeConfig().public 8 | 9 | if (!nuxtApp._nhostClient) { 10 | nuxtApp._nhostClient = new NhostClient({ 11 | backendUrl: backendUrl 12 | }) 13 | 14 | // if (nuxtApp.ssrContext) { 15 | // nuxtApp._nhostClient.auth.setAuth(token.value) 16 | // } 17 | 18 | } 19 | 20 | return nuxtApp._nhostClient 21 | } 22 | -------------------------------------------------------------------------------- /src/runtime/composables/useNhostUser.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue' 2 | import { User } from '../types' 3 | import { useState } from '#app' 4 | 5 | export const useNhostUser = (): Ref => useState('nhost_user') 6 | -------------------------------------------------------------------------------- /src/runtime/composables/useRefreshToken.ts: -------------------------------------------------------------------------------- 1 | import { useCookie, useRuntimeConfig } from '#app' 2 | 3 | export const useRefreshToken = () => { 4 | const { nhost: { cookies: cookieOptions } } = useRuntimeConfig().public 5 | // shoub be set as refresh token 6 | const cookieName = `${cookieOptions.name}-access-token` 7 | 8 | return useCookie(cookieName) 9 | } 10 | -------------------------------------------------------------------------------- /src/runtime/plugins/nhost.client.ts: -------------------------------------------------------------------------------- 1 | 2 | import { defineNuxtPlugin, NuxtApp } from '#app' 3 | import { useNhostClient } from '../composables/useNhostClient' 4 | import { useNhostUser } from '../composables/useNhostUser' 5 | import { useRefreshToken } from '../composables/useRefreshToken' 6 | 7 | export default defineNuxtPlugin(async (nuxtApp: NuxtApp) => { 8 | const user = useNhostUser() 9 | const client = useNhostClient() 10 | const refreshToken = useRefreshToken() 11 | 12 | // If user has not been set on server side (for instance in SPA), set it for client 13 | if (!user.value) { 14 | if (refreshToken.value) { 15 | await client.auth.refreshSession(refreshToken.value) 16 | const nhostUser = client.auth.getUser() 17 | user.value = nhostUser 18 | } 19 | } 20 | 21 | // Once Nuxt app is mounted 22 | nuxtApp.hooks.hook('app:mounted', () => { 23 | // Listen to Nhost auth changes 24 | client.auth.onAuthStateChanged(async (event, session) => { 25 | await setServerSession(event, session) 26 | const nhostUser = client.auth.getUser() 27 | user.value = nhostUser 28 | }) 29 | }) 30 | }) 31 | 32 | function setServerSession(event, session): Promise { 33 | return $fetch('/api/_nhost/session', { 34 | method: 'POST', 35 | body: { event, session } 36 | }) 37 | } 38 | -------------------------------------------------------------------------------- /src/runtime/plugins/nhost.server.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtPlugin, NuxtApp } from '#app' 2 | import { useNhostClient } from '../composables/useNhostClient' 3 | import { useNhostUser } from '../composables/useNhostUser' 4 | import { useRefreshToken } from '../composables/useRefreshToken' 5 | 6 | export default defineNuxtPlugin(async (nuxtApp: NuxtApp) => { 7 | const user = useNhostUser() 8 | const client = useNhostClient() 9 | const refreshToken = useRefreshToken() 10 | 11 | if (!refreshToken.value) { 12 | return 13 | } 14 | 15 | const { session, error } = await client.auth.refreshSession(refreshToken.value) 16 | user.value = error ? null : client.auth.getUser() 17 | }) 18 | -------------------------------------------------------------------------------- /src/runtime/server/api/session.ts: -------------------------------------------------------------------------------- 1 | import { useBody, setCookie, assertMethod, defineEventHandler } from 'h3' 2 | import { useRuntimeConfig } from '#imports' 3 | 4 | const config = useRuntimeConfig().public 5 | 6 | export default defineEventHandler(async (event) => { 7 | assertMethod(event, 'POST') 8 | const body = await useBody(event) 9 | const cookieOptions = config.nhost.cookies 10 | 11 | const { event: signEvent, session } = body 12 | 13 | if (!event) { throw new Error('Auth event missing!') } 14 | 15 | if (signEvent === 'SIGNED_IN') { 16 | if (!session) { throw new Error('Auth session missing!') } 17 | setCookie( 18 | event, 19 | `${cookieOptions.name}-access-token`, 20 | session.refreshToken, 21 | { 22 | domain: cookieOptions.domain, 23 | maxAge: cookieOptions.lifetime ?? 0, 24 | path: cookieOptions.path, 25 | sameSite: cookieOptions.sameSite 26 | } 27 | ) 28 | } 29 | 30 | if (signEvent === 'SIGNED_OUT') { 31 | setCookie( 32 | event, 33 | `${cookieOptions.name}-access-token`, 34 | '', 35 | { 36 | maxAge: -1, 37 | path: cookieOptions.path 38 | } 39 | ) 40 | } 41 | 42 | return 'auth cookie set' 43 | }) 44 | -------------------------------------------------------------------------------- /src/runtime/types/index.d.ts: -------------------------------------------------------------------------------- 1 | export type NhosAuthProvider = 2 | | 'github' 3 | | 'facebook' 4 | | 'google' 5 | | 'spotify' 6 | 7 | 8 | export type User = { 9 | id: string 10 | createdAt: string 11 | displayName: string 12 | avatarUrl: string 13 | locale: string 14 | email?: string 15 | isAnonymous: boolean 16 | defaultRole: string 17 | roles: string[] 18 | metadata: Record 19 | emailVerified: boolean 20 | phoneNumber: string | null 21 | phoneNumberVerified: boolean 22 | activeMfaType: 'totp' | null 23 | } 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "skipLibCheck": true, 8 | "strict": false, 9 | "allowJs": true, 10 | "noEmit": true, 11 | "resolveJsonModule": true, 12 | "allowSyntheticDefaultImports": true, 13 | "types": [ 14 | "node", 15 | "@nuxt/kit" 16 | ], 17 | "paths": { 18 | "#app": [ 19 | "./node_modules/nuxt/dist/app" 20 | ] 21 | } 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------