Open4

Next.js auth0での認証について

taroodrtaroodr

おおまかにいうと以下の3パターンの場合について記載されている

  • 静的サイト(認証前提のコンテンツをCSRするパターン)
  • SSRやAPIルートを使う(認証前提のコンテンツをSSRするパターン)
  • Custom Serverを使う(認証前提のコンテンツをSSRするパターン 今となっては使うことはほとんどなさそうではあるが)
taroodrtaroodr

1. 静的サイト(認証前提のコンテンツをCSRするパターン)の場合

https://github.com/auth0/auth0-react を使うとよい

以下のチュートリアル・サンプルを見たら実装できた
https://auth0.com/docs/quickstart/spa/react/01-login
https://github.com/auth0/auth0-react/tree/master/examples/nextjs-app

2. SSRやAPIルートを使う(認証前提のコンテンツをSSRするパターン)の場合

https://github.com/auth0/nextjs-auth0 を使うとよい

(サービス特性にもよるが)ほとんどの場合認証が必要なページをSSRしなくても良いと思っているので個人開発では1のパターンを採用することに決定