Not sure if data is being exposed to the client

Hello team, I have the following Supabase JS client which should not be exposed to the client.

// pages/api/supabase.ts
import type { SupabaseClient} from "@supabase/supabase-js";
import { createClient } from "@supabase/supabase-js";

const supabase: SupabaseClient = createClient(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_ANON_KEY!
)

export default supabase;

// pages/api/supabase.ts
import type { SupabaseClient} from "@supabase/supabase-js";
import { createClient } from "@supabase/supabase-js";

const supabase: SupabaseClient = createClient(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_ANON_KEY!
)

export default supabase;

I then import this into my server side rendered components like this:

import supabase from '../api/supabase';

export const getServerSideProps = async () => {
    const { data: customers, error } = await supabase.from('customer').select('*');
    if (error) throw new Error(error.message);
    return {
        props: {
            customers
        }
    }
}

const ServerRenderedComp = ({ customers }: { customers: any }) => {
  return (
    <>
      <p>Vendors!</p>
      <pre>{JSON.stringify(customers, null, 2)}</pre>
    </>
  )
}

export default ServerRenderedComp

import supabase from '../api/supabase';

export const getServerSideProps = async () => {
    const { data: customers, error } = await supabase.from('customer').select('*');
    if (error) throw new Error(error.message);
    return {
        props: {
            customers
        }
    }
}

const ServerRenderedComp = ({ customers }: { customers: any }) => {
  return (
    <>
      <p>Vendors!</p>
      <pre>{JSON.stringify(customers, null, 2)}</pre>
    </>
  )
}

export default ServerRenderedComp

I want to ensure that the Supabase client and more importantly the SUPABASE_URL and SUPABASE_ANON_KEY values aren't being exposed. Is this the safe way to do it?

1 Reply

Unknown User•2y ago

Message Not Public

Gaming

Programming

Not sure if data is being exposed to the client