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

# Quick Start

> Get started with integrating OTPLESS by choosing the right tools for your project. Select from our range of Plugins, SDKs, and APIs to match your development needs.

## Web SDKs

Incorporate OTPLESS directly into your web applications using our comprehensive SDKs for popular web frameworks.

<CardGroup cols={4}>
  <Card title="JavaScript" icon="js" iconType="brands" color="#f7df1e" href="/docs/frontend-sdks/web-sdks/javascript" />

  <Card title="React JS" icon="react" iconType="brands" color="#61dafb" href="/docs/frontend-sdks/web-sdks/react" />

  <Card title="Angular" icon="angular" iconType="brands" color="#dd1b16" href="/docs/frontend-sdks/web-sdks/angular" />

  <Card title="Vue" icon="vuejs" iconType="brands" color="#4fc08d" href="/docs/frontend-sdks/web-sdks/vue" />
</CardGroup>

## Mobile SDKs

Enhance your mobile applications with secure and seamless authentication using our Mobile SDKs.

<CardGroup cols={4}>
  <Card title="Android" icon="android" iconType="brands" color="#3ddc84" href="/docs/frontend-sdks/app-sdks/android" />

  <Card title="iOS" icon="apple" iconType="brands" href="/docs/frontend-sdks/app-sdks/ios" />

  <Card title="React Native" icon="react" iconType="brands" color="#61dafb" href="/docs/frontend-sdks/app-sdks/react-native" />

  <Card
    title="Flutter"
    icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<g clip-path="url(https://mintlify.s3.us-west-1.amazonaws.com/otpless-96/#clip0_1940_4252)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.264 23.4826L8.32031 17.5779L11.6053 14.2356L20.8706 23.4826H14.264Z" fill="#02539A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.24219 17.5826L14.1331 11.6917H20.7558L11.5914 20.8561L8.24219 17.5826Z" fill="#45D1FD" fill-opacity="0.85"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.14453 12.444L6.48914 15.7863L20.7576 1.51782H14.1005L3.14453 12.444Z" fill="#45D1FD"/>
