コンテンツにスキップ
NextAuth.js v4 からの移行ですか? 移行ガイドをお読みください.

Kakaoプロバイダー

リソース

セットアップ

コールバックURL

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

環境変数

AUTH_KAKAO_ID
AUTH_KAKAO_SECRET

設定

https://developers.kakao.com/console/appでプロバイダーとKakaoアプリケーションを作成します。アプリケーションの設定のKakaoログインで、Webアプリケーションをアクティブにし、同意項目を変更し、コールバックURLを設定します。

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

注意

  • クレデンシャルを作成する際に使用する「認証済みリダイレクトURI」には、上記のコールバックパスで終わる完全なドメインを含める必要があります。

스크린샷 2023-11-28 오후 9 27 41

  • 本番環境の場合: https://{YOUR_DOMAIN}/api/auth/callback/kakao

  • 開発環境の場合: https://#:3000/api/auth/callback/kakao

  • Kakaoのクライアントキーは、Summary(韓国語では요약정보と表記)タブのApp Keys Fieldにあります(マイアプリケーション > アプリケーション設定 > Summary)。

스크린샷 2023-11-28 오후 9 47 17

  • KakaoのclientSecretキーは、Security(韓国語では보안と表記)タブのApp Keys Fieldにあります(マイアプリケーション > 製品設定 > Kakaoログイン > Security)。

스크린샷 2023-11-28 오후 9 38 25

  • Kakaoの開発者コンソールには、右上隅にKRからENGに変更するボタンがあります。
Auth.js © Balázs Orbán and Team -2024