Supabase Authentication Example - frontend scripts version
One script reply has been approved by the moderators Verified

Example app (with frontend scripts) of how to use Supabase Authentication to query RLS enabled data.

You can read more about this example here.


Update the Login script with your Supabase instance URL and public anon key.

Created by adam186 399 days ago
Static preview only: No backend 
This is a static preview of the app and there is no backend. As such, the interactivity requiring script execution is non functional. To see the fully functional app, edit/run it in Windmil by clicking the button above.

Scripts used

state.supabase = {
	// You'll need to insert the URL and the public API key of your Supabase project here
	url: '',
	publicKey: '',
	client: state?.supabase?.client ?? undefined,
	error: undefined

const sb = await import('https://esm.sh/@supabase/supabase-js@2.10.0');
const client = sb.createClient(state.supabase.url, state.supabase.publicKey);
const { data, error, error_description } = await client.auth.signInWithPassword({
  // In frontend scripts you can directly reference components by their IDs
  email: b.result,
  password: c.result
if (data?.session?.access_token) {
  state.supabase.client = sb.createClient(state.supabase.url, state.supabase.publicKey, {
    global: { headers: { Authorization: `bearer ${data.session.access_token}` } }
} else {
  state.supabase.client = undefined;
  state.supabase.error = error_description ?? error?.message ?? error ?? undefined;