Supabase•2y ago

Issue with redirect using OAuth with local development

I'm building a SvelteKit app using Supabase SSR and am running a local version of Supabase for development. I have configured the env variables according to the Supabase docs, adding both the local site URL and redirect destionation in config.toml and my remote db in .env to get Supabase SSR working. supabase/config.toml: https://github.com/brucey0x/bv_markdown_blog/blob/293ec43410db654d60882e540f1fc2fd2cad9f66/supabase/config.toml I am triggering a Github login via a form action, which has the redirect url src/routes/auth/+page.server.ts: https://github.com/brucey0x/bv_markdown_blog/blob/293ec43410db654d60882e540f1fc2fd2cad9f66/src/routes/auth/%2Bpage.server.ts The callback page has a server function defined as src/routes/auth/callback/+server.ts: https://github.com/brucey0x/bv_markdown_blog/blob/293ec43410db654d60882e540f1fc2fd2cad9f66/src/routes/auth/callback/%2Bserver.ts Unfortunately, when I trigger the Github signin, I get this error log with a redirect URL that includes the public:

OAuth signin failed:  Redirect {
  status: 303,
  location: 'https://wwznwptvovjbqfyltnza.supabase.co/auth/v1/authorize?provider=github&redirect_to=http%3A%2F%2Flocalhost%3A5173%2Fauth%2Fcallback%3Fnext%3D%2Fadmin&code_challenge=[CODE_CHALLENGE]&code_challenge_method=s256'
}

OAuth signin failed:  Redirect {
  status: 303,
  location: 'https://wwznwptvovjbqfyltnza.supabase.co/auth/v1/authorize?provider=github&redirect_to=http%3A%2F%2Flocalhost%3A5173%2Fauth%2Fcallback%3Fnext%3D%2Fadmin&code_challenge=[CODE_CHALLENGE]&code_challenge_method=s256'
}

I've done the obvious things like supabase stop && supabase start but can't figure out why it's including my public supabase URL in the url while ALSO including the local redirect. The auth?/signin request works and returns a 204 success response. But the src/routes/auth/callback/+server.ts logs aren't trigerring so the page isn't being hit. Any suggestions? Thank you!

11 Replies

silentworks•2y ago

This could mean your .env file is referencing the wrong supabase URL and API Key.

BudiOP•2y ago

Thanks for the swift response. I have made a note to study your local > staging > production flow which you'd shared elsewhere. Here's the structure of my .env:

# Direct local Supabase PostgreSQL connection string for migrations
DATABASE_URL="postgresql://postgres:postgres@127.0.0.1:54322/postgres"
SUPABASE_AUTH_GITHUB_CLIENT_ID="REDACTED"
SUPABASE_AUTH_GITHUB_SECRET="REDACTED"
# AUTHJS_SECRET="REDACTED"
PUBLIC_SUPABASE_URL="https://wwznwptvovjbqfyltnza.supabase.co"
PUBLIC_SUPABASE_ANON_KEY="REDACTED"

# Direct local Supabase PostgreSQL connection string for migrations
DATABASE_URL="postgresql://postgres:postgres@127.0.0.1:54322/postgres"
SUPABASE_AUTH_GITHUB_CLIENT_ID="REDACTED"
SUPABASE_AUTH_GITHUB_SECRET="REDACTED"
# AUTHJS_SECRET="REDACTED"
PUBLIC_SUPABASE_URL="https://wwznwptvovjbqfyltnza.supabase.co"
PUBLIC_SUPABASE_ANON_KEY="REDACTED"

