Plainform

Plainform Dev initializes the Supabase client in the lib folder (e.g., lib/supabase/supabase.ts) using SUPABASE_URL and SUPABASE_ANON_KEY from your .env file, validated by t3-env.

Below are examples of how to use the client for common tasks like querying data, managing authentication, and handling file storage, which you can adapt based on your project’s requirements.

Setting up the Supabase Client

The Supabase client is pre-configured in lib/supabase.ts. Example:

@/lib/supabase/supabase.ts

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_KEY
);

Ensure the following environment variables are set in your .env file:

Env Variable	Type	Default
`DATABASE_URL`	`string`	`postgresql://user:password@host:port/dbname/postgres?pgbouncer=true`
`DIRECT_URL`	`string`	`postgresql://user:password@host:port/dbname/postgres`

Obtain these from your Supabase dashboard (Settings > API). The t3-env schema (in env.mjs) validates these variables to prevent runtime errors.

Use Cases

1. Querying Data

Fetch data from a table (e.g users) defined in your Supabase database:

@/lib/supabase/getUsers.ts

import { supabase } from '@/lib/supabase';

export async function getUsers() {
  const { data, error } = await supabase.from('users').select('*');
  if (error) throw new Error(error.message);
  return data;
}

Use in an API route (e.g. app/api/users/route.ts) or server component to display data.

2. Authentication (Optional)

If your project needs to use Supabase for authentication, sign in users:

@/lib/supabase/signIn.ts

import { supabase } from '@/lib/supabase';

export async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
  if (error) throw new Error(error.message);
  return data;
}

Call this in a form handler or API route (e.g. app/api/auth/signin/route.ts).

3. File Storage (Optional)

Upload files to a Supabase storage bucket (e.g. for user avatars):

@/lib/supabase/uploadAvatar.ts

import { supabase } from '@/lib/supabase';

export async function uploadAvatar(file: File, userId: string) {
  const { data, error } = await supabase.storage
    .from('avatars')
    .upload(`${userId}/${file.name}`, file);
  if (error) throw new Error(error.message);
  return data;
}

Create a bucket in the Supabase dashboard (Storage) and use this in a file upload component.

Customize Your Project

Extend Functionality: Add Supabase features like storage based on your needs. Update the supabase client in lib/supabase.ts with additional configurations.
Database Schema: Define tables in Supabase’s dashboard or SQL editor to match your app’s data model, ensuring compatibility with prisma/schema.prisma.

Important Notes

Environment Variables: Ensure SUPABASE_URL and SUPABASE_ANON_KEY are set in .env, or t3-env will block app startup.
Prisma Compatibility: Since Plainform uses Prisma for type-safe queries, ensure Supabase tables align with schema.prisma to avoid conflicts.
Security: Keep SUPABASE_ANON_KEY and SUPABASE_SERVICE_ROLE_KEY out of client-side code and version control.
Extensibility: Add Supabase features like real-time subscriptions or row-level security as your project grows, using the client in lib/supabase.ts.

For advanced features, consult the Supabase Documentation.

Setup & Configuration