@supabase/ssr client and database types

[RowinVanAmsterdam]

In my project I would like to have type-safety. So I followed the documentation to generate types with the supabase CLI, but there is one major difference. Since it's a NextJS project, I use createServerClient for SSR and createBrowserClient for client side.

The example in the documentation looks like this:

import { createClient } from '@supabase/supabase-js'
import { Database } from './database.types'

const supabase = createClient<Database>(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)

So my first idea in order to do something simular, would be:
client.ts
return createBrowserClient<Database>(

full code:

import { createBrowserClient } from '@supabase/ssr'

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

and for the server:
server.ts
return createServerClient<Database>(process.env.NEXT_PUBLIC_SUPABASE_URL!,

full code:

import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export function createClient() {
    const cookieStore = cookies();

    return createServerClient<Database>(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
        cookies: {
            getAll() {
                return cookieStore.getAll();
            },
            setAll(cookiesToSet) {
                try {
                    cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
                } catch {
                    // The `setAll` method was called from a Server Component.
                    // This can be ignored if you have middleware refreshing
                    // user sessions.
                }
            }
        }
    });
}

But I read on Reddit this might be a big safety risk, the comment says:
"Note that because you are using this in the browser (ie: using createBrowserClient instead of createClient (for server side)), you are exposing your entire database schema publicly. This is a security risk. You should edit your types file to only include schema you don't mind being public."

But I can not really find anything else about it in the official documentation. So I'm wondering what would be way to implement type-safety while using NextJS with SSR and client rendering?

[sakanate]

I'm currently facing the same issue. When using createClient from @supabase/supabase-js, the Database schema is correctly recognized. However, when using the SSR-specific library, even if I specify the Database schema, all types are inferred as any.

Here’s a my implementation for reference:

import { createClient as createSupabaseJsClient } from '@supabase/supabase-js';
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';
import { Database } from '../../types';
import { getSupabaseAnonKey, getSupabaseServiceRoleSecret } from './utils';

export async function createClient() {
  const [url, anonKey] = getSupabaseAnonKey();
  const cookieStore = await cookies();

  // This client doesn't recognize type.
  return createServerClient<Database>(url, anonKey, 
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  );
}

export async function createServiceRoleClient() {
  const [url, serviceRoleSecret] = getSupabaseServiceRoleSecret();

  // But this client works!
  return createSupabaseJsClient<Database>(url, serviceRoleSecret, {
    auth: {
      persistSession: false,
      autoRefreshToken: false,
      detectSessionInUrl: false,
    },
  });
}

I would expect the Database schema to be recognized on the server side even when using the SSR version of createClient. Is there a specific reason why it's not supported in either case?

[dabisrat]

Any updates on this? I have a similar issue, but I'm not sure if it is the lib, or something I'm doing wrong. the only way I can get types working is by casting it.

import { createServerClient } from "@supabase/ssr";
import {
  createClient as createSupabaseClient,
  type SupabaseClient,
} from "@supabase/supabase-js";
import { cookies } from "next/headers";
import type { Database } from "./utils/database.types";

export async function createClient() {
  const cookieStore = await cookies();
  return createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            );
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  ) as unknown as SupabaseClient<Database>;
}

[LHDi]

I just reinstalled @supabase/supabase-js and it worked.

[avallete]

Hey there !

This seems related to what happened here: supabase/supabase-js#1542

TL;DR:
Recommended solution is to upgrade both ssr and supabase-js to their latest version:

• upgrade @supabase/ssr to >0.7.0
• upgrade @supabase/supabase-js to >2.75.0