Merge pull request #14287 from hwr12/master

docs: add Kakao Auth docs

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',

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',

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.
+
+![Kakao Developers Portal.](/docs/img/guides/auth-kakao/kakao-developers-page.png)
+
+## 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
+
+<SocialProviderSetup provider="Kakao" />- 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
+
+![Consent items needs to be set.](/docs/img/guides/auth-kakao/kakao-developers-consent-items-set.png)
+
+## Add your OAuth credentials to Supabase
+
+<SocialProviderSettingsSupabase provider="Kakao" />
+
+## 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 }) => <Layout meta={meta} children={children} />
+
+export default Page

apps/docs/public/img/icons/kakao-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 256 256"><path fill="#FFE812" d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z"/><path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z"/><path fill="#FFE812" d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z"/></svg>