認証システム - シンプルなログイン/登録サイト

📖 プロジェクト概要

Supabaseを使用したシンプルで安全な認証システムです。メール/パスワード認証、セッション管理、保護されたダッシュボードページを提供します。

✨ 機能

• ✅ 新規登録 - メールアドレスとパスワードでアカウント作成
• ✅ ログイン - 既存ユーザーの認証
• ✅ ログアウト - セッション終了
• ✅ セッション管理 - 自動ログイン維持
• ✅ 保護されたページ - ログイン必須のダッシュボード
• ✅ レスポンシブデザイン - モバイル対応
• ✅ モダンUI - TailwindCSSによる美しいデザイン

🎯 ページ構成

ページ	URL	説明
トップページ	index.html	認証状態により表示切替、ログイン/登録へのリンク
新規登録	register.html	アカウント作成フォーム
ログイン	login.html	ログインフォーム
ダッシュボード	dashboard.html	ログイン後のみアクセス可能な保護されたページ

🚀 デプロイ方法

1️⃣ 即時デプロイ（Netlify Drop）

最も簡単な方法！ドラッグ＆ドロップで5分完了

1. Netlifyにアクセス
   https://app.netlify.com/drop にアクセス

2. フォルダをドロップ
   このプロジェクトフォルダ全体をブラウザにドラッグ＆ドロップ

3. 完了！
   自動的にURLが発行されます（例: https://random-name-123.netlify.app）

2️⃣ GitHub経由デプロイ（推奨・自動更新対応）

1. GitHubリポジトリを作成

git init
git add .
git commit -m "Initial commit: Authentication system"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

2. Netlifyでサイト作成

   • https://app.netlify.com/ にログイン
   • 「New site from Git」をクリック
   • GitHubを選択し、リポジトリを接続
   • Build settings:
     • Build command: （空欄）
     • Publish directory: /
   • Deploy site をクリック

3. 完了！
   コミット毎に自動デプロイされます

3️⃣ Vercelデプロイ

1. Vercelにアクセス
   https://vercel.com/new にログイン

2. リポジトリをインポート
   GitHubリポジトリを選択

3. 設定

   • Framework Preset: Other
   • Root Directory: ./
   • Build Command: （空欄）
   • Output Directory: ./

4. Deploy をクリック

🔧 必要な設定

Supabase設定

プロジェクトでは既に以下のSupabase設定が埋め込まれています：

const SUPABASE_URL = 'https://teiajvhetkzjneuaccoq.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';

カスタムドメイン（オプション）

Netlifyの場合:

1. Netlify Dashboard → Domain settings
2. Add custom domain
3. DNSレコードを設定

Vercelの場合:

1. Vercel Dashboard → Domains
2. Add Domain
3. DNSレコードを設定

📂 ファイル構成

auth-website/
├── index.html          # トップページ（ログイン/登録リンク）
├── register.html       # 新規登録ページ
├── login.html          # ログインページ
├── dashboard.html      # ダッシュボード（保護されたページ）
├── .gitignore          # Git除外設定
└── README.md           # このファイル

🎨 技術スタック

• 認証: Supabase Auth
• UI: TailwindCSS（CDN）
• JavaScript: Vanilla JS（フレームワーク不要）
• ホスティング: Netlify / Vercel

🔐 セキュリティ

• ✅ Supabaseの標準暗号化
• ✅ HTTPS通信
• ✅ セッショントークンの安全な管理
• ✅ パスワードのハッシュ化（Supabase側で自動）

📱 対応ブラウザ

• Chrome / Edge（最新版）
• Firefox（最新版）
• Safari（最新版）
• モバイルブラウザ対応

🔗 重要なURL

サービス	URL	説明
Supabase Dashboard	https://supabase.com/dashboard/project/teiajvhetkzjneuaccoq	プロジェクト管理
Supabase Auth Settings	https://supabase.com/dashboard/project/teiajvhetkzjneuaccoq/auth/providers	認証設定
Table Editor	https://supabase.com/dashboard/project/teiajvhetkzjneuaccoq/editor	データベース管理

📝 ライセンス

MIT License

👤 作成者

Kokiaibot

---

🎉 5分でデプロイ完了！すぐに使える認証システム