Next에서 소셜 로그인(카카오 로그인) 구현하기

추후 변경될 수 있지만, 이번에 이메일 로그인 대신에 소셜 로그인을 메인으로 사용하기로 했습니다 

가장 많이 쓰는 카카오 로그인을 next 프로젝트에 적용하는 방법을 기록해보겠습니다 (참고로 SSR을 사용하였습니다)

 

카카오 로그인 서비스 과정

로그인은 사용자가 자신을 인증해 서비스에 권한을 인가하는 절차입니다

카카오 로그인은 사용자 로그인 완료 시, 보안 데이터인 토큰을 서비스에 발급합니다

https://developers.kakao.com/docs/latest/ko/kakaologin/common

 

카카오dev에서 로그인을 사용할 애플리케이션 등록하기

 

1. 카카오 로그인 활성화 + OpenId Connect 활성화

 

2. 앱키 위치 기억해두기

supabase에서 연결해야 하기 때문에 일단 위치만 기억해두고 넘어갑니다

 

3. 동의항목 설정하기

필요한 거에 따라 각자 설정하면 됩니다

설정하고 나면 위에 '동의 화면 미리 보기'로 한번 확인해 보도록 합니다

 

4. client Secret 위치 기억해 두기

supabase에서 연결해야 하기 때문에 일단 위치만 기억해둡니다

 

supabase에 카카오 로그인 연결하기

 

1. Authentication Providers에서 Kakao 로그인을 활성화시킨다

 

2. 1-2에서 본 Rest API 키, 1-4의 client secret 키를 입력한다 

 

3. 2-2 아래에 콜백 URL을 복사하고, 카카오 로그인의 Redirect URI로 등록한다

https://<project-ref>.supabase.co/auth/v1/callback

supabase에서 위 코드와 같은 가져와 콜백 url을 복붙합니다

 

로그인 코드 추가하기

 

이제 연결은 끝났습니다!

코드로 통신 코드가 호출되도록 작성해보도록 합시다

1. app/auth/callback/route.ts 파일 추가하기

import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClient } from '@/utils/supabase/server'

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

  if (code) {
    const supabase = createClient()
    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`)
}

 

2. app/api/auth/provider 경로와 같이 특정 경로에서 callback에 연결

SSR을 사용하기 때문에, 서버에서 OAuth provider의 endpoint로 리디렉션 처리를 해야 한다

해당 파일의 위치는 원하는 대로 설정하면 된다 

const { data, error } = await supabase.auth.signInWithOAuth({
  provider,
  options: {
    redirectTo: 'http://localhost/api/auth/callback', // route handler 연결
  },
})

if (data.url) {
  redirect(data.url) // use the redirect API for your server framework
}

 

위 코드는 공식문서의 코드이고, 아래는 위 코드를 기반으로 다양한 provider를 받을 수 있도록 변경한 코드입니다

 

쿼리 스트링으로 사용할 provider를 전달하고, 3-1처럼 전달받은 URL 문자열을 파싱 하여 새로운 URL 객체를 만듭니다
searchParams는 URLSearchParams 객체로 쿼리 파라미터를 추출할 수 있습니다

 

OAuth 인증을 위한 코드는 위 코드와 동일하고, 다른 점은 쿼리 스트링을 추출해 넣는 것뿐입니다

import { createClient } from '@/supabase/server';
import { Provider } from '@supabase/supabase-js';
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const provider = searchParams.get('provider');

    const supabase = createClient();

    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: provider as Provider,
      options: {
        redirectTo: `${process.env.NEXT_PUBLIC_BASE_URL}/api/auth/callback`
      }
    });

    if (error) return NextResponse.json({ success: false, details: error.message });
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ success: false, details: error });
  }
}

 

공식문서

Login with Kakao | Supabase Docs