├── .gitignore
├── lib
    ├── plugin.js
    └── module.js
├── package.json
├── LICENSE
├── types
    └── index.d.ts
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/lib/plugin.js:
--------------------------------------------------------------------------------
 1 | import { createClient } from '@supabase/supabase-js'
 2 | 
 3 | export default function (_, inject) {
 4 | 	const client = createClient('<%= options.url %>', '<%= options.key %>')
 5 | 	inject('supabase', client)
 6 | 
 7 | 	const auth = client.auth
 8 | 	inject('supaAuth', auth)
 9 | 
10 | 	const storage = client.storage
11 | 	inject('supaStorage', storage)
12 | }
13 | 


--------------------------------------------------------------------------------
/lib/module.js:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | 
 3 | export default function (moduleOptions) {
 4 | 	const options = Object.assign({}, this.options.supabase, moduleOptions)
 5 | 
 6 | 	this.nuxt.options.build.transpile.push(
 7 | 		'@supabase/supabase-js',
 8 | 		'@supabase/gotrue-js',
 9 | 		'@supabase/postgrest-js',
10 | 		'@supabase/realtime-js',
11 | 		'@supabase/storage-js'
12 | 	)
13 | 
14 | 	this.addPlugin({
15 | 		src: path.resolve(__dirname, 'plugin.js'),
16 | 		options: {
17 | 			...options,
18 | 			options: options,
19 | 		},
20 | 	})
21 | }
22 | 
23 | module.exports.meta = require('../package.json')
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "@nuxtclub/supabase",
 3 | 	"author": "Lautaro Pereyra <dev.lautaropereyra@gmail.com>",
 4 | 	"license": "MIT",
 5 | 	"description": "An easy way to integrate Supabase with NuxtJS",
 6 | 	"version": "1.2.1",
 7 | 	"keywords": [
 8 | 		"nuxt",
 9 | 		"supabase",
10 | 		"module"
11 | 	],
12 | 	"main": "lib/module.js",
13 | 	"files": [
14 | 		"lib",
15 | 		"types/*.d.ts"
16 | 	],
17 | 	"types": "types/index.d.ts",
18 | 	"repository": {
19 | 		"type": "git",
20 | 		"url": "https://github.com/nuxtclub/supabase.git"
21 | 	},
22 | 	"bugs": "https://github.com/nuxtclub/supabase/issues",
23 | 	"dependencies": {
24 | 		"@supabase/supabase-js": "^1.21.0"
25 | 	},
26 | 	"publishConfig": {
27 | 		"access": "public"
28 | 	}
29 | }
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Nuxt Club
 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 | 


--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { SupabaseClient } from '@supabase/supabase-js'
 2 | import { SupabaseAuthClient } from '@supabase/supabase-js/dist/main/lib/SupabaseAuthClient'
 3 | import { SupabaseStorageClient } from '@supabase/storage-js/dist/main/SupabaseStorageClient'
 4 | 
 5 | interface SupabaseConfig {
 6 | 	url: string
 7 | 	key: string
 8 | }
 9 | 
