Supabase - Row Level Security

Authentication vs Authorization

RLS

Row-level Security is PostgreSQL's (the database engine used by Supabase) method of auth for each row of a database table.

Access Policies

PostgreSQL's method of allowing access to each row in a database table.

Slides - Authentication vs Authorization

Key Takaways

• In Supabase: - Authentication happens first with the <anon> apiKey token. - Authorization happens second with the Authorization Bearer token.
• Even if RLS is Disabled, users still need an <anon> API key to read or make changes to a database table.

Enable Row Level Security

• The last thing we will do today is enable RLS policies for our tables.
• Find this in the Authentication Tab, in Policies, you can add RLS policies
• Once you do, you won’t be able to fetch anymore
• However if you add a new policy for read access to anyone, you’ll be again able to retrief data, but it’ll only be readable (before you could also push data)

Activity

• Enable RLS and Read for everyone policies to the movie rental tables (even just 1 or 2 will do for practice)
• Then recreate 2 of the queries from day 2 in postman

Read, Write, Update Policies

Connect Supabase to Nuxt

• Use the Nuxt Supabase Module
• Steps:
  • install the module as a dev dependency
  • add it to your nuxt config in the modules list
  • create a .env file (project root) = Add your SUPABASE_URL and your SUPABASE_KEY
• The Supabase Nuxt Module is really a wrapper for the supabase-js module
  • under the hood it uses the same syntax and logc
  • Review syntax here

Fetch Data from Supabase

• Demo Repo
  • review this source code for examples
• Sample request using the select statement

const client = useSupabaseClient();
const { data } = await useAsyncData("film", async () => {
  const { data } = client.from("film").select("title", "description");
  return data;
});

Activity (pair code): Render movie list

• Connect a nuxt install to your movie database using the Nuxt module instructions
• query a list of 10 movies from to a Nuxt API route
• pass the data to your app.vue file and render it with a v-for list