> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ログインを追加する

> Velocityの各顧客がサインインして、自分の予約と保存した車を確認できるようにします。

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

完了すると、Velocityの各顧客がサインインして自分の予約と保存した車だけを確認できるようになります。

<Frame>
  <img src="https://mintcdn.com/replit/TBbCBDsd8nVQwxq3/images/velocity/add-login/home-signed-in.png?fit=max&auto=format&n=TBbCBDsd8nVQwxq3&q=85&s=39b4fc199ad8decfb31b44063c1689b0" alt="サインイン後のVelocityホーム画面。右上のヘッダーに顧客名、1件の今後の予約がある「My bookings」セクション、その下に保存した車のリストが表示されている" width="100%" data-path="images/velocity/add-login/home-signed-in.png" />
</Frame>

[Replitへようこそ](/build/welcome)でVelocityを紹介しました — プレミアムスーパーカーレンタルアプリです。現在、公開URLにアクセスした人は誰でもすべての予約を確認できます。ランボルギーニを匿名で予約する人はいません。サインイン機能を追加して、各顧客が自分専用の予約と保存した車を持てるようにしましょう。

## Agentにサインイン機能の追加を指示する

Velocityには Clerk を使用します。ReplitのClerkインテグレーションにより、アプリ専用のブランドサインイン画面、Velocityの中に存在する顧客アカウント（Replitアカウントではなく）、そして外観と使い勝手を完全にコントロールできます — プレミアムレンタルブランドにふさわしい仕様です。Agentがすべてを自動的にプロビジョニングするため、Clerkダッシュボードへのサインアップもキーの貼り付けも不要です。

<AiPrompt>
  Add sign-in to Velocity so each customer has their own bookings and saved cars.<br />
  Use Clerk Auth.<br />
  Keep the car-browsing pages public so visitors can still explore the fleet without an account.<br />
  Require sign-in before someone can reserve a car or save one to their favorites.<br />
  After sign-in, show the customer's name in the header and a "My bookings" section with only their reservations.<br />
  Add a sign-out button.<br />
  Give me a test checklist using two different customers.
</AiPrompt>

AgentはVelocity用のClerkテナントをプロビジョニングし、サインインコンポーネントを追加し、予約フローをその背後に配置し、各予約をサインイン中の顧客に関連付け、サインアウト機能を追加します。Agentチャットでビルドの進行を確認できます。

<Frame>
  <img src="https://mintcdn.com/replit/TBbCBDsd8nVQwxq3/images/velocity/add-login/auth-modal.png?fit=max&auto=format&n=TBbCBDsd8nVQwxq3&q=85&s=b5e0a93796910a63c0b7e4cc6ebcc64a" width="100%" data-path="images/velocity/add-login/auth-modal.png" />
</Frame>

## 2人の顧客でテストする

1つのアカウントでは不十分です — 予約が分離されていることを証明するには2つのアカウントが必要です。

1. PreviewでVelocityを開き、サインインせずに車を閲覧する。フリートは引き続き表示されるはずです。
2. 車の「Reserve」をクリックする。Clerkのサインイン画面に遷移するはずです。
3. 自分のメールアドレスでサインアップして予約を完了する（例：911の週末予約）。
4. サインアウトする。「My bookings」セクションが消え、予約フローが再度サインインを要求するはずです。
5. シークレットウィンドウでPreviewを開き、別のメールアドレスでサインアップする。別の車を予約する。
6. 最初のウィンドウに戻ってサインインし、自分の予約だけが表示されること（2番目の顧客の予約は表示されないこと）を確認する。

両方の顧客が同じ予約を見られる場合、予約がまだサインイン中のユーザーに関連付けられていません。正確な症状をAgentに伝えてください：

<AiPrompt>
  Both customers can see each other's reservations in Velocity.<br />
  Attach each booking and each saved car to the signed-in customer so each person only sees their own.<br />
  Show me how to verify it with two test accounts.
</AiPrompt>

## 公開URLで公開してサインインする

AgentチャットまたはPublishingタイルからVelocityを再度公開し、新しいタブで公開URLを開いてサインインします。ClerkはDevelopment環境とProduction環境を別々にプロビジョニングします — AgentはProductionの認証情報を公開済みアプリに自動的に設定するため、公開URLですぐにサインインが機能します。

Velocityに実際の顧客ができました。それぞれが自分専用の予約ガレージにサインインでき、他の誰も見ることができません。

## 次の改善

<CardGroup cols={2}>
  <Card title="データベースを追加する" icon="database" href="/build/add-database">
    車、空き状況、予約をセッションをまたいで永続化します。
  </Card>

  <Card title="決済を追加する" icon="credit-card" href="/build/add-payments">
    顧客が車を予約する際に返金可能なデポジットを受け取ります。
  </Card>
</CardGroup>

## さらにサポートが必要な場合

* **アプリ全体が非表示になっている：** 車の閲覧を公開のままにして、予約とアカウントページだけを保護するようAgentに伝えてください。
* **顧客がお互いの予約を見られる：** 各予約と保存した車をサインイン中の顧客に関連付けるようAgentに伝えてください。
* **Previewではサインインできるが公開後に機能しない：** 新しいタブで公開URLを開き、表示される正確なエラーをAgentに伝えてください。AgentがProduction Clerk環境をプロビジョニングしていることを確認してください。
* **プロトタイプ向けに設定不要の高速サインインが必要：** Replit Authは顧客のReplitアカウントを使用し、管理するClerkテナントが不要です — [Replit Auth](/references/auth-and-identity/authentication)を参照してください。

## 関連情報

* [Clerk Auth](/references/auth-and-identity/clerk-auth)
* [Replit Auth](/references/auth-and-identity/authentication)
