Next Auth 카카오 로그인 #63

oyeon-kwon · 2023-05-12T08:10:36Z

🤔 해결하려는 문제가 무엇인가요?

close #44

🎉 변경 사항

next-auth를 활용해 카카오 로그인 버튼을 만들었어요.

🙏 여기는 꼭 봐주세요!

테스트 코드가 올바르게 짠게 맞는지 모르겠네요..
오잉 근데 .yarn/cache 파일이 다 올라갔는데 이게 맞나요..?

사용 방법

env 파일 추가가 필요합니다.
👉 env 노션 문서
카카오 디벨로퍼는 제 아이디로 우선 해 놓았습니다!

🌄 스크린샷

📚 참고

상조님이 에러 해결 도와주심🙏🏻🙏🏻 감사합니동

hyesungoh · 2023-05-12T08:32:36Z

넵 캐시 파일 올라오는 거 맞아요!

hyesungoh

👍 👍 고생하셨습니다!!

pageExtensions 설정이랑 pages 하위 routes들 파일명만 원복해주시면 좋을 거 같아요 !

hyesungoh · 2023-05-12T08:39:06Z

next.config.js

  },
-  pageExtensions: ['page.tsx'],
  swcMinify: true,


요거 지우면 안돼요!

hyesungoh · 2023-05-12T08:42:55Z

src/pages/api/auth/[...nextauth].ts

요 파일 때문에 pageExtensions 지우셨으면 [...nextauth].page.ts 하면 되지 않을까 싶어요!

api route를 위 설정과 같이 써보진 않아서 확실하진 않아요 ...!

오..!!! 해보겠습니다!

흐엉 안되네욥..ㅠ

src/components/kakaoLoginButton/KakaoLogin.test.tsx

cloudflare-workers-and-pages · 2023-05-12T09:53:41Z

Deploying with Cloudflare Pages

Latest commit:	`fc978d4`
Status:	✅ Deploy successful!
Preview URL:	https://0bc93b73.na-lab.pages.dev
Branch Preview URL:	https://issue-44.na-lab.pages.dev

View logs

codecov-commenter · 2023-05-13T06:25:25Z

Codecov Report

Patch coverage: 100.00% and project coverage change: +0.44 🎉

Comparison is base (3890b83) 97.52% compared to head (fc978d4) 97.96%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #63      +/-   ##
==========================================
+ Coverage   97.52%   97.96%   +0.44%     
==========================================
  Files          17       29      +12     
  Lines         121      197      +76     
  Branches       23       33      +10     
==========================================
+ Hits          118      193      +75     
- Misses          3        4       +1

Impacted Files	Coverage Δ
...c/components/kakaoLoginButton/KakaoLoginButton.tsx	`100.00% <100.00%> (ø)`

... and 14 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

github-actions · 2023-05-13T06:25:35Z

Bundle Sizes

Compared against 25bf0fe

Route	Size (gzipped)	Diff
`/_app`	176.66 KB	+8.94 KB

Dynamic import: None found.

sjoleee

LGTM~

sjoleee · 2023-05-13T07:48:18Z

next.config.js

@@ -14,7 +14,7 @@ const nextConfig = {
    appDir: false,
    forceSwcTransforms: true,
  },
-  pageExtensions: ['page.tsx'],
+  pageExtensions: ['page.tsx', 'page.ts'],


sjoleee · 2023-05-13T07:49:52Z

src/pages/api/auth/[...nextauth].page.ts

+      clientId: process.env.KAKAO_CLIENT_ID,
+      clientSecret: process.env.KAKAO_CLIENT_SECRET,


NEXT_PUBLIC 프리픽스 없어도 작동하나유?!

네넹 되긴하던데 깔끔하게 붙여서 다시 올렸어유~

…ient into issue/44

hyesungoh · 2023-05-13T14:18:02Z

@oyeon-kwon 요거 배포 환경에서 안되는 것 해결하고 머지하면 좋을 거 같아요 !

그리고 (당장은 아니지만) 에러일 시 보여질 페이지도 ... 있어야될 거 같긴 합니다 ㅋㅋㅋ ㅠㅠ

oyeon-kwon · 2023-05-14T02:28:02Z

공식문서에 보면 vercel이나 netlify도 마찬가지로 랜덤url 생성되는 미리보기 배포가 있는데, 그래서 NEXTAUTH_URL을 안써도 된다고 나오더라구요!

근데 cloudflare에 대한 정보는 없길래 next-auth 레포에 질문 올려놨습니당
👉 nextauthjs/next-auth#7542

답변 오면 조치해볼게요!!

hyesungoh · 2023-05-14T05:20:55Z

공식문서에 보면 vercel이나 netlify도 마찬가지로 랜덤url 생성되는 미리보기 배포가 있는데, 그래서 NEXTAUTH_URL을 안써도 된다고 나오더라구요!

근데 cloudflare에 대한 정보는 없길래 next-auth 레포에 질문 올려놨습니당 👉 nextauthjs/next-auth#7542

답변 오면 조치해볼게요!!

https://next-auth.js.org/deployment#example

뭔가 이 예제처럼 preview 환경일 때 ... 를 따로 핸들링해줘야하나도 싶네요 🤔

oyeon-kwon · 2023-05-14T08:32:46Z

