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

# Quickstart

> Connect your users to your App with the Sequence Embedded Wallet.

## Integrate by Framework

<div className="not-prose grid gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 mt-8 mb-8">
  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/web/getting-started">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/react.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Web SDK</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/unity/overview">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/unity.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Unity</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/unreal/quickstart">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <div
          className="h-6 w-6 bg-primary dark:bg-primary-light"
          style={{
      WebkitMask: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'%3E%3Cpath d=\'M16 0c-8.766 0-15.865 7.161-15.865 16s7.099 16 15.865 16c8.76 0 15.865-7.161 15.865-16s-7.104-16-15.87-16zM16 0.703c4.047 0 7.859 1.594 10.724 4.479 2.859 2.875 4.453 6.766 4.443 10.818 0 4.083-1.578 7.927-4.443 10.818-2.828 2.87-6.693 4.484-10.724 4.479-4.031 0.005-7.896-1.609-10.724-4.479-2.859-2.875-4.458-6.766-4.448-10.818 0-4.083 1.583-7.927 4.443-10.818 2.828-2.875 6.698-4.49 10.729-4.479zM15.203 6.333c-2.583 0.693-4.974 2.021-8.161 5.677s-2.583 6.677-2.583 6.677c0 0 0.88-2.078 2.995-4.266 1.005-1.036 1.75-1.385 2.266-1.385 0.458-0.026 0.844 0.344 0.844 0.802v7.422c0 0.734-0.474 0.896-0.911 0.885-0.37-0.005-0.714-0.135-0.714-0.135 2.172 3.156 7.37 3.599 7.37 3.599l2.281-2.438 0.052 0.047 2.089 1.781c3.823-2.271 5.667-6.479 5.667-6.479-1.708 1.802-2.792 2.224-3.438 2.224-0.573-0.005-0.797-0.339-0.797-0.339-0.031-0.156-0.083-2.417-0.104-4.677-0.021-2.339 0-4.682 0.115-4.688 0.661-1.24 2.766-3.74 2.766-3.74-3.932 0.776-6.073 3.354-6.073 3.354-0.635-0.5-1.927-0.417-1.927-0.417 0.604 0.333 1.208 1.302 1.208 2.104v7.896c0 0-1.318 1.161-2.333 1.161-0.604 0-0.974-0.328-1.177-0.599-0.078-0.104-0.146-0.219-0.198-0.344v-9.75c-0.141 0.104-0.313 0.161-0.484 0.167-0.219 0-0.443-0.109-0.594-0.427-0.115-0.24-0.188-0.599-0.188-1.125 0-1.797 2.031-2.99 2.031-2.99z\'/%3E%3C/svg%3E")',
      mask: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'%3E%3Cpath d=\'M16 0c-8.766 0-15.865 7.161-15.865 16s7.099 16 15.865 16c8.76 0 15.865-7.161 15.865-16s-7.104-16-15.87-16zM16 0.703c4.047 0 7.859 1.594 10.724 4.479 2.859 2.875 4.453 6.766 4.443 10.818 0 4.083-1.578 7.927-4.443 10.818-2.828 2.87-6.693 4.484-10.724 4.479-4.031 0.005-7.896-1.609-10.724-4.479-2.859-2.875-4.458-6.766-4.448-10.818 0-4.083 1.583-7.927 4.443-10.818 2.828-2.875 6.698-4.49 10.729-4.479zM15.203 6.333c-2.583 0.693-4.974 2.021-8.161 5.677s-2.583 6.677-2.583 6.677c0 0 0.88-2.078 2.995-4.266 1.005-1.036 1.75-1.385 2.266-1.385 0.458-0.026 0.844 0.344 0.844 0.802v7.422c0 0.734-0.474 0.896-0.911 0.885-0.37-0.005-0.714-0.135-0.714-0.135 2.172 3.156 7.37 3.599 7.37 3.599l2.281-2.438 0.052 0.047 2.089 1.781c3.823-2.271 5.667-6.479 5.667-6.479-1.708 1.802-2.792 2.224-3.438 2.224-0.573-0.005-0.797-0.339-0.797-0.339-0.031-0.156-0.083-2.417-0.104-4.677-0.021-2.339 0-4.682 0.115-4.688 0.661-1.24 2.766-3.74 2.766-3.74-3.932 0.776-6.073 3.354-6.073 3.354-0.635-0.5-1.927-0.417-1.927-0.417 0.604 0.333 1.208 1.302 1.208 2.104v7.896c0 0-1.318 1.161-2.333 1.161-0.604 0-0.974-0.328-1.177-0.599-0.078-0.104-0.146-0.219-0.198-0.344v-9.75c-0.141 0.104-0.313 0.161-0.484 0.167-0.219 0-0.443-0.109-0.594-0.427-0.115-0.24-0.188-0.599-0.188-1.125 0-1.797 2.031-2.99 2.031-2.99z\'/%3E%3C/svg%3E")',
      maskRepeat: 'no-repeat',
      maskPosition: 'center center'
    }}
        />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Unreal</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/headless-wallet/quickstart">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/js.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Headless Embedded Wallet</h2>
      </div>
    </div>
  </a>

  <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/mobile">
    <div className="px-6 py-5">
      <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
        <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/mobile.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
      </div>

      <div>
        <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">React Native</h2>
      </div>
    </div>
  </a>
