Next.js ベースのコンポーネントを条件付きでレンダリングする: リクエストが認証された Firebase ユーザーからのものであるかどうかを判断するにはどうすればよいですか?

Question

<p><strong>注: </strong>Next.js 13 と <code>app/</code> ディレクトリを使用しています。 </p>

---

<p>私は Firebase と Next.js を学んでいて、おもちゃの問題を解決する方法を理解しようとしています。このような <code>Home()</code>Component</p> があるとします。 <p><strong><code>/app/page.jsx</code></strong></p> <pre class="brush:php;toolbar:false;">デフォルト関数 Home() をエクスポート { 戻る （ <メイン> <h1>Hello World</h1> <p>認証されたユーザーのみがこのテキストを表示できます</p> </メイン> ) }</pre> <p>私の目標は、ページをリクエストしているユーザーがログインしているユーザーかどうかに基づいて、<code><p>...</p></code> 内のすべてを条件付きでレンダリングすることです。 Firebase は、JWT、Next.js 13 を使用してこのコンポーネントをサーバー側でレンダリングするため、これは可能だと思いますが、その方法がわかりません。 </p> <p>onAuthStateChanged については知っていますが、私の知る限り、これはクライアント側でのみ使用できます。 (知識のあるユーザーは、引き続きこの保護されたコンテンツを表示できます。) このコンテンツを <em>サーバー側</em> で保護するにはどうすればよいですか? </p>

Answer 1

ユーザーがログインしているかどうかを確認するには、「onAuthStateChanged」メソッドを使用できます。

この情報をコンポーネントの状態に保存するか、コンポーネントの一部を条件付きでレンダリングするために使用します。

リーリー

サーバー側でユーザー認証を実行するために、Next.js はユーザーの認証ステータスを取得するための「getServerSideProps」を提供します

リーリー

---

更新されたソリューション:

サーバー側ルートを作成する

リーリー

クライアントコード

リーリー