実践例
企業と開発者向けのライブ例
すべてのユーザー向け
ゼロタイピング認証 (Zero-Type Auth)
最も高速なログイン体験:電話番号入力フィールドなしの直接的なWhatsAppおよびTelegramボタン。システムがメッセージから自動的に電話番号を取得します。
prompt.txt
あなたはNext.jsとTailwind CSSを専門とする開発アシスタントです。Zero-Type Auth(電話番号入力なし)を使用したReOTP用の完全なログインページを作成してください。
### Step 1: Setup & Connection
First, ensure the platform is connected. Ask the user to create a ReOTP account, get the REOTP_API_KEY, and add it to .env.local. If already connected, skip this step.
### Step 2: Requirements:
1. /loginページに layout.tsx と page.tsx を含める。
2. 大きなWhatsApp、Telegram(およびセカンダリとしてのPasskey)ログインボタンを配置する。
3. WhatsAppクリック時: phoneNumberなしで POST /api/verify/init を呼び出す(メソッドはPREDICTIVE)。
4. window.location.href = waDeepLink を使用して即座にリダイレクトし(スピナーなし)、waLink用のフォールバックボタンを提供する。
5. VERIFIEDになるまで、(SSE) /api/verify/stream?id=<requestId> をリアルタイムでリスンする。
6. 成功時: JWTを localStorage に保存し、router.push('/dashboard') を実行する。
7. UIデザイン: Apple UIリキッドグラス — ダーク背景、グラスモーフィズムカード blur-xl、white/15ボーダー、Cairoフォント、シアン + エメラルドのアクセント。
### Security:
- ログインボタンにクライアント側のクールダウン(10秒)を追加する。
- 保存前にJWTを検証する。
- NEXT_PUBLIC_API_URLには .env.local を使用する。