Auth.js(NextAuth)を学ぶロードマップ

投稿者：HIROKI CHIYODA

Auth.js(NextAuth)に関する動画が多く再生されてを伸ばしています。
そこで、Auth.jsの学習ロードマップを紹介します。

2024年最新　NextAuth v5で認証機能を作って、Cloudflare Pagesにデプロイする

まずは、2024年最新　NextAuth v5で認証機能を作って、Cloudflare Pagesにデプロイするで、Auth.jsの使い方を学びます。

GitHubの認証機能を使った、認証方法を採用して実装しました。
また、わかりやすくするために、Auth.jsの最低限必要な機能だけを厳選して説明しました。
ただ、逆にシンプルになりすぎて、わかりにくかったかもしれません。

Webアプリ必須！shadcn/uiで認証機能付きヘッダーを作る

次は、Webアプリ必須！NextAuth+shadcn/uiで認証機能付きヘッダーを作るではヘッダーを作って、そこに認証ボタンを設置しました。

簡単な具体例を示して、Auth.jsの導入方法を説明しました。
まずはヘッダーを追加して、認証ボタンを設置しました。
そして、ダッシュボードページを新たに作成しました。
また、認証の有無での、ダッシュボードページ表示方法を説明しました。

認証ボタンをshadcn/uiでリッチにカスタマイズ+Google認証を追加する

次は、NextAuth v5の認証ボタンをshadcn/uiでリッチにカスタマイズ+Google認証を追加するでは認証ボタンをカスタマイズしました。

Auth.jsが用意しているログインボタンを使わずに、カスタマイズする方法を説明しました。
Auth.jsが用意しているデフォルトのボタンは、簡素で、いまいち見た目がパッとしません。
そこで今回は、そのボタンをもっとオシャレで使いやすいデザインに変身させていきます。
また、Google認証の追加方法を説明します。
Google認証で必要なクライアントIDとクライアントシークレットをGoogle Cloudで取得して、Auth.jsでGoogle認証の追加します。

NextAuth v5のadapter機能を追加して登録ユーザーをデータベースで管理する

次は、NextAuth v5のadapter機能を追加して登録ユーザーをデータベースで管理するようにしました。

Auth.jsで、登録されたユーザー情報をデータベースで管理する方法について解説しました。
これまでに、GitHubやGoogleのアカウントを使ったOAuth認証を利用して、ユーザー登録を行う方法を実装しました。
具体的には、ユーザーはOAuthプロバイダーを通じてログインします。
ログインすると、OAuthプロバイダーにユーザー情報が保存されます。
たとえば、ユーザーが認証後に限定コンテンツへアクセスするだけで十分なサイトでは、これで問題ありません。
セッション情報のみで管理できるからです。
しかし、ZennやQiitaのように、ユーザーごとに投稿を管理する場合、もう少し工夫が必要です。
OAuthで取得できる情報は、メールアドレス、ユーザー名、アバター画像のURLに限られるため、これらだけではユーザーの投稿やその他の情報を一意に識別するのが難しいからです。
この課題を解決するために、アダプター機能を使います。
アダプターを使うと、ユーザーはOAuthプロバイダーを通じてログインします。
ログインすると、ユーザー情報がアダプターに送られます。
アダプターを介して、ユーザーごとに一意のIDを自動的に生成してデータベースに保存されます。
この一意のIDを基に、ユーザーごとに投稿やその他のデータをしっかり管理できるようになります。
これで、データベースに登録されたIDをキーとして、ユーザーが投稿した記事やプロフィールを紐づけることが可能です。
では、実際にアダプターを使って、データベースにユーザー情報を登録・管理する方法を見ていきましょう。