[FP] 소셜로그인 삼일차 - 해냈다.. (2024. 8. 9.)

#스파르타코딩클럽 #내일배움캠프(프론트엔드_React) 
학습주제 : Next.js로 최종 프로젝트 만들기

학습내용 : supabase social login (OAuth)

학습일 : 2024. 8. 9.

---

오류 일지

 

 

카카오톡으로 로그인하기... 드디어 뚫었다.... 내가 해냈다고!!!!!!!!!

 

내가 만난 소셜로그인의 큰 산은 '카카오톡 개발자센터 설정'과 'users 테이블에 자동 생성하기' 부분이다.

 

하나, 카카오톡 개발자 센터 설정하기

카카오톡 개발자 센터 설정은 supabase의 공식문서만 봐서는 해결할 수 없다. 반드시 블로그 조사가 필수다. 그러나 블로그 자료도 100% 신뢰할 수 없기 때문에 더욱 난감했다. (어떻게 해야 되는지는 다음에 다루도록 하겠다.) 여러 설정 끝에 카카오 서버에 접속할 수 있었고 카카오톡 전용 페이지에서 ZZAN 사이트 회원가입 시 개인정보 동의를 거쳐 supabase auth.users 테이블에 새로운 유저의 정보가 생성되었다.! (오예!!!!!!!!!!!)

 

두울, auth.users 테이블에 테이터가 생성되면 자동으로  public.users 테이블에서도 데이터가 생성되게 하기

database 내부적으로 트리거를 사용하면 성능 최적화에 도움이 되기에 트리거를 써봤다.
(트리거를 사용하려는 나의 의도: 처음 접한 기술을 스스로 습득하여 성공한 사례를 보여줄 수 있는 기회가 되겠군~ 좋아~해내주겠다아아~)

supabase SQL Editor에서 작성한 'handle_new_user' 함수 - 6~18번 줄이 주요 기능!

 

그러나 나는 코린이...  sql 문법을 아는가? nope.. ChatGPT 없이는 sql 한 줄도 못 쓰겠고, 에러가 있어도 어떤 부분에서 에러가 나는 건지 어떻게 확인하는 거지?  6시간 동안 다양한 시도 끝에 더이상 시간을 지체할 수 없어 내부 코드인 라우트 핸들러를 통해 public.users 테이블에 직접 데이터를 넣어주었다. (트리거야... 다음에 잘 부탁할게...)

// src\app\api\auth\callback\route.ts

import { NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";

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

  if (code) {
    const supabase = createClient();
    const { data, error } = await supabase.auth.exchangeCodeForSession(code);

    // code로 읽은 'data' 입맛에 맞게 변수 주기
    const userId: string = data.user?.id || "";
    const email: string = data.user?.email || "";
    const full_name: string = data.user?.user_metadata.full_name || "";
    const provider: string = data.user?.app_metadata.provider || "";
    const created_at: string = data.user?.created_at || "";

    // 'users' 테이블에 insert
    if (data) {
      const { data: users, error: usersError } = await supabase.from("users").select("*").eq("userId", userId).single();

      console.log("users", users);
      if (users === null) {
        await supabase
          .from("users")
          .insert([
            {
              userId,
              email,
              nickname: full_name,
              created_at,
              provider,
              total_point: 0,
              current_point: 0,
              updated_at: null
            }
          ])
          .select();
      }
    }

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