Login with Kakao

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:

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.

The next step requires a callback URL, which looks like this: https://<project-ref>.supabase.co/auth/v1/callback

Go to your Supabase Project Dashboard
Click on the Authentication icon in the left sidebar
Click on Providers under the Configuration section
Click on Kakao from the accordion list to expand and you'll find your Redirect URL, you can click Copy to copy it to the clipboard

- To add callback URL on Kakao, go to Product settings > Kakao Login > Redirect URI.

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.

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

Go to your Supabase Project Dashboard
In the left sidebar, click the Authentication icon (near the top)
Click on Providers under the Configuration section
Click on Kakao from the accordion list to expand and turn Kakao Enabled to ON
Enter your Kakao Client ID and Kakao Client Secret saved in the previous step
Click Save

When your user signs in, call signInWithOAuth() with kakao as the provider:

async function signInWithKakao() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'kakao',
  })
}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

async function signOut() {
  const { error } = await supabase.auth.signOut()
}