뭔가 이 예제처럼 preview 환경일 때 ... 를 따로 핸들링해줘야하나도 싶네요 🤔

실패... 주르륵

oyeon-kwon added 2 commits May 11, 2023 20:54

feat: next-auth kakao login

2dbbde7

feat: next auth kakao login 구현 및 테스트 코드 추가

648aeff

oyeon-kwon self-assigned this May 12, 2023

oyeon-kwon requested review from hyesungoh, sjoleee and sumi-0011 as code owners May 12, 2023 08:10

github-actions bot added the test: unit Generate or update unit test label May 12, 2023

hyesungoh requested changes May 12, 2023

View reviewed changes

hyesungoh reviewed May 12, 2023

View reviewed changes

src/components/kakaoLoginButton/KakaoLogin.test.tsx Outdated Show resolved Hide resolved

Update index.tsx

d3db6fe

oyeon-kwon and others added 2 commits May 12, 2023 18:54

Update KakaoLogin.test.tsx

db126e2

fix: page extension 추가

8977a44

oyeon-kwon and others added 5 commits May 13, 2023 15:33

fix: lint 수정

500e1bc

chore: fix lint

2a0b772

fix: storybook session-provider 사용

458e52a

chore: 환경 변수 타입 추가

4fd3914

test: mock fn 타입 설정

9b76c15

hyesungoh self-requested a review May 13, 2023 06:43

hyesungoh approved these changes May 13, 2023

View reviewed changes

hyesungoh added the feat New feature or request label May 13, 2023

sjoleee approved these changes May 13, 2023

View reviewed changes

oyeon-kwon added 2 commits May 13, 2023 20:32

Merge branch 'issue/44' of https://github.com/depromeet/13th-3team-cl…

ac9605c

…ient into issue/44

fix: env 변수명 변경

d394aa8

oyeon-kwon added 3 commits May 14, 2023 16:58

fix: cloudflare preview 환경에서 대응 가능하도록 처리

6d7e4bf

fix: 환경설정 타입 추가

e863953

fix: next-auth 재설치

68c0f04

oyeon-kwon added 4 commits May 20, 2023 15:21

Update index.page.tsx

a70196d

Update index.page.tsx

ae07a73

Update index.page.tsx

d585055

Update index.page.tsx

fc978d4

oyeon-kwon merged commit 74b53d4 into main May 20, 2023

oyeon-kwon deleted the issue/44 branch May 20, 2023 06:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next Auth 카카오 로그인 #63

Next Auth 카카오 로그인 #63

oyeon-kwon commented May 12, 2023 •

edited

Loading

hyesungoh commented May 12, 2023

hyesungoh left a comment

hyesungoh May 12, 2023

hyesungoh May 12, 2023

oyeon-kwon May 12, 2023

oyeon-kwon May 12, 2023

cloudflare-workers-and-pages bot commented May 12, 2023 •

edited

Loading

codecov-commenter commented May 13, 2023 •

edited

Loading

github-actions bot commented May 13, 2023 •

edited

Loading

sjoleee left a comment

sjoleee May 13, 2023

sjoleee May 13, 2023

oyeon-kwon May 13, 2023

hyesungoh commented May 13, 2023 •

edited

Loading

oyeon-kwon commented May 14, 2023

hyesungoh commented May 14, 2023

oyeon-kwon commented May 14, 2023

		clientId: process.env.KAKAO_CLIENT_ID,
		clientSecret: process.env.KAKAO_CLIENT_SECRET,

Next Auth 카카오 로그인 #63

Next Auth 카카오 로그인 #63

Conversation

oyeon-kwon commented May 12, 2023 • edited Loading

🤔 해결하려는 문제가 무엇인가요?

🎉 변경 사항

🙏 여기는 꼭 봐주세요!

사용 방법

🌄 스크린샷

📚 참고

hyesungoh commented May 12, 2023

hyesungoh left a comment

Choose a reason for hiding this comment

hyesungoh May 12, 2023

Choose a reason for hiding this comment

hyesungoh May 12, 2023

Choose a reason for hiding this comment

oyeon-kwon May 12, 2023

Choose a reason for hiding this comment

oyeon-kwon May 12, 2023

Choose a reason for hiding this comment

cloudflare-workers-and-pages bot commented May 12, 2023 • edited Loading

Deploying with Cloudflare Pages

codecov-commenter commented May 13, 2023 • edited Loading

Codecov Report

github-actions bot commented May 13, 2023 • edited Loading

Bundle Sizes

sjoleee left a comment

Choose a reason for hiding this comment

sjoleee May 13, 2023

Choose a reason for hiding this comment

sjoleee May 13, 2023

Choose a reason for hiding this comment

oyeon-kwon May 13, 2023

Choose a reason for hiding this comment

hyesungoh commented May 13, 2023 • edited Loading

oyeon-kwon commented May 14, 2023

hyesungoh commented May 14, 2023

oyeon-kwon commented May 14, 2023

oyeon-kwon commented May 12, 2023 •

edited

Loading

cloudflare-workers-and-pages bot commented May 12, 2023 •

edited

Loading

codecov-commenter commented May 13, 2023 •

edited

Loading

github-actions bot commented May 13, 2023 •

edited

Loading

hyesungoh commented May 13, 2023 •

edited

Loading