Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add native sign in for Kakao with OIDC #25981

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+163 −93
Open

feat: Add native sign in for Kakao with OIDC #25981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf42427
feat: add EXTERNAL_KAKAO_NATIVE_APP_KEY for Kakao native app sign in.
nectarine May 10, 2024
6833d73
feat: add docs for native Kakao signin with OIDC
nectarine May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
244 changes: 152 additions & 92 deletions apps/docs/content/guides/auth/social-login/auth-kakao.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
---
id: 'auth-kakao'
title: 'Login with Kakao'
description: 'Add Kakao OAuth to your Supabase project'
description: 'Use Sign in with Kakao on the web and native apps'
---

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.
Supabase Auth supports Sign in with Kakao on the web, native Android or iOS apps.

## Overview

Kakao OAuth consists of six broad steps:
To support Sign in with Kakao you need to configure the [Kakao provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project.
There are two general ways to use Sign in with Kakao, depending on the application you're building:

- 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://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
- Sign in on the web, in web-based apps, or even in native apps(this will open a web browser).
- Using an OAuth flow initiated by Supabase Auth using [Kakao Login - REST API](https://developers.kakao.com/docs/latest/en/kakaologin/rest-api).
- Sign in native Android or iOS apps.
- Using an OpenID Connect. You need to pass the `id_token` from Kakao to `supabase.auth.signInWithIdToken()`.

## Access your Kakao Developer account

Expand All @@ -29,111 +28,172 @@ Kakao OAuth consists of six broad steps:
- Go to `My Application`.
- Click on `Add an application` at the top.
- Fill out your app information:
- App icon.
- App name.
- Company name.
- 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 secret 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

<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">

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',
})
}
```

</TabPanel>
<TabPanel id="kotlin" label="Kotlin">

When your user signs in, call [signInWith(Provider)](/docs/reference/kotlin/auth-signinwithoauth) with `Kakao` as the `Provider`:

```kotlin
suspend fun signInWithKakao() {
supabase.auth.signInWith(Kakao)
}
```

</TabPanel>
</Tabs>

<OAuthPkceFlow />

<Tabs
scrollable
size="small"
size="large"
type="underlined"
defaultActiveId="js"
queryGroup="language"
defaultActiveId="web"
queryGroup="platform"
>
<TabPanel id="js" label="JavaScript">

When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
<TabPanel id="web" label="Web">
## Obtain a REST API key from your kakao app

```js
async function signOut() {
const { error } = await supabase.auth.signOut()
}
```
This will serve as the `client_id` when you make API calls to authenticate the user.

</TabPanel>
<TabPanel id="kotlin" label="Kotlin">
- 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.

When your user signs out, call [logout()](/docs/reference/kotlin/auth-signout) to remove them from the browser session and any objects from localStorage:
## Find your callback URL

```kotlin
suspend fun signOut() {
supabase.auth.signOut()
}
```
<SocialProviderSetup provider="Kakao" />

</TabPanel>
- 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 secret code` by selecting `enable` from the `Activation state` section.

## Add your OAuth credentials to Supabase

<SocialProviderSettingsSupabase provider="Kakao" />

## Add login code to your client app

<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">

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',
})
}
```

</TabPanel>
<TabPanel id="kotlin" label="Kotlin">

When your user signs in, call [signInWith(Provider)](/docs/reference/kotlin/auth-signinwithoauth) with `Kakao` as the `Provider`:

```kotlin
suspend fun signInWithKakao() {
supabase.auth.signInWith(Kakao)
}
```

</TabPanel>
</Tabs>

<OAuthPkceFlow />

<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="js"
queryGroup="language"
>
<TabPanel id="js" label="JavaScript">

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()
}
```

</TabPanel>
<TabPanel id="kotlin" label="Kotlin">

When your user signs out, call [logout()](/docs/reference/kotlin/auth-signout) to remove them from the browser session and any objects from localStorage:

```kotlin
suspend fun signOut() {
supabase.auth.signOut()
}
```

</TabPanel>
</Tabs>

</TabPanel>
<TabPanel id="native" label="Native">
## Obtain a Native app key from your kakao app
This will be used as the `audience` with OpenId Connect.
- 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 `Native app key`

