flask + nextjsで「googleでログイン」を実装する場合の全体像が掴めていません

実現したいこと

flaskをバックエンド、nextjsをフロントエンドとしてGET/POSTで通信する
flaskでモデル(idをフィールドに持つユーザーなど)を作成してDBにread/writeができる
「Googleでログイン」ボタンをnextjsで表示する(まだ作ってないですが簡単にできます)
「Googleでログイン」ボタンを押されたときに、nextjsとflaskがgoogleのサーバーとどのような通信をすればよいのかがわかる
「Googleでログイン」を実装する上で、セキュリティ的に安全にするために必要な実装を知っている（例えば発行されたトークンの検証とその方法など）

前提

webサービスを個人開発しています。
DBはsqlite3、バックエンドはflask、フロントエンドはnextjsです。
本番環境ではdockerを導入し、DBにはMySQL、webサーバーにはnginxを使う予定です。

webサービスでは、googleアカウントでログインしたユーザーのみが見ることのできるページを作るつもりです。googleでログイン以外のログイン方法は実装するつもりはないです。
また、googleアカウントでログインしていても一部の登録したアカウントのみがアクセスできるページも作る予定です。これについては、googleのサーバーからログインに使用したメールアドレスを受け取りメールアドレスでフィルタリングできると思うので心配していません。

そのため、「Googleでログイン」を実装したいです。
特に、セキュアな実装をしたいです。

発生している問題・エラーメッセージ

私がログイン機能付きのwebサービスを作るのが初めてなので、googleでログインを実装する場合の全体像についてわかっていません。

例えば、ユーザー名とパスワードでログインする場合の全体像は下のようになると思います。

バックエンド側のDBにユーザー名とパスワードのハッシュのペアを保存する
フロントエンドのformに入力したユーザー名とパスワードをREST APIを使ってバックエンドに送信
バックエンドは受け取ったパスワードをハッシュ関数に渡してハッシュを比較して認証する
バックエンドのリソース(DBに入ってるデータや画像等)にアクセス制限をかけることができる

また、具体的な実装も、Flask ログイン機能 CRUDとセットで実装してみたの redirect や render_template の代わりに login: okのようなレスポンスを返してフロントエンド側でログイン成功 or 失敗の画面を表示すればできると思います。
そして、バックエンドがログイン状態を判断して画像などのリソースを渡すかどうかを決め、アクセス制限のあるページをフロントエンドが描画することはできなくなります。

しかし、「Googleでログイン」する場合はフロントエンド、バックエンド、Googleの認可サーバーの3つが存在するので、上のような時系列順のデータの流れやその実装方法がわからないです。

また、ログイン機能のみFirebaseを活用できるならそれが一番楽だと思っているのですが、同じく全体像がわからないです。

どうかよろしくお願いします

調査したこと・試したこと

googleで以下の検索条件で調べてみましたが、上の答えを持つページが少なかったです。
いつも、10~20個のページを読んで、よりセキュアでベストプラクティスに近い方法を選んでいるのですが今回は比較するだけの情報を集めることができなかったので質問しました。

flask google login
flask google ログイン
flask google login react
flask google login react firebase
flask google login nextjs

参考になりそうだと思ったページは下のとおりです

補足情報（FW/ツールのバージョンなど）

ローカル環境

ubuntu 22.04 Desktop
flask (pip installした最新のバージョン)
nextjs (yarn add した最新のバージョン)

行動規範の内容に同意します

回答1件

この回答はGPT-4による自動生成回答です

Googleでのログインを実装するためには、Google OAuth 2.0を使用します。以下にその大まかな流れを説明します。

ユーザーが「Googleでログイン」ボタンをクリックします。
フロントエンドはGoogleの認証ページにリダイレクトします。このリダイレクトURLには、あなたのアプリケーションを識別するためのクライアントIDと、認証後にリダイレクトされるURL（通常はあなたのサーバー上のエンドポイント）が含まれます。
ユーザーはGoogleの認証ページで自分のGoogleアカウントを選択し、あなたのアプリケーションへのアクセスを許可します。
Googleはユーザーをあなたのサーバー上のリダイレクトURLにリダイレクトします。このリダイレクトURLには、認証コードが含まれます。
あなたのサーバーはこの認証コードを使用して、バックエンドでGoogleにトークンをリクエストします。このリクエストには、あなたのアプリケーションのクライアントIDとクライアントシークレットが含まれます。
Googleはアクセストークンとリフレッシュトークンをあなたのサーバーに返します。
あなたのサーバーはこれらのトークンを使用してユーザーのGoogleアカウント情報を取得し、ユーザーを認証します。

セキュリティ的には、以下の点に注意する必要があります。