</div>

<Steps>
  <Step title="Clone Starter Repo">
    Run the following from your terminal to clone the starter repo.

    <CodeGroup>
      ```bash React theme={null}
      npx sequence-cli boilerplates create-embedded-wallet-react-starter
      ```

      ```bash Next theme={null}
      npx sequence-cli boilerplates create-kit-embedded-wallet-nextjs-starter
      ```
    </CodeGroup>
  </Step>

  <Step title="Connect and Authenticate">
    Open your browser and navigate to `http://localhost:4444`. Click on <b>Connect</b> to initiate the authentication process.

    You can now test the Embedded wallet with the boilerplate! Now, let's configure your own project.
  </Step>

  <Step title="Configure your Project">
    <a href="https://sequence.build/project/default/embedded-wallet?tab=config">Navigate to embedded wallet configuration</a> for your project on Builder. Enter your recovery wallet address and set a password, then <b>Create Configuration</b>. Be aware that this configuration cannot be changed at a later date.
  </Step>

  <Step title="Update Environment Variables">
    Navigate to the cloned directory and copy & paste this configuration in the file `.env` replacing the existing configuration.

    Ensure you update the `PROJECT_ACCESS_KEY` and `WAAS_CONFIG_KEY` with the new keys located on the <a href="https://sequence.build/project/default/embedded-wallet?tab=integration">integration page</a>.

    ```tsx theme={null}
    # Update with your project access key
    VITE_PROJECT_ACCESS_KEY="AQAAAAAAAKJcPk5v95BJE-Q7GwdlY9hPuAM"
    # Update with your WAAS_CONFIG_KEY
    VITE_WAAS_CONFIG_KEY="eyJwcm9qZWN0SWQiOjQxNTY0LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0="
    VITE_GOOGLE= NULL
    VITE_APPLE= NULL
    VITE_WALLET_CONNECT_ID= NULL
    VITE_CHAINS= 80002
    VITE_DEFAULT_CHAIN= 80002
    ```
  </Step>

  <Step title="Test your new configuration">
    Save your `.env` file, run `pnpm dev` from the root directory, and navigate back to `http://localhost:4444`. Sign into your wallet using email to test the wallet actions again.

    You are done! You can now see your wallet connection on the Overview page and the keys are scoped to your project.
  </Step>
</Steps>

As next steps:

* You can now setup various [social authentication providers](/solutions/builder/embedded-wallet#login-providers).
* [Use more features of our web-sdk](/sdk/web/guides/send-sponsored-tx).
* [Request a ID token from Sequence to validate users on your backend](/sdk/headless-wallet/verification).