문제 상황

react-native-kakao-login을 이용해서 카카오 로그인을 구현하는데, 아래와 같은 오류가 발생했다.

image.png

원인

Supabase Kakao provider의 Client ID(REST API Key)와 네이티브 SDK의 idToken audience(Native App Key)가 불일치해 signInWithIdToken 실패

image.png

문제점 : Supabase > Provider > kakao에서는 REST API Key만 설정이 가능하다.

다시말해, Supabsae가 카카오를 네이티브 OAuth Provider로 지원하지 않는다.

해결 방법

Supabase Edge Function에서 카카오 API (/v2/user/me)로 AccessToken 검증 → admin.generateLink(magiclink) → hashed_token 반환 → 클라이언트에서 verifyOtp({ token_hash }) 호출

  1. 카카오 API로 Access Token 검증 및 사용자 정보 조회

    const kakaoRes = await fetch("<https://kapi.kakao.com/v2/user/me>", {
  headers: { Authorization: `Bearer ${kakao_access_token}` },
});
const kakaoUser = await kakaoRes.json();
const email = kakaoUser.kakao_account?.email;

  2. Supabase Admin 클라이언트 생성

    const supabaseAdmin = createClient(
  Deno.env.get("SUPABASE_URL")!,
  Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!,
);

  3. 기존 사용자에 대해 magiclink 토큰 생성 시도

        let { data: linkData, error: linkError } =
      await supabaseAdmin.auth.admin.generateLink({
        type: "magiclink",
        email,
      });

  4. 사용자가 없으면 생성 후 재시도

    if (linkError) {
  const nickname =
    kakaoUser.properties?.nickname ??
    kakaoUser.kakao_account?.profile?.nickname;
  const avatarUrl =
    kakaoUser.properties?.profile_image ??
    kakaoUser.kakao_account?.profile?.profile_image_url;

  const { error: createError } =
    await supabaseAdmin.auth.admin.createUser({
      email,
      email_confirm: true,
      user_metadata: {
        name: nickname,
        avatar_url: avatarUrl,
        provider: "kakao",
        kakao_id: String(kakaoUser.id),
      },
    });