５．SNSを作るうえで必要な方針（Auth）

2026/09/28 Copilot

補足：MCPは導入していない

MCPサーバーは外部サービス（メール、カレンダー、DB等）の認証トークン（OAuthトークンなど）を保持します。
これが漏洩すると、攻撃者は正規ユーザーになりすまし、あらゆる情報へのアクセスや操作が可能になります。

補足：Cursorのインストール先

C:\Users\ユーザー名\AppData\Local\Programs\cursor

プロンプト

Next.jsとTypescriptとAppRouterで水耕栽培のSNSをつくる。AuthはGoogleにしてください。DBはSupabaseにしてください。言語は日本語のみです。公開範囲は全体公開です。

会員登録（アカウント作成）の意味

会員登録しないほうが、投稿のハードルが下がるが、スパムや荒らしの特定が困難になる

認証方法

・　Google（利用者が最も多い）←とりあえずコッチだけ準備

・　メール（Googleを利用していない人向け）

Google Auth

・　Google Cloud Console（無料）

・　Supabase（50000MAUつまり月間５万人ログインまで無料で、それ以上は月額２５ドル）

Google Cloudのプロジェクト削除

削除したいプロジェクトを選択し、左メニューから「IAMと管理」を選択

左メニューから「設定」をクリックし、画面上の「シャットダウン」をクリック

３０日間は削除保留状態となり、復元可能だが、３０日経過後に完全に削除される

新しいプロジェクトを作成しOAuthに同意する

Google Cloud Consoleにアクセスし、「新しいプロジェクト」をクリック

任意のプロジェクト名hydroculturepjを入力して「作成」

左側のメニューから「APIとサービス」＞「OAuth同意画面」を開く

・アプリ名hydroculture.jp

・ユーザーサポートメール

・対象は「外部」

・デベロッパーの連絡先9org

を入力

AUTH_GOOGLE_ID（Googleログイン用のアプリID）とAUTH_GOOGLE_SECRET（Googleログイン用のアプリ秘密鍵）の取得

OAuthクライアントの作成をクリック

・アプリケーションの種類：ウェブアプリケーション

・OAuth 2.0 クライアントの名前：任意の名前

・承認済みの JavaScript 生成元：http://localhost:3000　またはhttps://あなたのドメイン名.com

・承認済みのリダイレクト URI（http://localhost:3000/api/auth/callback/google）またはhttps://あなたのドメイン名.com/api/auth/callback/google

「作成」を押すと、画面にクライアントID（AUTH_GOOGLE_ID）とクライアントシークレット（AUTH_GOOGLE_SECRET）が表示される

AUTH_URL（アプリのWebサイトURL）を設定する

http://localhost:3000 やhttps://あなたのドメイン名.com

AUTH_SECRET（セッションやトークンを暗号化するための鍵）

ランダムな暗号文字列を自分のターミナルで生成する

npx auth secret

※

というコマンドを実行するとランダムな文字列が表示されるので、

それをそのままコピーしてAUTH_SECRET=の後ろに貼り付ける

.env.localの作成

プロジェクトフォルダの直下に新規作成する

NextAuth.jsという認証ライブラリをつかうが、そのライブラリは以下の４つの項目が必要

AUTH_SECRET="生成したランダム文字列"

AUTH_GOOGLE_ID="XXXXX.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="GOCSPX-XXXXX"

AUTH_URL="http://localhost:3000"

Supabaseでプロジェクトとテーブルを作成

supabaseのダッシュボードで緑ボタン「 new project」をくりっくして新しいプロジェクトを作成する

GitHubL：必ず連携する

Project name：hydroculture-project

Database password :

Region：Tokyo

をして作成し、左メニュの「SQL Editor」を開いて、Cursorが生成したschema.sqlの中身を貼り付けて、「RUN」する（これでデータベースにテーブルやセキュリティルール（RLS）が自動作成される）

RUNするとSupabaseから「This query includes destructive operations. It may permanently change or remove data, tables, schemas, or other objects.Run this query only if you intend these changes and understand the risks.」と表示されるがそのまま進めてＯＫ

SupabaseとGoogleのOAuthをつなげる

左メニューAuthenticationをクリックし、左メニューSign in/Providersをクリック

Auth ProvidersからGoogleを選択し、

・Enable Sign in with Google：有効にする

・Client IDs：GoogleCloudでつくったものをこぴぺ

・Client Secret (for OAuth)：GoogleCloudでつくったものをコピペ

・Skip nonce checks、Allow users without an email、いじらない

・Callback URL (for OAuth)

Redirect URLの設定

同じく左メニューのURL Configulationをクリックし、

Site URLに「https://あなたのドメイン.com」

Redirect URLｓの「Add URL」をクリックして、https://あなたのドメイン.com/auth/callbackを追加

.env.localに追記

Supabaseの左メニューの歯車アイコンを押して、API Keysをクリックし、

・Publishable key（＝NEXT_PUBLIC_SUPABASE_ANON_KEY）

・Secret key（データベースのすべてのセキュリティ（RLS）を無視して全操作できる管理者用キー）

NEXT_PUBLIC_SUPABASE_URL="https://[Project ID].supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="Publishable keyの中身" <--

の２行を.env.localの最後に追記する

※　API Keysの画面で「Publishable and secret API key」の上部タブではなく、「Legacy anon, service_role API keys」の上部タブのほうがいいかも

npm run dev

npm run dev して「npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。」というエラーが出てくる場合、ターミナルをPowerShellからCommandPromptに変えること！

Vercelに環境変数を設定

Cursorが自動でやってくれる

GoogleのクライアントIDやSecretは Supabaseの管理画面に登録

SupaBaseダッシュボードの左メニューの歯車アイコンをクリックし、Authentication」から「URL Configulation」をクリック

Site URLにhttps://あなたのどめいん.com　に書き換える

またRedirect URLのAdd URLをクリックし、https://www.あなたのどめいん.com/auth/callback　を入力して保存

Google Cloud ConsoleのOAuthクライアントの承認済みリダイレクトURIに「https://xxxxx.supabase.co/auth/v1/callback 」を追加

Vercelにデプロイ

git add .しようとすると.env.localが入ってしまうのでWarningになる

BACK