Authを使って認証周りをよしなにやってもらった(Google・Github版)2023/10/26に公開Next.jsNextAuthtech最近仕事でNextAuthを触って便利だったので、あとで見返せれるように記事でまとめてみました。細かいところまでは知らないのですが、最低限の認証処理は実装できたので参考になればと思います。AuthとはNextAuthは、初心者でも簡単な設定でセキュアな認証機能を提供し、多くのプロバイダーに対応しており、ユーザー管理やセッション管理も手軽に行えます。`${process.env.NEXTAUTH_URL}/user`})}>Googleログイン</button>)signIn()の第1引数にプロバイダー名を設定して、第2引数をcallbackUrlでログイン後にリダイレクトしたいURLを設定する。callbackUrlを設定することでクリックした際に、よく見る認証画面に飛びます。NextAuth(options);Pagesカスタムしたサインインページやサインアウトページを指定することができます。redirectsignIn()のcallbackURLで定義した値がurlに渡され、その値をreturnします。jwtcallbacksのjwtはサインイン時と、getSession()、getServerSession()、useSession()が呼び出された際に実行されるため、その処理を記述しています。userやaccount情報はサインイン時のみ取得されるため、アクセストークンやリフレッシュトークン、Idトークン等を取得したい場合は、上記のような条件式で実装することで可能です。※GitHubではリフレッシュトークンおよびIdトークンが存在しないため、nullとなります。sessionjwtセッションを使用している場合、jwtのペイロード(token)の値が渡されるので、jwtで定義したものを受け取れます。今回の場合だとアクセストークンやIdトークンを取得しています。};};getServerSidePropsでgetTokenもしくはgetServerSessionを呼び出すことにより、[...nextauth].tsで定義されたユーザー情報を取得できます。tokenやsessionが取得できない場合は、/loginページにリダイレクトすることでアクセス制御を実装できます。returnのpropsに、tokenやsessionで取得したユーザー情報を加工し定義することで、クライアント側はそれを受け取り利用できるようになります。getSession()を使用して同様のデータを取得することも可能ですが、useEffectの使用などが必要になる場合があります。そのため、個人的にはgetServerSession()を使用した方がスマートだと考えています。m.noto@funda.jpよりお願いしますバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。