Installation

If you are starting from an example project - all types, utilities, and modules are installed by default. Therefore, you can continue reviewing individual modules for more information about usage.

Database TypeScript types

If you are adding Supabase Modules to an existing project. Before installing any modules, you will need to generate the database's TypeScript types.

Make sure you work in a /modules directory from the root repository.

Using pnpm scripts

pnpm db:gen-types

Using Supabase CLI

supabase gen types typescript --local > modules/types/index.ts

Using degit

cd modules
degit webscopeio/supabase-modules/apps/next/modules/types types

Module utilities

If you are adding Supabase Modules to an existing project. Before installing any modules, you will need to add some database utils.

Make sure you work in a /modules directory from the root repository.

Using degit

cd modules
degit webscopeio/supabase-modules/apps/next/modules/utils utils

client.ts

"use client"

import { createBrowserClient } from "@supabase/ssr"
import type { SupabaseClient } from "@supabase/supabase-js"

import type { Database } from "../types"

export function createClient(): SupabaseClient<Database> {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  )
}

server.ts

import { cookies } from "next/headers"
import { createServerClient, type CookieOptions } from "@supabase/ssr"

import type { Database } from "../types"

export function createClient(): ReturnType<
  typeof createServerClient<Database>
> {
  const cookieStore = cookies()

  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            console.error(error)
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: "", ...options })
          } catch (error) {
            console.error(error)
          }
        },
      },
    }
  )
}

List of modules

Find all the modules you need for your Supabase project here. Quick to integrate, ready to use.

Modules	Dependencies
User	-