Next.js Discord

Discord Forum

Google Oauth

Unanswered
evandabest posted this in #help-forum
Open in Discord
Im trying to add google oauth to my app with supabase, but it doesn't do anything. I followed the docs and can't seem to figure out what Im doing wrong. plz help out.

this is the server side function that handles the google login, from the docs for the most part
export async function signingoogle() { 
  const supabase = createClient();
  const locationOrigin = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000';
  supabase.auth.signInWithOAuth({
     provider: 'google',
     options: {
       redirectTo: locationOrigin + '/auth/callback', 
     }
  
  });
}


this is the /auth/callback code (straight from the docs)
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
import { type CookieOptions, createServerClient } from '@supabase/ssr'

export async function GET(request: Request) {
  const reqURL = new URL(request.url)
  const { searchParams, origin } = reqURL 
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const cookieStore = cookies()
    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        cookies: {
          get(name: string) {
            return cookieStore.get(name)?.value
          },
          set(name: string, value: string, options: CookieOptions) {
            cookieStore.set({ name, value, ...options })
          },
          remove(name: string, options: CookieOptions) {
            cookieStore.delete({ name, ...options })
          },
        },
      }
    )
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
        return NextResponse.redirect(`${origin}${next}`)
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

1 Reply

this is the login/signup page if anyone is wondering
import { Input } from '@/components/ui/input'
import { login, signup, signingoogle } from './actions'
import { Button } from '@/components/ui/button'


export default function LoginPage() {
  return (
    <form className='w-72 m-auto items-center flex flex-col'>
      <Input className=' text-black my-4' placeholder='Email' id="email" name="email" type="email" />
      <Input className='text-black my-4' placeholder='Password' id="password" name="password" type="password" />
      <div className = "flex flex-row">
        <Button className='my-2 mx-2' formAction={login}>Log in</Button>
        <Button className='my-2 mx-2' formAction={signup}>Sign up</Button>
        <Button className = "my-2 mx-2" formAction={signingoogle}>Google</Button>
      </div>
    </form>
  )
}