## Add your Native app key to Supabase
- Go to your [Supabase Project Dashboard](https://supabase.com/dashboard)
- Go to `Authentication` > `Configuration` > `Providers` > `Kakao`
- Add your `Native app key` to the `Native App Key` field.
- Click `Save`

## Add login code to your client app
<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="flutter"
queryGroup="language"
>
<TabPanel id="flutter" label="Flutter">

```dart
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

signInWithKakao() async {
var isKakaoInstalled = await isKakaoTalkInstalled();
OAuthToken token;
if (isKakaoInstalled) {
token = await UserApi.instance.loginWithKakaoTalk();
} else {
token = await UserApi.instance.loginWithKakaoAccount();
}
await supabase.auth.signInWithIdToken(provider: OAuthProvider.kakao, idToken: token.idToken!);
}

```
</TabPanel>
</Tabs>

</TabPanel>
</Tabs>

## Resources

- [Kakao Developers Portal](https://developers.kakao.com).

5 changes: 5 additions & 0 deletions apps/studio/components/interfaces/Auth/AuthProvidersFormValidation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -939,6 +939,11 @@ const EXTERNAL_PROVIDER_KAKAO = {
title: 'REST API Key',
type: 'string',
},
EXTERNAL_KAKAO_NATIVE_APP_KEY: {
title: 'Native App Key',
descriptionOptional: 'Optional',
type: 'string',
},
// [TODO] Update docs
EXTERNAL_KAKAO_SECRET: {
title: 'Client Secret Code',
Expand Down
1 change: 1 addition & 0 deletions apps/studio/pages/api/auth/[ref]/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
EXTERNAL_GOOGLE_SECRET: null,
EXTERNAL_KAKAO_ENABLED: external?.kakao ?? false,
EXTERNAL_KAKAO_CLIENT_ID: null,
EXTERNAL_KAKAO_NATIVE_APP_KEY: null,
EXTERNAL_KAKAO_SECRET: null,
EXTERNAL_KEYCLOAK_ENABLED: external?.keycloak ?? false,
EXTERNAL_KEYCLOAK_CLIENT_ID: null,
Expand Down
6 changes: 5 additions & 1 deletion packages/api-types/types/api.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2213,6 +2213,7 @@ export interface components {
EXTERNAL_GOOGLE_SKIP_NONCE_CHECK: boolean
EXTERNAL_KAKAO_ENABLED: boolean
EXTERNAL_KAKAO_CLIENT_ID: string
EXTERNAL_KAKAO_NATIVE_APP_KEY: string
EXTERNAL_KAKAO_SECRET: string
EXTERNAL_KEYCLOAK_ENABLED: boolean
EXTERNAL_KEYCLOAK_CLIENT_ID: string
Expand Down Expand Up @@ -2375,6 +2376,7 @@ export interface components {
EXTERNAL_GOOGLE_SKIP_NONCE_CHECK?: boolean
EXTERNAL_KAKAO_ENABLED?: boolean
EXTERNAL_KAKAO_CLIENT_ID?: string
EXTERNAL_KAKAO_NATIVE_APP_KEY?: string
EXTERNAL_KAKAO_SECRET?: string
EXTERNAL_KEYCLOAK_ENABLED?: boolean
EXTERNAL_KEYCLOAK_CLIENT_ID?: string
Expand Down Expand Up @@ -5319,8 +5321,9 @@ export interface components {
external_google_enabled: boolean | null
external_google_secret: string | null
external_google_skip_nonce_check: boolean | null
external_kakao_client_id: string | null
external_kakao_enabled: boolean | null
external_kakao_client_id: string | null
external_kakao_native_app_key: string | null
external_kakao_secret: string | null
external_keycloak_client_id: string | null
external_keycloak_enabled: boolean | null
Expand Down Expand Up @@ -5567,6 +5570,7 @@ export interface components {
external_google_skip_nonce_check?: boolean
external_kakao_enabled?: boolean
external_kakao_client_id?: string
external_kakao_native_app_key?: string
external_kakao_secret?: string
external_keycloak_enabled?: boolean
external_keycloak_client_id?: string
Expand Down