実践例

企業と開発者向けのライブ例

すべてのユーザー向け

ゼロタイピング認証 (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 を使用する。