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

# Quickstart with React

> Get started with Hopae Connect in 1 minute

The goal is to go from zero to a fully working verification flow in less than 1 minutes, without any local setup.

## Step 1: Get the Sample Project

<Tabs>
  <Tab title="StackBlitz (Recommended)" icon="stackblitz">
    Click the button below to launch the project directly in your browser. The project will automatically install all dependencies and start the development server. Please give it a moment to load.

    <Card title="Open in StackBlitz" icon="react" href="https://stackblitz.com/~/github.com/hopae-official/hopae-connect-quickstart-react?file=.env">
      Click here to launch a ready-to-code environment.
    </Card>
  </Tab>

  <Tab title="Local Clone" icon="git-branch">
    **1. Clone the repository**

    ```bash theme={null}
    git clone https://github.com/hopae-official/hopae-connect-quickstart-react.git
    cd hopae-connect-quickstart-react
    ```

    **2. Install dependencies**

    ```bash theme={null}
    npm install
    ```
  </Tab>
</Tabs>

## Step 2: Paste to .env

Open the `.env` file. Copy & Paste the following configuration:

<CodeGroup>
  ```dotenv .env theme={null}
  VITE_HOPAE_CONNECT_URL="https://sandbox.connect.hopae.com"
  VITE_CLIENT_ID="xhdH8A13"
  VITE_CLIENT_SECRET="secret"
  ```
</CodeGroup>

<Callout>
  StackBlitz will automatically restart the development server when you save the `.env` file.
</Callout>

## Step 3: Run the Verification Flow

Now, let's complete the verification.

1. In the preview window on the right, click the **"Start Verification"** button. You will be redirected to the Hopae Connect sandbox.

2. Follow these steps on the Hopae Connect screen:
   * Select **Estonia** as the country.
   * Choose **Smart-ID** as the verification method.

3. When prompted for credentials, use the following test data. You can click the copy icon on the code block.

   ```text Test Credentials theme={null}
   PNOLT-40504040001
   ```

4. Enter the code and complete the flow.

You will be redirected back to the application, and you'll see the verified user data displayed in a clean card format.

**Congratulations! You have successfully completed a full identity verification flow with Hopae Connect.**

## Next Steps

Now that you've seen how it works, you can integrate it into your own project.

1. **Get Your Own Credentials**\
   Register your application in the [Hopae Console](https://console.hopae.com) to get your real `Client ID`.

2. **Integrate the Code**\
   The core logic is contained in two files in the sandbox project:

   * `src/hopaeConnect.tsx`: The reusable module that handles the OIDC flow.
   * `src/App.tsx`: An example of how to use the `useHopaeConnect` hook.

   You can copy these files into your own project and adapt them to your needs.

## More

<CardGroup cols={2}>
  <Card title="Data Types" icon="database" href="/guides/concepts/return-data-model">
    All available user data fields
  </Card>

  <Card title="OIDC Integration Guide" icon="id-card" href="/guides/oidc-integration">
    Complete integration guide with all options
  </Card>
</CardGroup>