Supabase

This guide shows how to integrate Hexclave with Supabase row level security (RLS).

This guide only focuses on the RLS/JWT integration and does not sync user data between Supabase and Stack. You should use webhooks to achieve data sync.

Setup

Let’s create a sample table and some RLS policies to demonstrate how to integrate Hexclave with Supabase RLS. You can apply the same logic to your own tables and policies.

Setup Supabase

First, let’s create a Supabase project, then go to the SQL Editor and create a new table with some sample data and RLS policies.

Supabase SQL Editor

-- Create the 'data' table
CREATE TABLE data (
  id bigint PRIMARY KEY,
  text text NOT NULL,
  user_id UUID
);

-- Insert sample data
INSERT INTO data (id, text, user_id) VALUES
  (1, 'Everyone can see this', NULL),
  (2, 'Only authenticated users can see this', NULL),
  (3, 'Only user with specific id can see this', NULL);

-- Enable Row Level Security
ALTER TABLE data ENABLE ROW LEVEL SECURITY;

-- Allow everyone to read the first row
CREATE POLICY "Public read" ON "public"."data" TO public
USING (id = 1);

-- Allow authenticated users to read the second row
CREATE POLICY "Authenticated access" ON "public"."data" TO authenticated
USING (id = 2);

-- Allow only the owner of the row to read it
CREATE POLICY "User access" ON "public"."data" TO authenticated
USING (id = 3 AND auth.uid() = user_id);

Setup a new Next.js project

Now let’s create a new Next.js project and install Hexclave and Supabase client. (more details on Next.js setup, Hexclave setup, and Supabase setup)

Terminal

npx create-next-app@latest -e with-supabase stack-supabase
cd stack-supabase

Then follow the Hexclave setup prompt. Choose Next.js and Supabase in the setup builder, then copy the generated prompt into your coding agent.Now copy the environment variables from the Supabase dashboard to the .env.local file:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_JWT_SECRET

Copy environment variables from the Hexclave dashboard to the .env.local file.

NEXT_PUBLIC_HEXCLAVE_PROJECT_ID
NEXT_PUBLIC_HEXCLAVE_PUBLISHABLE_CLIENT_KEY
HEXCLAVE_SECRET_SERVER_KEY

Set up Supabase client

Now let’s create a server action that mints a supabase JWT with the Hexclave user ID if the user is authenticated.

/utils/actions.ts

'use server';

import { hexclaveServerApp } from "@/hexclave/server";
import * as jose from "jose";

export const getSupabaseJwt = async () => {
  const user = await hexclaveServerApp.getUser();

  if (!user) {
    return null;
  }

  const token = await new jose.SignJWT({
    sub: user.id,
    role: "authenticated",
  })
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setExpirationTime('1h')
    .sign(new TextEncoder().encode(process.env.SUPABASE_JWT_SECRET));

  return token;
};

And now create a helper function to create a Supabase client with the JWT signed by the server action

/utils/supabase-client.ts

import { createBrowserClient } from "@supabase/ssr";
import { getSupabaseJwt } from "./actions";

export const createSupabaseClient = () => {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    { accessToken: async () => await getSupabaseJwt() || "" }
  );
}

Fetch data from Supabase

Let’s create an example page that fetches data from Supabase and displays it.

/app/page.tsx

'use client';

import { createSupabaseClient } from "@/utils/supabase-client";
import { useHexclaveApp, useUser } from "@hexclave/next";
import { useEffect, useState } from "react";

export default function Page() {
  const app = useHexclaveApp();
  const user = useUser();
  const supabase = createSupabaseClient();
  const [data, setData] = useState<null | any[]>(null);

  useEffect(() => {
    supabase.from("data").select().then(({ data }) => setData(data ?? []));
  }, []);

  const listContent = data === null ?
    <p>Loading...</p> :
    data.length === 0 ?
      <p>No notes found</p> :
      data.map((note) => <li key={note.id}>{note.text}</li>);

  return (
    <div>
      {
        user ?
        <>
          <p>You are signed in</p>
          <p>User ID: {user.id}</p>
            <button onClick={async () => await app.redirectToSignOut()}>Sign Out</button>
        </> :
          <button onClick={async () => await app.redirectToSignIn()}>Sign In</button>
      }
      <h3>Supabase data</h3>
      <ul>{listContent}</ul>
    </div>
  )
}

Now you should be able to compare the data you can view with an anonymous user, an authenticated user. You can also add your user Id to the row 3 of the Supabase table, and you should be able to see the row if and only if you are signed in with that user.

You can find the full example here on GitHub.

Getting Started

Going Further

Apps

Integrations

Other

Setup

​Setup

Setup