📑
Auth.jsを使って認証機能を実装する備忘録
はじめに
Auth.jsを使って認証機能の実装を試したので備忘録として残す。
環境
- Next.js(App router)
- Auth.js
- Prisma
- docker compose(Nextjsとpostgresのコンテナを起動)
補足：
- Prismaを用いることでセッションをDBに保存します。デフォルトだとjwtになります。
ステップ
プロジェクト作成
npx create-next-app@latest <projectname> --example with-tailwindcss
Prisma導入
※DBの生成自体はdocker composeに記載しておいたので省略。コンテナを立てるだけでpostgresの準備は完了する。
インストールと初期設定
npm install prisma -dev
npx prisma init
スキーマの定義
上記に従ってprismaのスキーマを定義する。
DBとの接続
npx prisma migrate dev --name init
上記コマンドをたたく前に.envへDATABASE_URLを指定しておく必要がある。
Prisma Studioの起動
以下のコマンドでGUI上でDBを操作できるようになる。
npx prisma studio
Prismaのクライアントコードの記述
Auth.js導入
設定
/app/api/auth/[...nextauth]/route.tsを作成します。 補足：
- App routerを利用しているためapp/apiフォルダ以下がAPI routesの対象になります。（nextjsの機能でバックエンドAPIを実装できる特殊なフォルダ）
- その他動作にはいくつかファイルが必要です。詳しくはgithubを見ること。
サインインとサインアウト
サインインとサインアウトはそれぞれsignIn()、signOut()を実行することで可能。
自動的に/api/auth/signinと/api/auth/signoutにアクセスする。
アクセスするとAuth.jsが自動的に作成している認証ページへ転送される。
サーバコンポーネントでのセッション情報取得
サーバコンポーネントでセッションを取得するときにはgetServerSessionというメソッドを利用する。引数にはAuth.js自体の設定で使ったoptionを入れる。
サンプルは以下。
クライアントコンポーネントでのセッション情報取得
useSessionの利用には配置するタグ構造の上位にSessionProviderというタグが入っている必要がある。
そこで、以下のようなコンポーネントを作ってlayout.tsxにて設定しておく。
上記を作ったらあとはuseSessionを使うだけ。勝手にセッション情報をフックしてくれる。
上記NextAuthProvider内でuseSessionは使っているので割愛。
参考
Discussion