example.md

theme
./

Vue 3 + Supabase

The Open Source Firebase Alternative

Zernonia (@zernonia)

Let's go!

---

layout: cover

Zernonia

A simple Vue developer, but Supabase enthusiast!
Creator of Made With Supabase, and some community projects

@ zernonia

---

layout: center

Supabase

---

layout: center

Supabase

Supabase is an open source Firebase alternative.

It provides all the backend services you need to build a product.
You can use all the services, or just the services you require:

Database

Authentication

Storage

Function

---

Database

Supabase is built on top of Postgres, an extremely scalable Relational Database.

---

Database

Auto generated API endpoints (using PosgREST)

Read

const { data, error } = await supabase
  .from<Product>('products')
  .select('name')


  _

Create

const { data, error } = await supabase
  .from<Product>('products')
  .insert([
    { name: 'Cool Swag', tag: ['swag', 'black'] },
    { name: 'Stickers', tag: ['swag', 'sticker'] },
  ])

Update

const { data, error } = await supabase
  .from<Product>('products')
  .update({ name: 'New Swag' })
  .match({ name: 'Cool Swag' })

Delete

const { data, error } = await supabase
  .from<Product>('products')
  .delete()
  .match({ name: 'Cool Swag' })

---

layout: center

---

Even more powerful...

Create postgres function:

create or replace function get_tags (tag text)  -- params: tag
returns setof product
language plpgsql
as $$
begin
  return query 
    select * from product where tag % any(categories);
end; $$ 

Invoke postgres function using Supabase

const { data, error, count } = await supabase
  .rpc(
    "get_tags",
    { tag: 'swag' }  // pass data into parameter
  )

---

Also, Realtime Subscription

Subscribe to realtime changes in your database.

const mySubscription = supabase
  .from('products')
  .on('UPDATE', payload => {
    console.log('Change received!', payload)
    // do something
  })
  .subscribe()

---

Authentication

Supabase makes it simple to manage your users.
Add user sign ups and logins, securing your data
with Row Level Security.

---

Sign Up/Sign In

using Email

const { user, session, error } = await supabase.auth.signUp({
  email: '[email protected]',
  password: 'example-password',
})

const { user, session, error } = await supabase.auth.signIn({
  email: '[email protected]',
  password: 'example-password',
})

using Social login

async function signInWithGoogle() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'google'  // 'github', 'apple', 'twilio', etc...
  });
}

---

layout: image image: /images/auth.png

---

layout: center

---

layout: center

---

Security Rules

Supabase utilize Postgres' super granular Row Level Security,
where user can create policy on each table that restrict the CRUD operations.

-- 1. Enable RLS
alter table profiles
  enable row level security;

-- 2. Create Policy
create policy "Public profiles are viewable by everyone."
  on profiles for select using (
    true
  );

-- 3. Create Policy
create policy "Users can update their own profiles."
  on profiles for update using (
    auth.uid() = id  
    -- `auth.uid()`, `auth.role()`, `auth.email()` are predefined helper functions
  );

---

Storage

Supabase Storage makes it simple to store
and serve large files. Any media,
including videos and images.

---

Storage

Bucket based storage. You can create distinct buckets for different Security and Access Rules.

For example, you might keep all public files in a "public" bucket, and other files that require logged-in access in a "restricted" bucket.

const imageFile = event.target.files[0]
const { data, error } = await supabase
  .storage
  .from('products')
  .upload('public/swag.png', imageFile)

const imageFile = event.target.files[0]
const { data, error } = await supabase
  .storage
  .from('products')
  .upload('secret/swag/shhhh.png', imageFile)

coming soon

CDN

Transformation

---

Function

Write custom code and even cron jobs without
deploying or scaling servers.

coming soon

---

layout: center

Let's see some

Vue 3 + Supabase in action!

supabase-realtime-playground.vercel.app

---

Fetch button's count

src/components/PlayButton.vue

const fetchData = async () => {
  const { data } = await supabase.from("realtime_playbutton").select("*")
}

Listen to Realtime

src/components/PlayButton.vue

const listen = () =>
  supabase
    .from("realtime_playbutton")
    .on("UPDATE", (payload) => {
      const { count, name } = payload.new
      // do something 
    })
    .subscribe()

---

Login with Twitter

src/components/ModalLogin.vue

const loginTwitter = async () => {
  const { user, session, error } = await supabase.auth.signIn({
    provider: "twitter",
  })
}

src/App.vue

supabase.auth.onAuthStateChange(async (ev, session) => {
  if (ev == "SIGNED_IN") {
    // do stuff when user sign in, or session is not expired
  }
})

---

layout: center

It's just that simple!

---

layout: center

So... what's so different about Supabase?

It's the..

---

It's the fun!

---

It's the swag!

---

It's the meme!

---

It's the people!

---

layout: center

---

layout: center

Check out

www.madewithsupabase.com

Built with Nuxt 3 + Supabase 😉