✨
Auth.js/NextAuthを学ぶロードマップ
Auth.js(NextAuth)に関する動画が多く再生されてを伸ばしています。
そこで、Auth.jsの学習ロードマップを紹介します。
NextAuth v5で認証機能を作って、Cloudflare Pagesにデプロイする
GitHubの認証機能を使った、認証方法を採用して実装しました。
また、わかりやすくするために、Auth.jsの最低限必要な機能だけを厳選して説明しました。
ただ、逆にシンプルになりすぎて、わかりにくかったかもしれません。
Webアプリ必須！shadcn/uiで認証機能付きヘッダーを作る
簡単な具体例を示して、Auth.jsの導入方法を説明しました。
まずはヘッダーを追加して、認証ボタンを設置しました。
そして、ダッシュボードページを新たに作成しました。
また、認証の有無での、ダッシュボードページ表示方法を説明しました。
認証ボタンをshadcn/uiでリッチにカスタマイズ+Google認証を追加する
Auth.jsが用意しているログインボタンを使わずに、カスタマイズする方法を説明しました。
Auth.jsが用意しているデフォルトのボタンは、簡素で、いまいち見た目がパッとしません。
そこで今回は、そのボタンをもっとオシャレで使いやすいデザインに変身させていきます。
また、Google認証の追加方法を説明します。
Google認証で必要なクライアントIDとクライアントシークレットをGoogle Cloudで取得して、Auth.jsでGoogle認証の追加します。
Discussion