Configuring Environment-Specific Redirect URLs in Next.js with Supabase Auth

I am developing a Next.js application with Supabase authentication. In my Supabase settings, the 'Site URL' is set to https://some-production-url.com for the production environment. However, for local development, I need the redirect URL to point to localhost:3000 instead. Currently, even during local development, the application redirects to the production URL. How can I configure different redirect URLs for the production and local environments?

Current Configuration:

Supabase 'Site URL' is set to https://some-production-url.com.
Authentication setup in my Next.js project:

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect(data.url)
  }

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect(data.url)
  }

Read full thread here due to limited characters:
https://stackoverflow.com/questions/77757052/configuring-environment-specific-redirect-urls-in-next-js-with-supabase-auth

Stack Overflow

Configuring Environment-Specific Redirect URLs in Next.js with Supa...

Configuring Environment-Specific Redirect URLs in Next.js with Supabase Auth

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect(data.url)
  }

async function signInWithSocialProvider(provider: any) {
    "use server"

    const origin = headers().get("origin")
    const cookieStore = cookies()
    const supabase = createClient(cookieStore)

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${origin}/auth/callback`,
      },
    })

    if (error) {
      console.error(error)
      return redirect("/login?message=Could not authenticate user")
    }

    redirect(data.url)
  }

Read full thread here due to limited characters:
https://stackoverflow.com/questions/77757052/configuring-environment-specific-redirect-urls-in-next-js-with-supabase-auth

Stack Overflow

Configuring Environment-Specific Redirect URLs in Next.js with Supa...

Configuring Environment-Specific Redirect URLs in Next.js with Supabase Auth

Configuring Environment-Specific Redirect URLs in Next.js with Supabase Auth

Similar Threads

Similar Threads

Similar Threads