[Next.js 14 + Supabase ] Supabase 카카오 로그인 구현

https://supabase.com/docs/guides/auth/social-login/auth-kakao

Login with Kakao | Supabase Docs

 

 

 

https://developers.kakao.com/

Kakao Developers

 

 

 

 

 

 

API 키 발급을 해야함

 

 REST API 키를 복사해서 

 

 

 

Supabase 에서 인증 ->프로바이더에서 카카오 인증

 

 

 

아래의 Kakao enabled을 활성화 한 후 

REST API 키를 붙여넣고 

 

 

아래의 Client Secret Code 에는 

 

카카오 디벨로퍼스-> 보안에 들어가서 코드를 생성해준 뒤 붙여넣기 해주면됨 

 

 

 

 

활성화 상태도 사용함으로 변경한다.

 

 

 

마지막으로 Callback url의 경우에는 복사해서 

 

카카오로그인-> 리다이렉트 url 등록해주면 됨 

 

 

 

카카오 로그인 활성화 

 

 

 

그리고 카카오로그인 동의항목을 들어가면 

 

 

닉네임, 프로필 사진 외에는 권한이 없음으로 뜨는데

이는 개인정보 동의항목 심사 신청을 통해 사용 가능하게 변경할 수 있다. 

 

 

 

 

 

 

 

 

앱 아이콘 등록을 클릭하여 

수정-> 아무 사진이나 업로드 한다.

 

 

그 다음 아래에 있는 사업자 정보 등록을 클릭한다.

 

 

.

 

개인 개발자 비즈 앱 전환을 클릭 후 

 

 

이메일 필수 동의를 클릭한 후 전환하면 

 

 

다시 동의 항목으로 돌아가면 이메일이 열린 것을 확인 할 수 있다. 

 

 

이제 사용 설정을 하는데 

닉네임/프로필사진/카카오 계정을 

필수동의 , 동의목적을 작성하여 저장하면됨

 

 

상태가 필수동의로 변경된다. 

\

 

 

 

이제 코드 구현만 하면됨

 

signin 컴포넌트에서 

 

코드를 추가하는데

 

공식문서를 참고해서 만들면된다.

 

 

  async function signInWithKakao() {

    const { data, error } = await supabase.auth.signInWithOAuth({

      provider: "kakao",

      options: {

        redirectTo: process.env.NEXT_PUBLIC_VERCEL_URL

          ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/auth/callback`

          : "http://localhost:3000/auth/callback",

      },

    });

    console.l

 

 

 

이제 버튼을 클릭하면 작동하도록 

 

카카오 로그인 버튼을 만들어줄건

 

 

 

카카오 로그인 로고 

 

https://developers.kakao.com/tool/resource/login

Kakao Developers

 

 

 

 

        <img

          src="/images/kakao_login.png"

          alt="kakao login btn"

          className="w-full text-md py-1 cursor-pointer"

          onClick={() => signInWithKakao()}

        />

 

카카오 로그인 버튼을 

 

클릭하면 아래와 같이 동의화면이 나온다.

 

 

 

 

그 다음  

리다이렉트 되는 주소의 라우트 설정을 위해서 

 

import { cookies } from "next/headers";

import { NextResponse } from "next/server";

import { type CookieOptions, createServerClient } from "@supabase/ssr";

import { createServerSupabaseClient } 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 = await createServerSupabaseClient();

    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`);

}

 

 

설정 후 다시 로그인하면 

 

세션을 얻은 채 

 

리다이렉트하여 기본 홈페이지로 돌아온다.