https://github.com/nuxtclub/supabase
An easy way to integrate Supabase with NuxtJS
https://github.com/nuxtclub/supabase
nuxt nuxt-module nuxt-modules nuxt3 nuxtjs supabase supabase-js
Last synced: 8 months ago
JSON representation
An easy way to integrate Supabase with NuxtJS
- Host: GitHub
- URL: https://github.com/nuxtclub/supabase
- Owner: nuxtclub
- License: mit
- Created: 2021-03-30T21:26:27.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-15T15:05:40.000Z (over 4 years ago)
- Last Synced: 2025-01-31T15:53:57.591Z (over 1 year ago)
- Topics: nuxt, nuxt-module, nuxt-modules, nuxt3, nuxtjs, supabase, supabase-js
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 38
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @nuxtclub/supabase
## Setup
1. Add `@nuxtclub/supabase` dependency to your project
```bash
npm i -D @nuxtclub/supabase
```
2. Add `@nuxtclub/supabase` to the `buildModules` section of `nuxt.config.js`
: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`.
```javascript
export default {
buildModules: [
[
'@nuxtclub/supabase',
{
/* module options */
},
],
],
}
```
## Using top level options
```javascript
export default {
buildModules: ['@nuxtclub/supabase'],
supabase: {
/* module options */
},
}
```
# Typescript support
Add the types to your `"types"` array in `tsconfig.json` after the `@nuxt/types` entry.
:warning: Use `@nuxt/vue-app` instead of `@nuxt/types` for nuxt < 2.9.
```json
{
"compilerOptions": {
"types": ["@nuxt/types", "@nuxtclub/supabase"]
}
}
```
## Configuration
To start using Supabase in your project you should place the URL and the public API KEY of your Supabase project.
You can find this data on the administration panel of your project > Settings > API.
Be sure to copy your **public key**, not your private key.
```javascript
export default {
supabase: {
url: 'YOUR_SUPABASE_URL',
key: 'YOUR_SUPABASE_KEY',
},
}
```
## Usage
This module will inject $supabase in the context of your application.
Using $supabase you can access to the SupabaseClient object of the [Supabase Client for JavaScript](https://supabase.io/docs/reference/javascript/supabase-client).
### Shortcuts
This module also inject $supaAuth & $supaStorage that are nothing more than a shorcut for $supabase.auth and $supabase.storage.
## Examples
### Fetching data
```vue
Recipes
-
{{ recipe.name }}
export default {
middleware: 'authenticated',
async asyncData({ $supabase }) {
const { data } = await $supabase.from('recipes').select('*')
return { recipes: data }
},
}
```
### Authentication:
Create a page to **sign in**:
```vue
Sign In
export default {
data() {
return {
email: '',
password: '',
}
},
methods: {
submit() {
this.$supabase.auth
.signIn({
email: this.email,
password: this.password,
})
.then(({ error, data }) => {
if (error) {
alert(error.message)
} else {
this.$router.push('/')
}
})
},
},
}
```
To make the **sign up** page copy the same code and change the `signIn` function by `signUp`.
Create a Middleware to protect your routes:
```javascript
// ~/middleware/authenticated.js
export default ({ $supabase, redirect }) => {
if (!$supabase.auth.session()) {
return redirect('/sign-in')
}
}
```
Protect the home page using previously created middleware.
```vue
You're authenticated!
Sign Out
export default {
middleware: 'authenticated',
methods: {
signOut() {
this.$supabase.auth.signOut().then(({ error }) => {
if (error) {
console.error(error)
} else {
this.$router.push('/sign-in')
}
})
},
},
}
```
Learn more about Supabase [here](https://supabase.io/docs/reference/javascript/supabase-client).