Rork × Supabase Auth & Realtime Guide

When building apps with Rork, setting up the backend is often one of the biggest challenges. By pairing Rork with Supabase, you can implement authentication, database management, and real-time communication with minimal code. This guide walks you through the Rork-Supabase integration from the ground up.

Why Rork × Supabase?

Rork is an AI-powered app development platform that quickly generates UI and application logic. Supabase, meanwhile, is a rapidly growing open-source Backend as a Service (BaaS) — often described as a Firebase alternative — offering a PostgreSQL database, authentication, real-time subscriptions, and storage.

Combining the two creates an efficient development setup: Rork's AI handles the frontend, while Supabase takes care of everything on the backend.

Setting Up Your Supabase Project

Account Creation and Project Initialization

Start by creating a project on the Supabase website.

# Initialize a project with Supabase CLI
npx supabase init
 
# Start the local development environment
npx supabase start
 
# Output example:
# API URL: http://localhost:54321
# anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Creating Database Tables

Create tables to manage user profiles and messages.

-- User profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users(id) PRIMARY KEY,
  username TEXT UNIQUE NOT NULL,
  avatar_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
 
-- Messages table (for real-time chat)
CREATE TABLE messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES profiles(id) NOT NULL,
  content TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
 
-- Enable Row Level Security (RLS)
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;
 
-- Policy: Everyone can view profiles
CREATE POLICY "Profiles are viewable by everyone"
  ON profiles FOR SELECT USING (true);
 
-- Policy: Users can only update their own profile
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);
 
-- Policy: Authenticated users can post messages
CREATE POLICY "Authenticated users can insert messages"
  ON messages FOR INSERT
  WITH CHECK (auth.uid() = user_id);
 
-- Policy: Everyone can view messages
CREATE POLICY "Messages are viewable by everyone"
  ON messages FOR SELECT USING (true);

Implementing Supabase Integration in Rork

Initializing the Supabase Client

Set up the Supabase client in your Rork project.

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js';
 
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseAnonKey = 'your-anon-key';
 
export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Implementing Authentication

Implement email and password authentication.

// Sign up
async function signUp(email: string, password: string, username: string) {
  // 1. Create user with Supabase Auth
  const { data: authData, error: authError } = await supabase.auth.signUp({
    email,
    password,
  });
 
  if (authError) throw authError;
 
  // 2. Create a profile record
  const { error: profileError } = await supabase
    .from('profiles')
    .insert({
      id: authData.user?.id,
      username,
    });
 
  if (profileError) throw profileError;
 
  return authData;
}
 
// Sign in
async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
 
  if (error) throw error;
  return data;
}
 
// Sign out
async function signOut() {
  const { error } = await supabase.auth.signOut();
  if (error) throw error;
}
 
// Usage:
// await signUp('user@example.com', 'password123', 'testuser');
// → Creates user + profile in one flow

Implementing Real-Time Features

Use Supabase's real-time capabilities to build a chat feature where messages appear instantly for all users.

// Subscribe to real-time messages
function subscribeToMessages(onNewMessage: (message: any) => void) {
  const channel = supabase
    .channel('messages')
    .on(
      'postgres_changes',
      {
        event: 'INSERT',
        schema: 'public',
        table: 'messages',
      },
      (payload) => {
        onNewMessage(payload.new);
      }
    )
    .subscribe();
 
  // Return cleanup function
  return () => {
    supabase.removeChannel(channel);
  };
}
 
// Send a message
async function sendMessage(content: string) {
  const user = (await supabase.auth.getUser()).data.user;
  if (!user) throw new Error('Not authenticated');
 
  const { error } = await supabase
    .from('messages')
    .insert({
      user_id: user.id,
      content,
    });
 
  if (error) throw error;
}
 
// Usage:
// const unsubscribe = subscribeToMessages((msg) => {
//   console.log('New message:', msg.content);
// });
// await sendMessage('Hello from Rork!');
// → Delivered to all subscribers in real time

Wrapping Up

By combining Rork with Supabase, you can efficiently build full-stack apps — from AI-generated frontend UI to backend authentication, database management, and real-time communication. Properly configuring RLS is the key to building secure applications.

Start with a simple app that has authentication, then gradually add real-time features and Edge Functions as your project grows.

Rork × Supabase Auth & Realtime Guide — Building a Backend Without Code