expo 카카오 로그인 + supabase에서 idToken audionce 불일치하는 문제

문제 상황

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

원인

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

해결 방법

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),
         },
       });

• 앱 입장

  1. 앱에서 로그인을할 때, supabase.functions.invoke로 위 functions를 실행

     supabase.functions.invoke("kakao-auth", { body: { kakao_access_token } })