diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 6dbec8a0a36..07a43a57d9e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -349,6 +349,11 @@ export const SocialLoginItems = [
icon: '/docs/img/icons/discord-icon',
url: '/guides/auth/social-login/auth-discord',
},
+ {
+ name: 'Kakao',
+ icon: '/docs/img/icons/kakao-icon',
+ url: '/guides/auth/social-login/auth-kakao',
+ },
{
name: 'Keycloak',
icon: '/docs/img/icons/keycloak-icon',
diff --git a/apps/docs/data/authProviders.ts b/apps/docs/data/authProviders.ts
index a1053a30772..9694f1daf12 100644
--- a/apps/docs/data/authProviders.ts
+++ b/apps/docs/data/authProviders.ts
@@ -79,6 +79,16 @@ const authProviders = [
selfHosted: true,
authType: 'social',
},
+ {
+ name: 'Kakao',
+ logo: '/docs/img/icons/kakao-icon',
+ href: '/guides/auth/social-login/auth-kakao',
+ official: true,
+ supporter: 'Supabase',
+ platform: true,
+ selfHosted: true,
+ authType: 'social',
+ },
{
name: 'Keycloak',
logo: '/docs/img/icons/keycloak-icon',
diff --git a/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx b/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
new file mode 100644
index 00000000000..1df2e70172c
--- /dev/null
+++ b/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
@@ -0,0 +1,97 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'auth-kakao',
+ title: 'Login with Kakao',
+ description: 'Add Kakao OAuth to your Supabase project',
+}
+
+To enable Kakao Auth for your project, you need to set up an Kakao OAuth application and add the application credentials to your Supabase Dashboard.
+
+## Overview
+
+Kakao OAuth consists of six broad steps:
+
+- Create and configure your app in the [Kakao Developer Portal](https://developers.kakao.com).
+- Obtaining a `REST API key` - this will serve as the `client_id`.
+- Generating the `Client secret code` - this will serve as the `client_secret`.
+- Additional configurations on Kakao Developers Portal.
+- Add your `client id` and `client secret` keys to your [Supabase Project](https://app.supabase.com).
+- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
+
+## Access your Kakao Developer account
+
+- Go to [Kakao Developers Portal](https://developers.kakao.com).
+- Click on `Login` at the top right to log in.
+
+
+
+## Create and configure your app
+
+- Go to `My Application`.
+- Click on `Add an application` at the top.
+- Fill out your app information:
+ - App icon.
+ - App name.
+ - Company name.
+- Click `Save` at the bottom right.
+
+## Obtain a REST API key
+
+This will serve as the `client_id` when you make API calls to authenticate the user.
+
+- Go to `My Application`.
+- Click on your app.
+- You will be redirected to `Summary` tab of your app.
+- In the `App Keys` section you will see `REST API key` -- this ID will become your `client_id` later.
+
+## Find your callback URL
+
+- To add callback URL on Kakao, go to `Product settings` >
+`Kakao Login` > `Redirect URI`.
+
+## Generate and activate a `client_secret`
+
+- Go to `Product settings` > `Kakao Login` > `Security`.
+- Click on the `Kakao Login` switch to enable Kakao Login.
+- Click on `generate code` at the bottom to generate the `Client secret code` -- this will serve as a `client_secret` for your supabase project.
+- Make sure you enabled `Client sercet code` by selecting `enable` from the `Activation state` section.
+
+## Additional configurations on Kakao Developers Portal
+
+- Make sure the Kakao Login is enabled in the `Kakao Login` tab.
+- Set following scopes under the "Consent Items": account_email, profile_image, profile_nickname
+
+
+
+## Add your OAuth credentials to Supabase
+
+
+
+## Add login code to your client app
+
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `kakao` as the `provider`:
+
+```js
+async function signInWithKakao() {
+ const { data, error } = await supabase.auth.signInWithOAuth({
+ provider: 'kakao',
+ })
+}
+```
+
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
+
+```js
+async function signout() {
+ const { error } = await supabase.auth.signOut()
+}
+```
+
+## Resources
+
+- [Kakao Developers Portal](https://developers.kakao.com).
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/public/img/guides/auth-kakao/kakao-developers-consent-items-set.png b/apps/docs/public/img/guides/auth-kakao/kakao-developers-consent-items-set.png
new file mode 100644
index 00000000000..b59c4616984
Binary files /dev/null and b/apps/docs/public/img/guides/auth-kakao/kakao-developers-consent-items-set.png differ
diff --git a/apps/docs/public/img/guides/auth-kakao/kakao-developers-page.png b/apps/docs/public/img/guides/auth-kakao/kakao-developers-page.png
new file mode 100644
index 00000000000..81d30550eb6
Binary files /dev/null and b/apps/docs/public/img/guides/auth-kakao/kakao-developers-page.png differ
diff --git a/apps/docs/public/img/icons/kakao-icon.svg b/apps/docs/public/img/icons/kakao-icon.svg
new file mode 100644
index 00000000000..e721ec2b432
--- /dev/null
+++ b/apps/docs/public/img/icons/kakao-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file