Trying to connect Fly to an existing Supabase instance

Hello,

I have created a new Fly Project today and I wanted to connect to an Existing Supabase Instance I have used while I was working on my Next JS App. First off all I used fly launch to create a new Project and then the following two Commands:

  • fly secrets set NEXT_PUBLIC_SUPABASE_URL=
  • fly secrets set NEXT_PUBLIC_SUPABASE_ANON_KEY=

The Values I got from my Supabase Instance. When I now try to deploy this, I am getting the following Error:
38.15 Error: @supabase/ssr: Your project’s URL and API key are required to create a Supabase client!
38.15
38.15 Check your Supabase project’s API settings to find these values

What am I missing to deploy the App sucessfully? I don’t want to create a new Supabase Instance if not needed.

Thanks
Simagdo

Fly secrets are available at runtime, not build time.

I’ve never been a fan of the firebase/supabase pattern of direct DB access in the front end.
See: 900 Sites, 125M accounts, 1 Vulnerability | Hacker News

Having said that, this ESPECIALLY doesn’t make sense to do in Nextjs, as the main feature is RSC.
In supabase’s docs:

app/notes/page.tsx

  import { createClient } from '@/utils/supabase/server';

  export default async function Notes() {
    const supabase = createClient();
    const { data: notes } = await supabase.from("notes").select();

    return <pre>{JSON.stringify(notes, null, 2)}</pre>
  }

utils/supabase/server.ts

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

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

    return createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      { ... }
    )
  }

This server component never renders on the client and yet they use the NEXT_PUBLIC_, which potentially can be exposed in the browser… :clown_face:

That’s what I’m already using for the utils/supabase/server.ts and it’s working perfectly fine when I run the code locally.

What I’m trying to say is the Firebase/Supabase pattern of connecting to the DB directly from the front end is a bad idea.

So should I switch to a separate Backend where I connect to Supabase and I then use my Backend for that?

No, nextjs is a backend framework too. Don’t use NEXT_PUBLIC_ prefixed env variables. You can continue to use the @supabase library, but only access it in your server components.

Until now I only have one queries.ts File where I have all my Queries in.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.