@nuxtclub/supabase
Setup
- Add
@nuxtclub/supabasedependency to your project
npm i -D @nuxtclub/supabase- Add
@nuxtclub/supabaseto thebuildModulessection ofnuxt.config.js
dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.
export default {
buildModules: [
[
'@nuxtclub/supabase',
{
/* module options */
},
],
],
}Using top level options
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.
@nuxt/vue-app instead of @nuxt/types for nuxt < 2.9.
{
"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.
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.
Shortcuts
This module also inject $supaAuth & $supaStorage that are nothing more than a shorcut for $supabase.auth and $supabase.storage.
Examples
Fetching data
<template>
<div>
<h1>Recipes</h1>
<ul>
<li v-for="recipe in recipes" :key="recipe.id">
{{ recipe.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
middleware: 'authenticated',
async asyncData({ $supabase }) {
const { data } = await $supabase.from('recipes').select('*')
return { recipes: data }
},
}
</script>Authentication:
Create a page to sign in:
<!-- ~/pages/sign-in -->
<template>
<form @submit.prevent="submit()">
<input type="email" v-model="email" />
<input type="password" v-model="password" />
<button type="submit">Sign In</button>
</form>
</template>
<script>
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('/')
}
})
},
},
}
</script>To make the sign up page copy the same code and change the signIn function by signUp.
Create a Middleware to protect your routes:
// ~/middleware/authenticated.js
export default ({ $supabase, redirect }) => {
if (!$supabase.auth.session()) {
return redirect('/sign-in')
}
}Protect the home page using previously created middleware.
<!-- ~/pages/index.vue -->
<template>
<div>
<h1>You're authenticated!</h1>
<button @click="signOut()">Sign Out</button>
</div>
</template>
<script>
export default {
middleware: 'authenticated',
methods: {
signOut() {
this.$supabase.auth.signOut().then(({ error }) => {
if (error) {
console.error(error)
} else {
this.$router.push('/sign-in')
}
})
},
},
}
</script>Learn more about Supabase here.