dijonmusters
commented
5 months ago Hey! Thanks for reporting this. By default, the auth-helpers and ssr packages use the PKCE auth flow, which requires you to redirect to a code exchange route after the authentication process has completed. You will need a route to handle this exchange, like this:
// /auth/callback.ts
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
import { type CookieOptions, createServerClient } from '@supabase/ssr'
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const code = searchParams.get('code')
if (code) {
const cookieStore = cookies()
const supabase = createServerClient(...)
const { error } = await supabase.auth.exchangeCodeForSession(code)
if (!error) {
// change this to wherever you want to redirect the user after authentication completes
return NextResponse.redirect('http://localhost:3000/dashboard')
}
}
// return the user to an error page with instructions
return NextResponse.redirect('http://localhost:3000/auth/error')
}Then your call to signInWithOAuth needs to redirect to the above Route Handler.
const googleRes = await supabase.auth.signInWithOAuth({
provider: "google",
options: {
redirectTo: "http://localhost:3000/auth/callback",
},
});The best place to start with a Next.js and Supabase app is the with-supabase template. This already has server-side authentication configured, so you can just focus on building an awesome app!
You can use this with the create-next-app command like this:
npx create-next-app@latest -e with-supabase
FingerLiu
yaberkane05
Bug report
Describe the bug
I'm using Supabase Auth helpers. I configured and tested that signing up a user with email/password is good.
However, when trying to set up Google auth, I cannot login my user. This is somewhat related to this unresolved discussion: https://github.com/orgs/supabase/discussions/16743
Tutorial I Followed https://supabase.com/docs/guides/auth/social-login/auth-google#using-the-oauth-flow-for-web
Troubleshooting
code_challengeparameter, which suggests that Google is authenticating the loginTo Reproduce
I can get the URL from my google auth
which returns a URL with the code_challenge
now back in my main page, if I execute getUser, it returns null.
Expected behavior
supabase.auth.getUser()returns nullScreenshots
If applicable, add screenshots to help explain your problem.
System information
Full Code
See my full code snippet
```javascript const supabase = createClientComponentClient( NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY ); const handleGoogleSignIn = async () => { try { const googleRes = await supabase.auth.signInWithOAuth({ provider: "google", options: { redirectTo: "http://localhost:3000", }, }); const tokenRes = await passGoogleTokenToSupabase(googleRes); // router.refresh(); } catch (err) { console.error(err); } }; async function passGoogleTokenToSupabase(request) { try { const requestUrl = new URL(request.data.url); const code = requestUrl.searchParams.get("code_challenge"); if (code) { console.log("got the code"); localStorage.setItem("codePassedToExchangeCodeForSesssion", code); const { data, error } = await supabase.auth.exchangeCodeForSession( code ); return data; } else { return null; } } catch (err) { console.error(err); } } ```