PROD and localhost url redirects (with @nuxtjs/supabase)

[nsina]

What's the best approach to handle both localhost and PROD environments when using OAuth? PROD currently redirects to localhost after authentication when following the supabase docs (https://supabase.com/docs/guides/auth/concepts/redirect-urls). In Supabase, the PROD url is set as Site URL, and Redirect URLs include the localhost url.

Using the @nuxtjs/supabase module, it requires a redirectTo url, and has to be the exact url for the callback page (either localhost or PROD urls).

[Rizzato95]

The unique workaround I found is to compose dynamically the redirect link like this:

index.vue

const user = useSupabaseUser()
const client = useSupabaseClient()

const redirectTo = `${useRuntimeConfig().public.baseUrl}/confirm`

const { data, error } = await client.auth.signInWithOAuth({
  provider: 'github',
  options: { redirectTo }
})

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      baseUrl: process.env.BASE_URL || 'http://localhost:3000'
    }
  }
})

[nsina]

@Rizzato95 Thanks! How did you configure the URLs on Supabase? Site URL, and then both localhost and base url in the Redirect URLs?

[Rizzato95]

No, you don't need to specify your production URL twice.

Site url --> Production URL Redirect URL's --> Only localhost url

[PhE]

In our case, we generate the app once and use it under different base url (PROD, UAT, dev, ...). We can't rely on useRuntimeConfig().public.baseUrl since the runtime config is freezed as build time) So we prefer to rely on :

const redirectTo = `${useRequestURL().origin}/confirm`

[marcaureln]

I ran into the same issue because I set http://localhost:3000 instead of http://localhost:3000/** in redirect URL's. So my Google OAuth will always redirect to the production URL (Site URL in Supabase). So make sure to include regex for redirect URL's.

[yacosta738]

Any update on this