作成日: 2024-2-12
更新日: 2024-8-5
NextAuth.jsとは、Next.jsで使うことができるオープンソースの認証に関するパッケージです。
NextAuth.jsでは、認証に関して以下の機能をサポートしています。
NextAuth.jsを使うことで認証周りのセキュリティレベルを高めることができます。
最近はNext.jsだけでなくSveltekitははじめとして多くのフレームワークでも利用することができます。
※Next.js以外のフレームワークについては、Auth.jsというパッケージを利用することになります。
OpenAI社が開発しているChatGPTの認証でもNextAuth.jsが使われています。
ChatGPTにログインした後に、デベロッパーズコンソールのアプリケーションタブからCookieの中身を確認することができます。
Cookieの中には、NextAuth.jsで設定される値がセットされています。
Auth0は、アプリケーションの認証と認可を管理するためのクラウドベースのサービスを提供するプラットフォームです。
開発者が安全な認証機能を迅速に実装できるように設計されており、ウェブ、モバイル、IoT、サーバーレスアプリケーションなど、あらゆる種類のアプリケーションに対応しています。
Auth0は、ユーザー管理、ログイン、パスワードレス認証、マルチファクタ認証(MFA)、ソーシャルログインなど、幅広い認証オプションをサポートしています。
ユニバーサルログインとは、Auth0を認証サーバとして使うことができる機能です。
具体的には、Auth0で用意したログイン画面にリダイレクトさせてユーザ認証を行い、認証された後に再度アプリケーションにリダイレクトする感じです。
再登場ですが、ChatGPTでもAuth0のユニバーサルログインを使っていると思います。たぶん。
以下はChatGPTのログイン画面になります。
URLはhttps://chat.openai.com/auth/loginとなっています。
この画面においてログインボタンをクリックすると、ログイン画面に遷移します。
この時のURLはhttps://auth0.openai.com/u/loginになります。
遷移画面がAuth0のユニバーサルログインを利用したログインページになります。
この画面で認証処理を行なったユーザがChatGPTユーザとしてログインすることができます。
ユニバーサルログインを利用すると以下のメリットがあります。
ログイン画面等の実装を省略することができるので、機能開発に集中することができます。
またBot対策をはじめとしたセキュリティ対策についても設定可能です。
Auth0に会員登録をすれば、デフォルトで利用できるようになっています。
ただしApplication作成の必要があります。
ログイン後画面の左側メニューバーからApplicationsを選択します
画面右側にあるCreate Applicationボタンをクリックします。
Nameは適当で大丈夫です。Application TypeはRegular Web Applicationsを選択してください。
一旦、Auth0での作業は終了です。
以下コマンドで最新バージョンのNext.jsの初期アプリケーションを作成することができます。
※検証時の最新バージョンはNext.js14.1になります。
$ npx create-next-app@latest .
? Would you like to use TypeScript? › No / Yes
? Would you like to use ESLint? › No / Yes
? Would you like to use Tailwind CSS? › No / Yes
? Would you like to use `src/` directory? › No / Yes
? Would you like to use App Router? (recommended) › No / Yes
? Would you like to customize the default import alias (@/*)? › No / Yes
回答についてはデフォルトで選択されているものでも問題ありません。
以下コマンドでNextAuth.jsをインストールすることができます。
$ npm install next-auth
App Routerを使う場合は、appディレクトリ配下に/api/auth/[...nextauth]/route.tsファイルを作成します。
https://next-auth.js.org/configuration/initialization#route-handlers-app
import NextAuth from "next-auth"
import Auth0 from "next-auth/providers/auth0"
const handler = NextAuth({
providers: [
Auth0(
{
clientId: process.env.AUTH0_CLIENT_ID ?? '',
clientSecret: process.env.AUTH0_CLIENT_SECRET ?? '',
issuer: process.env.AUTH0_ISSUER ?? '',
}
),
]
})
export { handler as GET, handler as POST }
最低限の設定は以上です。
Auth0のClientId、Client Secret、issuerをルートディレクトリ配下にあるenv.localに環境変数を設定します。
Auth0にログインしてApplicationsメニューから作成したApplicationを選択します。
Basic Informationを確認します。
Client ID、Client Secretはそのままコピペすれば大丈夫です。
issuerについては、Domain情報にhttps://を先頭につけたものになります。
AUTH0_CLIENT_ID=hoge
AUTH0_CLIENT_SECRET=huga
AUTH0_ISSUER=https://poyo.auth0.jp
Allowed Callback URLsにhttp://localhost:3000/api/auth/callback/auth0
を追加します。
右下にあるSave Changesボタンをクリックします。
まずbuildできることを確認してください。
$ npm run build
buildが問題なければ、localサーバを起動します。
$ npm run dev
localサーバが立ち上がったら/api/auth/signinにアクセスします。
Sign in with Auth0をクリックします。
Auth0のユニバーサルログイン画面に遷移したらアカウント情報の登録、ログインができるはずです。