250911 : 이예영

[Y0ungo]

1. 코드 Summary

(어떤 기능을 구현했는지보다 코드를 작성할 때 어떤 점을 신경써서 구현했는지, 어떻게 구현했는지를 최대한 구체적으로 작성해주세요.)

큰 흐름
[사용자] - (버튼) --> login.jsx 실행

• supabase.auth.signInWithOAuth('kakao', {redirectTo, scopers})
• 이후) 카카오 로그인/동의 화면
• 성공 후) 앱으로 복귀: /auth/callback (AuthCallback.jsx 실행)
  • oob_cdes + email 有 : verifyOtp()
  • code 有 : exchangeCodeForSession()
  • gestSession: next=/profile 이동

코드
콜백 페이지에서 두 URL(카카오 > 앱 혹은 카카오 > 로컬 > 앱) 케이스를 모두 처리

• AuthCallBack.jsx에서 edgefunction 매직링크(oob_code)로 이동
  • 성공하면 Supbase 세선 생성됨
  • oob_code: supbase가 발급한 토큰 = 백엔드에서 처리 끝난 상태 (백 - 프론트 소통)
  • await supabase.auth.verifyOtp({ email, token: oob_code, // 쿼리에서 꺼낸 oob_code type: 'magiclink', // 보통 'magiclink' });
• 일반 인가코드
  • codes: 카카오가 준 인가 코드 (카카오 - 프론트(백/supabase) 소통)
  • await supabase.auth.exchangeCodeForSession(code);

2. Key Changes

(같은 과제를 다시 제출하는 경우에만 변경사항을 입력해주세요.)

3. Reference

(코드 작성하면서 참고한 블로그/문서 등을 참조해주세요! 링크와 함께 어떤 기능을 수행할 때 참조했는지 짧게 작성해주세요.)

• 카카오 로그인 흐름 확인: 카카오 디벨로퍼 가이드(https://developers.kakao.com/docs/latest/ko/kakaologin/common#intro-login-process)
• Supbase 카카오 로그인 가이드 (https://supabase.com/docs/guides/auth/social-login/auth-kakao)
• OAuth 절차/단계 설명 참고 (https://ddppp.tistory.com/157#:~:text=)
• 리다이렉트 참고 (https://ash9river.tistory.com/74)

Tip

supbase 서비스 이해 (https://velog.io/@manner9945/supabase-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-6tyu3xcx)

4. Report

(노션에 작성한 스터디 회고 링크를 첨부해주세요.)

5. 구현한 화면 스크린샷