OAuth-SUPABASE-NEXTJS

ここでは、GOOGLE サインインを例に挙げます。
これを行うためのステップバイステップのガイドは次のとおりです:

最初にサーバー側とブラウザ側の supabase クライアントを作成します:

サーバークライアント:

ブラウザクライアント

フロントエンド側のログインコンポーネントでは次のようになります:
このためには、まず、generateCodeVerifier() およびgenerateCodeChallenge() ユーティリティ関数を作成します

次に、Google サインイン ボタンの関数を作成します:

次のステップは、/auth/callback ルートの get リクエストを作成することです

コールバック URL にコード検証ツールを渡しているため、コード検証ツールが必要です。これによりセッションが提供され、トークンが Cookie に保存され、nextjs のミドルウェアからアクセスできるようになります。

次に、ミドルウェアを更新する必要があります:
トークンにアクセスし、それを supabase setsession 関数に渡します。

ユーザーがログインしたセッションをクライアント側で更新する必要があります:

ご質問がございましたら、Linkedin までご連絡ください:
https://www.linkedin.com/in/mernstack-webdeveloper-reactjs-nextjs/

以上がOAuth-SUPABASE-NEXTJSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。