From 688025c708528fe1adf81a3d33243c2aecedf368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=EC=A0=95=EC=9A=B0?=
<88191233+jw-r@users.noreply.github.com>
Date: Wed, 24 Apr 2024 02:35:28 +0900
Subject: [PATCH] feat: implement base code for kakao oauth (#4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* chore: install next-auth
* feat: 기본 로그인 페이지 구현
* feat: oauth base code 작성
* fix: 불필요한 조건 분기문 제거
---
cspell.json | 2 +-
package-lock.json | 134 +++++++++++++++++++++++-
package.json | 1 +
public/icons/kakao.svg | 3 +
src/app/api/auth/[...nextauth]/route.ts | 45 ++++++++
src/app/signin/page.tsx | 21 ++++
6 files changed, 203 insertions(+), 3 deletions(-)
create mode 100644 public/icons/kakao.svg
create mode 100644 src/app/api/auth/[...nextauth]/route.ts
create mode 100644 src/app/signin/page.tsx
diff --git a/cspell.json b/cspell.json
index 29181fc4..5c7509cc 100644
--- a/cspell.json
+++ b/cspell.json
@@ -3,5 +3,5 @@
"language": "en",
"ignorePaths": ["node_modules", ".next", "*.js", "*.json", "*.html", "*.css", "*.md", "*.svg"],
"files": ["src/**/*.tsx", "src/**/*.ts"],
- "words": ["picktoss"]
+ "words": ["picktoss", "kakao", "nextauth"]
}
diff --git a/package-lock.json b/package-lock.json
index 8e2dffbc..b22582f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
"clsx": "^2.1.0",
"lucide-react": "^0.367.0",
"next": "14.1.4",
+ "next-auth": "^4.24.7",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.2.2",
@@ -872,6 +873,14 @@
"node": ">= 8"
}
},
+ "node_modules/@panva/hkdf": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.1.1.tgz",
+ "integrity": "sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==",
+ "funding": {
+ "url": "https://github.com/sponsors/panva"
+ }
+ },
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1894,6 +1903,14 @@
"url": "https://github.com/yeoman/configstore?sponsor=1"
}
},
+ "node_modules/cookie": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+ "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/core-util-is": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -4222,6 +4239,14 @@
"jiti": "bin/jiti.js"
}
},
+ "node_modules/jose": {
+ "version": "4.15.5",
+ "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.5.tgz",
+ "integrity": "sha512-jc7BFxgKPKi94uOvEmzlSWFFe2+vASyXaKUpdQKatWAESU2MWjDfFf0fdfc83CDKcA5QecabZeNLyfhe3yKNkg==",
+ "funding": {
+ "url": "https://github.com/sponsors/panva"
+ }
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4518,6 +4543,33 @@
}
}
},
+ "node_modules/next-auth": {
+ "version": "4.24.7",
+ "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.7.tgz",
+ "integrity": "sha512-iChjE8ov/1K/z98gdKbn2Jw+2vLgJtVV39X+rCP5SGnVQuco7QOr19FRNGMIrD8d3LYhHWV9j9sKLzq1aDWWQQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.20.13",
+ "@panva/hkdf": "^1.0.2",
+ "cookie": "^0.5.0",
+ "jose": "^4.15.5",
+ "oauth": "^0.9.15",
+ "openid-client": "^5.4.0",
+ "preact": "^10.6.3",
+ "preact-render-to-string": "^5.1.19",
+ "uuid": "^8.3.2"
+ },
+ "peerDependencies": {
+ "next": "^12.2.5 || ^13 || ^14",
+ "nodemailer": "^6.6.5",
+ "react": "^17.0.2 || ^18",
+ "react-dom": "^17.0.2 || ^18"
+ },
+ "peerDependenciesMeta": {
+ "nodemailer": {
+ "optional": true
+ }
+ }
+ },
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -4568,6 +4620,11 @@
"node": ">=0.10.0"
}
},
+ "node_modules/oauth": {
+ "version": "0.9.15",
+ "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
+ "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA=="
+ },
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4700,6 +4757,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/oidc-token-hash": {
+ "version": "5.0.3",
+ "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz",
+ "integrity": "sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==",
+ "engines": {
+ "node": "^10.13.0 || >=12.0.0"
+ }
+ },
"node_modules/once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4709,6 +4774,39 @@
"wrappy": "1"
}
},
+ "node_modules/openid-client": {
+ "version": "5.6.5",
+ "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.6.5.tgz",
+ "integrity": "sha512-5P4qO9nGJzB5PI0LFlhj4Dzg3m4odt0qsJTfyEtZyOlkgpILwEioOhVVJOrS1iVH494S4Ee5OCjjg6Bf5WOj3w==",
+ "dependencies": {
+ "jose": "^4.15.5",
+ "lru-cache": "^6.0.0",
+ "object-hash": "^2.2.0",
+ "oidc-token-hash": "^5.0.3"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/panva"
+ }
+ },
+ "node_modules/openid-client/node_modules/lru-cache": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+ "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+ "dependencies": {
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/openid-client/node_modules/object-hash": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+ "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/optionator": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -5005,6 +5103,26 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
+ "node_modules/preact": {
+ "version": "10.20.2",
+ "resolved": "https://registry.npmjs.org/preact/-/preact-10.20.2.tgz",
+ "integrity": "sha512-S1d1ernz3KQ+Y2awUxKakpfOg2CEmJmwOP+6igPx6dgr6pgDvenqYviyokWso2rhHvGtTlWWnJDa7RaPbQerTg==",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/preact"
+ }
+ },
+ "node_modules/preact-render-to-string": {
+ "version": "5.2.6",
+ "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
+ "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+ "dependencies": {
+ "pretty-format": "^3.8.0"
+ },
+ "peerDependencies": {
+ "preact": ">=10"
+ }
+ },
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5029,6 +5147,11 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
+ "node_modules/pretty-format": {
+ "version": "3.8.0",
+ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+ "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="
+ },
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6023,6 +6146,14 @@
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
+ "node_modules/uuid": {
+ "version": "8.3.2",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+ "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+ "bin": {
+ "uuid": "dist/bin/uuid"
+ }
+ },
"node_modules/vscode-languageserver-textdocument": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.11.tgz",
@@ -6254,8 +6385,7 @@
"node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
- "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
- "dev": true
+ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
},
"node_modules/yaml": {
"version": "2.4.1",
diff --git a/package.json b/package.json
index 514aea75..e5c87af6 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"clsx": "^2.1.0",
"lucide-react": "^0.367.0",
"next": "14.1.4",
+ "next-auth": "^4.24.7",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.2.2",
diff --git a/public/icons/kakao.svg b/public/icons/kakao.svg
new file mode 100644
index 00000000..94558239
--- /dev/null
+++ b/public/icons/kakao.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/app/api/auth/[...nextauth]/route.ts b/src/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 00000000..b4ab5703
--- /dev/null
+++ b/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,45 @@
+import type { Account, DefaultSession } from 'next-auth'
+import NextAuth from 'next-auth/next'
+import KakaoProvider from 'next-auth/providers/kakao'
+
+declare module 'next-auth' {
+ interface Session {
+ user: {
+ id: string
+ accessToken: string
+ account: Account
+ } & DefaultSession['user']
+ }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const handler = NextAuth({
+ providers: [
+ KakaoProvider({
+ clientId: process.env.AUTH_KAKAO_ID!,
+ clientSecret: process.env.AUTH_KAKAO_SECRET!,
+ }),
+ ],
+ secret: process.env.NEXTAUTH_SECRET!,
+ callbacks: {
+ jwt: ({ token, account }) => {
+ /**
+ * TODO: Backend API 호출 with account.access_token
+ */
+ token.accessToken = 'backend api access token'
+ token.account = account
+
+ return token
+ },
+
+ session: ({ session, token }) => {
+ session.user.id = token.sub || ''
+ session.user.accessToken = token.accessToken as string
+ session.user.account = token.account as Account
+
+ return session
+ },
+ },
+})
+
+export { handler as GET, handler as POST }
diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx
new file mode 100644
index 00000000..2b19b1e8
--- /dev/null
+++ b/src/app/signin/page.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { signIn } from 'next-auth/react'
+import { Button } from '@/components/ui/button'
+import Image from 'next/image'
+
+export default function SignIn() {
+ return (
+
+
+
+
+
+ )
+}