Am I doing anything wrong here? I must admit that I struggle to understand how I can use the public SUPABASE URL & ANON KEY while running a local env (for which I've inserted the postgresql path in DATABASE_URL) and trying to associate the auth with the local version and not with the public version. Am I mixing some parts of these workflows perhaps? I fail to understand how they must interoperate for local (testing) development, so that I can later push to a staging or production public version.

silentworks•2y ago

Yeah you need to update the .env files PUBLIC_SUPABASE_* env variables.

PUBLIC_SUPABASE_URL="http://localhost:54321"
PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0"

PUBLIC_SUPABASE_URL="http://localhost:54321"
PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0"

The anon key is the same in all Supabase CLI local instance, so that one should work otherwise run supabase status and it will give you the correct information.

BudiOP•2y ago

Thanks again for the swift response on a Saturday! I've tried this. The sign-in still fails, although it's resolved the public URL from being inserted. It doesn't appear to be hitting my callback path yet. One step closer, I suspect. Logs:

OAuth response data is:  {
  provider: 'github',
  url: 'http://localhost:5173/auth/v1/authorize?provider=github&redirect_to=http%3A%2F%2Flocalhost%3A5173%2Fauth%2Fcallback%3Fnext%3D%2Fadmin&code_challenge=[REDACTED]&code_challenge_method=s256'
}

OAuth signin failed:  Redirect {
  status: 303,
  location: 'http://localhost:5173/auth/v1/authorize?provider=github&redirect_to=http%3A%2F%2Flocalhost%3A5173%2Fauth%2Fcallback%3Fnext%3D%2Fadmin&code_challenge=[REDACTED]&code_challenge_method=s256'
}

OAuth response data is:  {
  provider: 'github',
  url: 'http://localhost:5173/auth/v1/authorize?provider=github&redirect_to=http%3A%2F%2Flocalhost%3A5173%2Fauth%2Fcallback%3Fnext%3D%2Fadmin&code_challenge=[REDACTED]&code_challenge_method=s256'
}

OAuth signin failed:  Redirect {
  status: 303,
  location: 'http://localhost:5173/auth/v1/authorize?provider=github&redirect_to=http%3A%2F%2Flocalhost%3A5173%2Fauth%2Fcallback%3Fnext%3D%2Fadmin&code_challenge=[REDACTED]&code_challenge_method=s256'
}

Any idea what could be resulting in the error now? This is the first time I'm using local dev with Supabase, as I previously just used a remote Supabase instance for a project. I'd like to learn this though and also understand what a safe workflow would be when running a commercial app with a staging and production instance. Additionally, when inserting the local env variables in .env like this, should I manually replace these when pushing to production? Or is there a way to do this via a Github workflow or some other way, so that it would know which vars to apply when I'm pushing to a staging github repo and/or Vercel deployment?

silentworks•2y ago

I would need to see the code that's producing the OAuth signin failed message. You wouldn't check in your .env file as that should only be used for local development. You would set your env variables in Vercel for staging and production, you would also need to have the same staging and production environments on Vercel too,

BudiOP•2y ago

This is the code that handles the GitHub OAuth signin and produces the error log: https://github.com/brucey0x/bv_markdown_blog/blob/293ec43410db654d60882e540f1fc2fd2cad9f66/src/routes/auth/%2Bpage.server.ts. FWIW I've confirmed that when triggering the signing form action, the request's origin header is http://localhost:5173 so that should be producing the right redirect url. And this is the callback server function which is supposed to run once that page is hit via the redirect (which I've configured in the Github OAuth app): https://discord.com/channels/839993398554656828/1193113980470824991/1193113980470824991 I've set the redirect URL in GitHub to be: http://localhost:54321/auth/v1/callback And I understand. .env is gitignored, and I'll set new vars in Vercel for the staging and production builds. However, is there a specific way to write my Supabase database and auth code so that it automatically grabs the right env variables based on whether I'm in local, staging or production? Did you happen to see my response @silentworks? Would be great to figure this out 🙂

silentworks•2y ago

Remove the try/catch block from your code. You are throwing the redirect so you can't be catching it too. Change line 20 - 31 to:

const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    // Not sure if this is a viable redirect URL
    options: { redirectTo: `${url.origin}/auth/callback?next=/admin` }
})
console.log("OAuth response data is: ", data)

if (error) {
    console.log(`The error here`, error)
}

if (data.url) throw redirect(303, data.url)

const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    // Not sure if this is a viable redirect URL
    options: { redirectTo: `${url.origin}/auth/callback?next=/admin` }
})
console.log("OAuth response data is: ", data)

if (error) {
    console.log(`The error here`, error)
}

if (data.url) throw redirect(303, data.url)

For future reference you cannot wrap a throw redirect into a try/catch block as it will always throw hence triggering the catch block of code.

BudiOP•2y ago

This worked! So cool. Oh snap what a silly mistake. I didn't know a throw always triggers the catch. Any guidance on this would be greatly appreciated too. I'd love to understand how to properly work in local > staging > production contexts and write code that is modular for it.

silentworks•2y ago

Your code is already doing this as it gets the values from the environment variables https://github.com/brucey0x/bv_markdown_blog/blob/293ec43410db654d60882e540f1fc2fd2cad9f66/src/hooks.server.ts#L8-L9 and https://github.com/brucey0x/bv_markdown_blog/blob/293ec43410db654d60882e540f1fc2fd2cad9f66/src/routes/%2Blayout.ts#L9

GitHub

bv_markdown_blog/src/routes/+layout.ts at 293ec43410db654d60882e540...

Contribute to brucey0x/bv_markdown_blog development by creating an account on GitHub.

GitHub

bv_markdown_blog/src/hooks.server.ts at 293ec43410db654d60882e540f1...

Contribute to brucey0x/bv_markdown_blog development by creating an account on GitHub.

BudiOP•2y ago

Thanks. I understand that it's referencing the PUBLIC_SUPABASE_URL etc from .env, but do I need to manually replace those values when pushing to staging and production? Or can Vercel automatically insert those for me instead of the ones I've noted locally?

BudiOP•2y ago

I refactored my +page.server.ts and while the signin and signout actions are working, the redirect of the signout isn't triggering a page refresh. When I manually refresh the page, it shows that I'm logged out and the session has ended. How can I ensure the page refreshes upon a signout? https://github.com/brucey0x/bv_markdown_blog/blob/73c34f21eedbb814608e8efd23d4faf918b46a31/src/routes/auth/%2Bpage.server.ts

GitHub

bv_markdown_blog/src/routes/auth/+page.server.ts at 73c34f21eedbb81...

Contribute to brucey0x/bv_markdown_blog development by creating an account on GitHub.

Gaming

Programming

Issue with redirect using OAuth with local development

Did you find this page helpful?