web-auth
React Web認証を実装する
Reactチームには、セッション、リダイレクト、OAuth、トークン更新を正しく処理する安全な認証フローが必要です。このスキルは、Webアプリでそうしたフローを構築するための実践的なパターンをClaude、Codex、Claude Codeに提供します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "web-auth" from https://skillstore.io/skills/cjharmath-web-auth.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-auth/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「web-auth」を使用しています。 Cookieを使うReactアプリでログインとログアウトが必要です。
期待される結果:
APIクライアント、認証プロバイダー、ロード状態、ログインフォーム接続、ログアウト時のクリーンアップを含む簡潔な実装計画。
「web-auth」を使用しています。 Next.jsアプリにGoogleサインインを追加したいです。
期待される結果:
プロバイダー設定ガイダンス、環境変数名、コールバック動作、セッション処理、ダッシュボード保護手順。
「web-auth」を使用しています。 一般的なセキュリティギャップがないか認証フローを確認してください。
期待される結果:
トークン保存、CSRFヘッダー、Cookie設定、更新リトライ、ルートガード、エラー処理を扱う優先順位付きレビュー。
セキュリティ監査
安全All static findings were reviewed against SKILL.md. The command alerts are Markdown code fences, and the network, environment, sensitive, and reconnaissance alerts are non-executed authentication examples. No prompt injection, malicious intent, or credential exfiltration evidence was found.
リスク要因
⚙️ 外部コマンド (27)
🌐 ネットワークアクセス (10)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/cjharmath-web-auth/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/cjharmath-web-auth?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/cjharmath-web-auth?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-auth/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-auth.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
CJHarmath. (2026). web-auth security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-auth/audits/7BibTeX形式の引用
@techreport{cjharmath-cjharmath-web-auth-2026,
author = {CJHarmath},
title = {web-auth security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-auth/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "web-auth security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/cjharmath-web-auth/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-auth:audit:7"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
Reactアプリにログインを追加する
Cookieで裏付けられたセッション、現在のユーザーのロード、ログアウト動作を備えたログインフローを作成します。
Next.jsでOAuthを設定する
Google OAuthまたはNextAuth.jsを、プロバイダーコールバックとコンポーネント内のセッションアクセスとともに設定します。
認証UXを強化する
保護されたルート、トークン更新、フォーム検証、CSRFヘッダー、セキュリティレスポンスヘッダーを追加します。
これらのプロンプトを試す
web-authスキルを使用して、ログイン、ログアウト、現在のユーザーのロード、保護されたルートチェックのためのReact認証コンテキストを作成してください。
web-authスキルを使用して、ReactアプリとAPI向けのCookieベースのログイン、ログアウト、更新フローを設計してください。
web-authスキルを使用して、NextAuth.js、コールバック、保護されたダッシュボードページを備えたGoogle OAuthをNext.jsアプリに追加してください。
web-authスキルを使用して、トークン保存、CSRF処理、ルート保護、更新動作についてReact認証フローをレビューしてください。
ベストプラクティス
- バックエンドがサポートしている場合、長期間有効なセッショントークンにはhttpOnlyのsecure Cookieを優先します。
- Cookie認証には、CSRF保護とリクエスト内での明示的な認証情報処理を組み合わせます。
- フレームワークがサーバーチェックをサポートしている場合は、クライアントとサーバーの両方でルートを保護します。
回避
- XSSへの露出を受け入れない限り、長期間有効なアクセストークンをlocalStorageに保存しないでください。
- クライアント側のルートガードを唯一の認可制御として信頼しないでください。
- OAuthクライアントシークレットをブラウザーコードや公開環境変数に公開しないでください。