10 | declare module '@nuxt/types/config/index' {
11 | 	interface NuxtOptions {
12 | 		supabase: SupabaseConfig
13 | 	}
14 | }
15 | 
16 | declare module '@nuxt/vue-app' {
17 | 	interface Context {
18 | 		$supabase: SupabaseClient
19 | 		$supaAuth: SupabaseAuthClient
20 | 		$supaStorage: SupabaseStorageClient
21 | 	}
22 | }
23 | 
24 | declare module '#app' {
25 | 	interface NuxtApp {
26 | 		$supabase: SupabaseClient
27 | 		$supaAuth: SupabaseAuthClient
28 | 		$supaStorage: SupabaseStorageClient
29 | 	}
30 | }
31 | 
32 | declare module 'nuxt3' {
33 | 	interface NuxtApp {
34 | 		$supabase: SupabaseClient
35 | 		$supaAuth: SupabaseAuthClient
36 | 		$supaStorage: SupabaseStorageClient
37 | 	}
38 | }
39 | 
40 | declare module '@nuxt/types' {
41 | 	interface Context {
42 | 		$supabase: SupabaseClient
43 | 		$supaAuth: SupabaseAuthClient
44 | 		$supaStorage: SupabaseStorageClient
45 | 	}
46 | }
47 | 
48 | declare module 'vue/types/vue' {
49 | 	interface Vue {
50 | 		$supabase: SupabaseClient
51 | 		$supaAuth: SupabaseAuthClient
52 | 		$supaStorage: SupabaseStorageClient
53 | 	}
54 | }
55 | 
56 | declare module 'vuex/types/index' {
57 | 	interface Store<S> {
58 | 		$supabase: SupabaseClient
59 | 		$supaAuth: SupabaseAuthClient
60 | 		$supaStorage: SupabaseStorageClient
61 | 	}
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # @nuxtclub/supabase
  2 | 
  3 | ## Setup
  4 | 
  5 | 1. Add `@nuxtclub/supabase` dependency to your project
  6 | 
  7 | ```bash
  8 | npm i -D @nuxtclub/supabase
  9 | ```
 10 | 
 11 | 2. Add `@nuxtclub/supabase` to the `buildModules` section of `nuxt.config.js`
 12 | 
 13 | :warning: If you are using Nuxt **< v2.9** you have to install the module as a `dependency` (No `--dev` or `--save-dev` flags) and use `modules` section in `nuxt.config.js` instead of `buildModules`.
 14 | 
 15 | ```javascript
 16 | export default {
 17 | 	buildModules: [
 18 | 		[
 19 | 			'@nuxtclub/supabase',
 20 | 			{
 21 | 				/* module options */
 22 | 			},
 23 | 		],
 24 | 	],
 25 | }
 26 | ```
 27 | 
 28 | ## Using top level options
 29 | 
 30 | ```javascript
 31 | export default {
 32 | 	buildModules: ['@nuxtclub/supabase'],
 33 | 	supabase: {
 34 | 		/* module options */
 35 | 	},
 36 | }
 37 | ```
 38 | 
 39 | # Typescript support
 40 | 
 41 | Add the types to your `"types"` array in `tsconfig.json` after the `@nuxt/types` entry.
 42 | 
 43 | :warning: Use `@nuxt/vue-app` instead of `@nuxt/types` for nuxt < 2.9.
 44 | 
 45 | ```json
 46 | {
 47 | 	"compilerOptions": {
 48 | 		"types": ["@nuxt/types", "@nuxtclub/supabase"]
 49 | 	}
 50 | }
 51 | ```
 52 | 
 53 | ## Configuration
 54 | 
 55 | To start using Supabase in your project you should place the URL and the public API KEY of your Supabase project.
 56 | 
 57 | You can find this data on the administration panel of your project > Settings > API.
 58 | 
 59 | Be sure to copy your **public key**, not your private key.
 60 | 
 61 | ```javascript
 62 | export default {
 63 | 	supabase: {
 64 | 		url: 'YOUR_SUPABASE_URL',
 65 | 		key: 'YOUR_SUPABASE_KEY',
 66 | 	},
 67 | }
 68 | ```
 69 | 
 70 | ## Usage
 71 | 
 72 | This module will inject $supabase in the context of your application.
 73 | 
 74 | Using $supabase you can access to the SupabaseClient object of the [Supabase Client for JavaScript](https://supabase.io/docs/reference/javascript/supabase-client).
 75 | 
 76 | ### Shortcuts
 77 | 
 78 | This module also inject $supaAuth & $supaStorage that are nothing more than a shorcut for $supabase.auth and $supabase.storage.
 79 | 
 80 | ## Examples
 81 | 
 82 | ### Fetching data
 83 | 
 84 | ```vue
 85 | <template>
 86 | 	<div>
 87 | 		<h1>Recipes</h1>
 88 | 		<ul>
 89 | 			<li v-for="recipe in recipes" :key="recipe.id">
 90 | 				{{ recipe.name }}
 91 | 			</li>
 92 | 		</ul>
 93 | 	</div>
 94 | </template>
 95 | 
 96 | <script>
 97 | export default {
 98 | 	middleware: 'authenticated',
 99 | 	async asyncData({ $supabase }) {
100 | 		const { data } = await $supabase.from('recipes').select('*')
101 | 		return { recipes: data }
102 | 	},
103 | }
104 | </script>
105 | ```
106 | 
107 | ### Authentication:
108 | 
109 | Create a page to **sign in**:
110 | 
111 | ```vue
112 | <!-- ~/pages/sign-in -->
113 | <template>
114 | 	<form @submit.prevent="submit()">
115 | 		<input type="email" v-model="email" />
116 | 		<input type="password" v-model="password" />
117 | 		<button type="submit">Sign In</button>
118 | 	</form>
119 | </template>
120 | 
121 | <script>
122 | export default {
123 | 	data() {
124 | 		return {
125 | 			email: '',
126 | 			password: '',
127 | 		}
128 | 	},
129 | 	methods: {
130 | 		submit() {
131 | 			this.$supabase.auth
132 | 				.signIn({
133 | 					email: this.email,
134 | 					password: this.password,
135 | 				})
136 | 				.then(({ error, data }) => {
137 | 					if (error) {
138 | 						alert(error.message)
139 | 					} else {
140 | 						this.$router.push('/')
141 | 					}
142 | 				})
143 | 		},
144 | 	},
145 | }
146 | </script>
147 | ```
148 | 
149 | To make the **sign up** page copy the same code and change the `signIn` function by `signUp`.
150 | 
151 | Create a Middleware to protect your routes:
152 | 
153 | ```javascript
154 | // ~/middleware/authenticated.js
155 | export default ({ $supabase, redirect }) => {
156 | 	if (!$supabase.auth.session()) {
157 | 		return redirect('/sign-in')
158 | 	}
159 | }
160 | ```
161 | 
162 | Protect the home page using previously created middleware.
163 | 
164 | ```vue
165 | <!-- ~/pages/index.vue -->
166 | <template>
167 | 	<div>
168 | 		<h1>You're authenticated!</h1>
169 | 		<button @click="signOut()">Sign Out</button>
170 | 	</div>
171 | </template>
172 | 
173 | <script>
174 | export default {
175 | 	middleware: 'authenticated',
176 | 	methods: {
177 | 		signOut() {
178 | 			this.$supabase.auth.signOut().then(({ error }) => {
179 | 				if (error) {
180 | 					console.error(error)
181 | 				} else {
182 | 					this.$router.push('/sign-in')
183 | 				}
184 | 			})
185 | 		},
186 | 	},
187 | }
188 | </script>
189 | ```
190 | 
191 | Learn more about Supabase [here](https://supabase.io/docs/reference/javascript/supabase-client).
192 | 


--------------------------------------------------------------------------------