Supabase Oauth PKCE flow works but having trouble with redirect. (Next.js + React)
Environment details:
- @supabase 2.22.4
- @GNU make 3.81
I'm trying to redirect a users after successful GoogleOauth sign in but am getting stuck. Once the oauth works I'm immediately redirected to my landing page app/page.tsx rather than the targeted location: /app/pages/home.tsx.
Here's what I've attempted:
1. adding next: '/home' path as a query parameter in lib/auth-actions.ts file
2. adding redirects: within my supabase project yet that hasn't worked either.
```
```
20 Replies
i was having similar issues, i ended up using this guide:
https://supabase.com/docs/guides/auth/redirect-urls
Redirect URLs | Supabase Docs
Set up redirect urls with Supabase Auth.
and suddently everything worked ✨
i use vercel so i followed the vercel steps, particularly the bit about the
** matching any sequence of characters in the url.
for example:
Wait I read through those docs and tried that exact character sequence too. Did you put that in the redirect or the supabase authorized uris?
this is in the supabase authorized uris
i should show you my production config but it contains some internal URLs lol
all good
i think i have it based off that
oml
i just realized that i had a typo when i read the docs the first time i tried it 🤦♂️
now in the google oauth settings, i have the authorized redirect URIs set to
and the origins set to:
LOL all good
lemme double check my google oauth
by any chance did you do something similar to this
export async function signInWithGoogle() {
const supabase = createClient();
const { data, error } = await (await supabase).auth.signInWithOAuth({
provider: "google",
options: {
redirectTo:
${process.env.NEXT_PUBLIC_APP_URL}/auth/callback,
queryParams: {
access_type: "offline",
prompt: "consent",
next: "/home",
},
},
});
if (error) {
console.log(error);
redirect("/error");
}
redirect(data.url);
}interesting. i didnt know there was a queryParameters option
hang on..
that was one of the solutions i came across but i'm not sure it works
i'm using the next pages router, i have my redirectTo at
${baseURL}/api/v1/auth/callback
woah
interesting
i assume your
next query parameter is similar to mine- it tells the auth callback to redirect the user to the page specified in next?
so for example:
^ this could be optimized to use the baseURL regardless of whatever's in redirect to but i CBAYou can refer to this example app
This is the route where you make signInWithOAuth call: https://github.com/silentworks/supabase-by-example/blob/main/nextjs/app/auth/%5Bslug%5D/route.ts
And /auth/callback route: https://github.com/silentworks/supabase-by-example/blob/main/nextjs/app/auth/callback/route.ts
but yea this is what i have and it works well enough for me
hmmm ok ok
silentworks supabase by example 🙏
google oauth forwards the query params but supabase auth drops extra query params
You can try this approach https://github.com/orgs/supabase/discussions/21110#discussioncomment-9976704
hey ya'll i started looking through all possible options since i've been bashing my head into ssr oauth for the past two days
and came across a possible realization that it could possibly be related to incorrect file architecture which is why my redirect defaults to home. After re-reading supabase docs and trying nearly all of the solutions I think it's possible I'm just rerouting improperly and going to give it a try and keep ya'll updated.
This would be incorrect, the
next is not a part of thr google queryParams options. It's just a string you attach to the redirectTo.
Just look at the example repo shared above, it has the entire flow working there https://github.com/silentworks/supabase-by-example/blob/main/nextjs