Kakao OAuth setup overview
Kakao OAuth setup consists of six steps: create and configure an app in the Kakao Developers Portal, obtain a REST API key (which serves as the client_id), obtain a Kakao Login Client Secret code (which serves as the client_secret), configure additional settings in the Kakao Developers Portal, add client_id and client_secret to your Supabase Project, and add login code to your Supabase JS Client App.
Kakao REST API key location
The REST API key is found in the Kakao Developers Portal under App Settings > App > Platform Key. This key serves as the client_id for authentication.
Kakao client secret location and activation
The Kakao Login Client Secret code is found in the Kakao Developers Portal under App Settings > App > Platform Key after clicking on the REST API key. This serves as the client_secret. You must activate the Kakao Login Client Secret for it to work.
Kakao Login redirect URI configuration
To add a callback URL in Kakao, go to App Settings > App > Platform Key, click on the REST API key, and enter the callback URL in the Kakao Login Redirect URI field, then click Save.
Kakao Login enablement setting
In the Kakao Developers Portal, go to Product Settings > Kakao Login > General and set State to ON in the Usage settings section to enable Kakao Login.
Kakao required consent items scopes
The following scopes should be set under Product Settings > Kakao Login > Consent Items: profile_image, profile_nickname, and account_email (optional). If account_email is not available for your app, you can omit it and enable Allow users without an email in the Supabase Kakao provider settings.
Kakao account_email availability for Biz Apps
The account_email consent item in the Kakao Developers Portal is only available for apps registered as Biz Apps. To convert an app to a Biz App, go to App Settings > App > General and complete the required fields in the Business Information section.
Kakao signInWithOAuth JavaScript example
import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
async function signInWithKakao() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'kakao',
})
}
Kakao signInWithOAuth Flutter example
Future<void> signInWithKakao() async {
await supabase.auth.signInWithOAuth(
OAuthProvider.kakao,
redirectTo: kIsWeb ? null : 'my.scheme://my-host',
authScreenLaunchMode: kIsWeb ? LaunchMode.platformDefault : LaunchMode.externalApplication,
);
}
Kakao signInWithOAuth Kotlin example
suspend fun signInWithKakao() {
supabase.auth.signInWith(Kakao)
}
Kakao signInWithOAuth C# example
var state = await supabase.Auth.SignIn(Provider.Kakao);
var signInUrl = state.Uri;
Kakao signOut JavaScript example
async function signOut() {
const { error } = await supabase.auth.signOut()
}
Kakao signOut Flutter example
Future<void> signOut() async {
await supabase.auth.signOut();
}
Kakao signOut Kotlin example
suspend fun signOut() {
supabase.auth.signOut()
}
Kakao signOut C# example
await supabase.Auth.SignOut();
Kakao Login JS SDK ID Token exchange
To exchange an authorization code returned by Kakao API for an ID Token, make a POST request to https://kauth.kakao.com/oauth/token with grant_type set to authorization_code, client_id, redirect_uri, code, and client_secret in the body with Content-Type application/x-www-form-urlencoded;charset=utf-8. The response will contain the id_token.
Kakao Login JS SDK ID Token exchange code example
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();
}
Kakao signInWithIdToken using Kakao JS SDK
const res = await auth.signInWithIdToken({
provider: 'kakao',
token: id_token,
});
Kakao OpenID Connect configuration
To use Kakao Login JS SDK with OpenID Connect, set State to ON under OpenID Connect Activation in the Kakao Developers portal, and add openid to the scope along with other scope values you wish to obtain consent for.