Nextjs와 Supabase로 간편하게 Google 로그인 구현하기

시작하기: Nextjs와 Supabase 설정

Next.js는 모던 웹 개발을 위한 인기 있는 프레임워크 중 하나입니다. Supabase는 Postgres 기반의 오픈소스 백엔드 플랫폼으로 실시간 데이터베이스 및 인증 기능을 제공합니다. 이 글에서는 이러한 도구를 활용하여 Google OAuth를 통해 로그인 시스템을 구축하는 방법을 알아봅니다.

Supabase 설정 블로그 참고하기

Google OAuth를 위한 Google Cloud 프로젝트 설정

Google OAuth를 시작하기 위해서는 Google Cloud Console에서 프로젝트를 설정해야 합니다. 이를 통해 OAuth 클라이언트 ID와 비밀 키를 받을 수 있습니다.

1. Google Cloud Console에 접속하여 새 프로젝트를 생성합니다.
2. API 및 서비스 > OAuth 동의 화면으로 이동하여 필수 정보를 입력합니다.
   • 사용자 유형: 외부
   • 애플리케이션 이름: (예: "내 애플리케이션")
   • 사용자 지원 이메일: 본인의 이메일 입력
   • 인증된 도메인: Supabase 프로젝트 URL
   • 개발자 연락처: 본인의 이메일 입력
3. 스코프(Scope) 설정:
   • email
   • profile
   • openid

이후 API 및 서비스 > 인증 정보로 이동하여 OAuth 클라이언트 ID를 생성합니다.

• 애플리케이션 유형: 웹 애플리케이션
• 이름: 애플리케이션 이름
• 승인된 리디렉션 URI: <도메인>/api/auth/callback (예: http://localhost:3000/api/auth/callback)

Supabase 대시보드로 이동하여 Auth > Providers > Google을 활성화하고 리디렉션 URL을 설정합니다.

PKCE 흐름 이해하기

PKCE(Proof Key for Code Exchange)는 보안을 강화하는 인증 흐름으로, 특히 모바일 및 공용 클라이언트에서 많이 사용됩니다. PKCE에서는 서버가 비밀 코드를 생성하고 암호화한 후 이를 OAuth 서버로 전송합니다. 클라이언트는 이 과정을 통해 안전하게 액세스 토큰(JWT)을 받게 됩니다.

1. 서버가 비밀 코드를 생성하고 암호화합니다.
2. 암호화된 코드를 OAuth 서버로 전송합니다.
3. OAuth 서버는 코드를 저장하고 인증 토큰을 서버에 전송합니다.
4. 서버는 인증 토큰과 비밀 코드를 클라이언트에 전송합니다.
5. 클라이언트는 비밀 코드를 사용하여 액세스 토큰을 요청합니다.
6. OAuth 서버가 코드를 비교하여 일치하면 액세스 토큰을 서버에 전송합니다.

서버 액션 생성하여 Google OAuth 추가

Google OAuth 인증을 처리하기 위해 Nextjs 애플리케이션에 액션을 추가합니다. src/utils/actions.js 파일을 생성하고 다음 코드를 입력합니다.

'use server'
import { createClientForServer } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

const signInWith = provider => async () => {
  const supabase = await createClientForServer()

  const auth_callback_url = `${process.env.SITE_URL}/auth/callback`

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: auth_callback_url,
    },
  })

  if (error) {
    console.log(error)
  }

  redirect(data.url)
}

const signinWithGoogle = signInWith('google')

이 코드는 signInWithOAuth 메서드를 사용하여 Google 제공자를 통해 로그인합니다. 사용자 인증 후 data.url로 리디렉션됩니다.

인증 콜백 처리

src/apps/auth/callback/route.js 파일에서 인증 콜백을 처리합니다.

import { NextResponse } from 'next/server'
import { createClientForServer } from '@/utils/supabase/server'

export async function GET(request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const supabase = await createClientForServer()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host')
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

이 코드는 인증 코드를 세션으로 교환하고, 사용자를 적절한 리디렉션 URL로 보냅니다.

UI에 통합하기

UI에 방금 구현한 기능을 통합하여 사용자가 Google로 로그인을 할 수 있도록 합니다.

import { signinWithGoogle } from '@/utils/actions'

const Component = () => {
  return (
    <form>
      <button className='btn' formAction={signinWithGoogle}>
        Sign in with Google
      </button>
    </form>
  )
}

결론

이제 Nextjs 애플리케이션에 Supabase Auth를 이용하여 Google OAuth를 성공적으로 추가했습니다. 이 과정은 사용자 친화적인 로그인 경험을 제공하며, 여러분의 프로젝트에서 효율적이고 안전한 사용자 인증을 보장합니다.

더 궁금한 사항이 있으면 댓글을 통해 질문해 주세요. 저와 제 팀은 항상 새로운 기회를 찾고 있습니다. 채용 중이라면 언제든 연락 주세요.

연락처:

• 이메일: thatanjan@gmail.com
• 포트폴리오: thatanjan.com
• LinkedIn: linkedin.com/in/thatanjan
• Github: github.com/thatanjan

추가 학습 자료:

• Supabase Official Documentation
• Next.js Documentation

즐거운 코딩 되세요! 🚀