From e1ac4ad5bbbc0ba76cedf1554a1f4e90087c7238 Mon Sep 17 00:00:00 2001
From: Miryang <miryang.dev@gmail.com>
Date: Tue, 23 Jul 2024 00:28:04 +0900
Subject: [PATCH] docs: Add Using Kakao Login JS SDK (#21906)

* docs: Add Using Kakao Login JS SDK

* Update apps/docs/content/guides/auth/social-login/auth-kakao.mdx

Co-authored-by: Joel Lee <lee.yi.jie.joel@gmail.com>

* Update apps/docs/content/guides/auth/social-login/auth-kakao.mdx

Co-authored-by: Joel Lee <lee.yi.jie.joel@gmail.com>

* Update apps/docs/content/guides/auth/social-login/auth-kakao.mdx

Co-authored-by: Joel Lee <lee.yi.jie.joel@gmail.com>

* Update apps/docs/content/guides/auth/social-login/auth-kakao.mdx

Co-authored-by: Joel Lee <lee.yi.jie.joel@gmail.com>

* format

---------

Co-authored-by: Joel Lee <lee.yi.jie.joel@gmail.com>
---
 .../guides/auth/social-login/auth-kakao.mdx   | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/apps/docs/content/guides/auth/social-login/auth-kakao.mdx b/apps/docs/content/guides/auth/social-login/auth-kakao.mdx
index b9972537e4b..cb1715c992a 100644
--- a/apps/docs/content/guides/auth/social-login/auth-kakao.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-kakao.mdx
@@ -158,6 +158,51 @@ suspend fun signOut() {
 </TabPanel>
 </Tabs>
 
+## Using Kakao Login JS SDK
+
+[Kakao Login JS SDK](https://developers.kakao.com/docs/latest/en/kakaologin/js) is an official Kakao SDK for authenticating Kakao users on websites.
+
+Exchange the [authorization code returned by Kakao API](https://developers.kakao.com/docs/latest/en/kakaologin/rest-api#request-code) for an [ID Token](https://developers.kakao.com/docs/latest/en/kakaologin/common#login-with-oidc).
+
+For example, this code shows a how to get ID Token:
+
+```
+const requestUrl = new URL(request.url);
+const code = requestUrl.searchParams.get('code');
+
+if (code) {
+  const res = await fetch('https://kauth.kakao.com/oauth/token', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+    },
+    body: new URLSearchParams({
+      grant_type: 'authorization_code',
+      client_id: '<CLIENT_ID>',
+      redirect_uri: '<url>/api/auth/kakao/oidc',
+      code,
+      client_secret: '<CLIENT_SECRET>',
+    }),
+  });
+
+  const {id_token} = await res.json();
+}
+```
+
+Use the ID Token to sign in:
+
+```
+const res = await auth.signInWithIdToken({
+  provider: 'kakao',
+  token: id_token,
+});
+```
+
+### Configuration
+
+1. Set 'State' to 'ON' under [OpenID Connect Activation](https://developers.kakao.com/docs/latest/en/kakaologin/prerequisite#activate-oidc) on Kakao Developers portal Application Dashboard.
+2. Add `openid` to [scope](https://developers.kakao.com/docs/latest/en/kakaologin/common#additional-consent-scope) along with the scope values you wish to obtain consent for.
+
 ## Resources
 
 - [Kakao Developers Portal](https://developers.kakao.com).