</g>
<defs>
<clipPath id="clip0_1940_4252">
<rect width="17.7232" height="22" fill="white" transform="translate(3.14062 1.5)"/>
</clipPath>
</defs>
</svg>}
    href="/frontend-sdks/app-sdks/flutter"
  />

  <Card
    title="Compose Multiplatform"
    icon={<svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 56 64" fill="none">
<g clip-path="url(https://mintlify.s3.us-west-1.amazonaws.com/otpless-96/#clip0_657_7666)">
<path d="M55.1617 16V48L28.0017 64L0.841797 48V16L28.0017 0L55.1617 16Z" fill="#6075F2"/>
<path d="M38.64 25.7143V38.2856L28 44.5715V64L55.16 48V16L38.64 25.7143Z" fill="#6B57FF"/>
<path d="M28.0017 44.5715L17.3618 38.2856V25.7143L0.841797 16V48L28.0017 64V44.5715Z" fill="url(https://mintlify.s3.us-west-1.amazonaws.com/otpless-96/#paint0_radial_657_7666)"/>
<path d="M17.3618 25.7143L28.0017 19.4286L38.6417 25.7143L55.1617 16L28.0017 0L0.841797 16L17.3618 25.7143Z" fill="url(https://mintlify.s3.us-west-1.amazonaws.com/otpless-96/#paint1_linear_657_7666)"/>
<path d="M27.9995 19.4297L38.6689 25.7154V38.2869L27.9995 44.5725L17.3301 38.2869V25.7154L27.9995 19.4297Z" fill="black"/>
</g>
<defs>
<radialGradient id="paint0_radial_657_7666" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(18.0681 16.5042) scale(47.1872 48.1507)">
<stop stop-color="#5383EC"/>
<stop offset="0.86699" stop-color="#7F52FF"/>
</radialGradient>
<linearGradient id="paint1_linear_657_7666" x1="41.6342" y1="0.430441" x2="11.6244" y2="33.7243" gradientUnits="userSpaceOnUse">
<stop stop-color="#33C3FF"/>
<stop offset="0.87843" stop-color="#5383EC"/>
</linearGradient>
<clipPath id="clip0_657_7666">
<rect width="56" height="64" fill="white"/>
</clipPath>
</defs>
</svg>}
    iconType="brands"
    color="#3ddc84"
    href="/frontend-sdks/app-sdks/cmp/headless"
  />

  <Card
    title="Ionic"
    icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(https://mintlify.s3.us-west-1.amazonaws.com/otpless-96/#clip0_1940_4275)">
<path d="M3.64 12C3.64 7.3829 7.3829 3.64 12 3.64C13.8586 3.64 15.5746 4.24553 16.9632 5.27182C17.3273 4.41465 18.0612 3.75246 18.9647 3.4854C17.0687 1.93303 14.6426 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 10.7286 22.7837 9.50547 22.3855 8.36683C21.8436 9.09946 20.9909 9.58825 20.0221 9.63838C20.2419 10.3863 20.36 11.1786 20.36 12C20.36 16.6171 16.6171 20.36 12 20.36C7.3829 20.36 3.64 16.6171 3.64 12Z" fill="url(https://mintlify.s3.us-west-1.amazonaws.com/otpless-96/#paint0_angular_1940_4275)"/>
<path opacity="0.3" d="M22.7712 9.77142C22.6724 9.2913 22.5421 8.82239 22.3828 8.36694C21.8409 9.09957 20.9882 9.58837 20.0195 9.63843C20.1749 10.1675 20.2795 10.7188 20.3275 11.2868C21.3476 11.1614 22.2295 10.5889 22.7712 9.77142Z" fill="#4788f7"/>
<path d="M12 16.8125C14.6516 16.8125 16.8125 14.6557 16.8125 12C16.8125 9.34836 14.6557 7.1875 12 7.1875C9.34428 7.1875 7.1875 9.34836 7.1875 12C7.1875 14.6516 9.34837 16.8125 12 16.8125Z" fill="#4788f7"/>
<path d="M19.2188 7.875C20.5477 7.875 21.625 6.79768 21.625 5.46875C21.625 4.13981 20.5477 3.0625 19.2188 3.0625C17.8898 3.0625 16.8125 4.13981 16.8125 5.46875C16.8125 6.79768 17.8898 7.875 19.2188 7.875Z" fill="#4788f7"/>
</g>
<defs>
<radialGradient id="paint0_angular_1940_4275" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12 12) rotate(-20.2249) scale(8.35246 8.46774)">
<stop stop-color="#4788f7"/>
<stop offset="0.114583" stop-color="#4788f7"/>
<stop offset="1" stop-color="#4788f7"/>
</radialGradient>
<clipPath id="clip0_1940_4275">
<rect width="22" height="22" fill="white" transform="translate(1 1)"/>
</clipPath>
</defs>
</svg>}
    href="/frontend-sdks/app-sdks/ionic"
  />
</CardGroup>

## Backend APIs

Utilize our Backend APIs to manage authentication and communicate with your application backend.

<CardGroup cols={2}>
  <Card title="Signup/Sign-in APIs" icon="user-plus" iconType="solid" color="#4d88ff" href="/docs/api-reference/endpoints/sign-in" />

  <Card title="Messaging APIs" icon="comments" iconType="solid" color="#ff9800" href="/docs/api-reference/endpoints/messaging" />
</CardGroup>

## Explore More

Control and tailor your authentication experience to perfectly match your brand for optimal user conversion.

<CardGroup cols={2}>
  <Card title="Auth Channel Customization" icon="code" iconType="solid" color="#6f42c1" href="https://otpless.com/dashboard/customer/channels">
    Customize which authentication channels are available to your users, including social logins or traditional methods like SMS and email verification.
  </Card>

  <Card title="UI Customization" icon="palette" iconType="solid" color="#f66d9b" href="https://otpless.com/dashboard/customer/customization">
    Design your authentication interface to align with your brand identity, modifying elements like colors, fonts, and logo placement.
  </Card>

  <Card title="Restrictions" icon="ban" iconType="solid" color="#e83e8c" href="https://otpless.com/dashboard/customer/countries">
    Set restrictions to bolster security, such as geographic limitations, IP blocking, and more, ensuring compliance and preventing abuse.
  </Card>

  <Card title="Third Party Integrations" icon="puzzle-piece" iconType="solid" color="#fd7e14" href="https://otpless.com/dashboard/customer/connectors">
    Extend functionality and streamline workflows by integrating with third-party services like CRM systems, analytics tools, and other enterprise solutions.
  </Card>
</CardGroup>