Kakao Provider

Resources

• Kakao OAuth documentation
• Kakao OAuth configuration

Setup

Callback URL

https://example.com/api/auth/callback/kakao

https://example.com/auth/callback/kakao

https://example.com/auth/callback/kakao

Environment Variables

AUTH_KAKAO_ID
AUTH_KAKAO_SECRET

Configuration

Create a provider and a Kakao application at https://developers.kakao.com/console/app. In the settings of the app under Kakao Login, activate web app, change consent items and configure callback URL.

import NextAuth from "next-auth"
import Kakao from "next-auth/providers/kakao"
 
export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [Kakao],
})

import { QwikAuth$ } from "@auth/qwik"
import Kakao from "@auth/qwik/providers/kakao"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [Kakao],
  })
)

import { SvelteKitAuth } from "@auth/sveltekit"
import Kakao from "@auth/sveltekit/providers/kakao"
 
export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [Kakao],
})

import { ExpressAuth } from "@auth/express"
import Kakao from "@auth/express/providers/kakao"
 
app.use("/auth/*", ExpressAuth({ providers: [Kakao] }))

Notes

• The “Authorized redirect URIs” used when creating the credentials must include your full domain and end in the callback path as shown above.

• For production: https://{YOUR_DOMAIN}/api/auth/callback/kakao

• For development: http://localhost:3000/api/auth/callback/kakao

• Kakao’s client key is in Summary(It is written as 요약정보 in Korean.) tab’s App Keys Field (My Application > App Settings > Summary)

• Kakao’s clientSecret key is in Security(It is written as 보안 in Korean.) tab’s App Keys Field (My Application > Product Settings > Kakao Login > Security)

• Kakao dev console has a button at the top right to change from KR to ENG