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

# Getting Started - Web

export const List = ({number, title, caption}) => {
  return <div className="[&>*]:m-0 text-sm flex flex-col gap-2">
      <div className="flex gap-2">
        <p style={{
    marginBlock: "0px"
  }}>{number}.</p>
        <span className="text-[#1C1C1CCC] text-base [&>*]:m-0" style={{
    marginBlock: "0px",
    overflowWrap: "break-word"
  }}>
          {title}
        </span>
      </div>
      <p style={{
    marginBlock: "0px"
  }}>{caption}</p>
    </div>;
};

export const EcosystemURLBlock = ({content = [], title = ""}) => {
  return <div style={{
    backgroundColor: "#6B3B900A",
    borderRadius: "8px",
    borderColor: "#F8F8F8"
  }} className="flex flex-col gap-4 border p-6">
      {title && <p className="font-bold text-2xl" style={{
    color: "#1C1C1C",
    marginBlock: "0px"
  }}>
          {title || ""}
        </p>}

      {content.length > 0 && content?.map((el, id) => <div key={id} className="flex flex-col [&>*]:my-0 gap-2">
            <div className="flex items-center justify-between [&>*]:my-0" style={{
    height: "fit-content"
  }}>
              <span className="font-bold" style={{
    color: "#1C1C1CCC",
    marginBlock: "0px"
  }}>
                {el.title}
              </span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" onClick={async () => {
    await navigator.clipboard.writeText(el.caption);
    alert("Link copied!");
  }}>
                <path d="M6 10C6 8.1144 6 7.1716 6.58579 6.58579C7.1716 6 8.1144 6 10 6H10.6667C12.5523 6 13.4951 6 14.0809 6.58579C14.6667 7.1716 14.6667 8.1144 14.6667 10V10.6667C14.6667 12.5523 14.6667 13.4951 14.0809 14.0809C13.4951 14.6667 12.5523 14.6667 10.6667 14.6667H10C8.1144 14.6667 7.1716 14.6667 6.58579 14.0809C6 13.4951 6 12.5523 6 10.6667V10Z" stroke="#191B1F" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M11.3334 6.00016C11.3318 4.02877 11.302 3.00764 10.7282 2.30845C10.6174 2.17342 10.4936 2.04962 10.3586 1.9388C9.62096 1.3335 8.52516 1.3335 6.3335 1.3335C4.14184 1.3335 3.04602 1.3335 2.30845 1.9388C2.17342 2.04961 2.04962 2.17342 1.9388 2.30845C1.3335 3.04602 1.3335 4.14184 1.3335 6.3335C1.3335 8.52516 1.3335 9.62096 1.9388 10.3586C2.04961 10.4936 2.17342 10.6174 2.30845 10.7282C3.00764 11.302 4.02877 11.3318 6.00016 11.3334" stroke="#191B1F" stroke-opacity="0.6" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            <p className="font-medium text-sm border-none" style={{
    color: el.color || "#1C1C1CCC"
  }}>
              {el.caption}
            </p>
          </div>)}
    </div>;
};

export const NoteStatement = ({label, message}) => <div className="relative text-sm" style={{
  borderRadius: 16,
  padding: "1px 20px",
  backgroundColor: "rgba(252,155,28,.06)"
}}>
    <p style={{
  marginBlock: 0
}}>
      {label && <span>
          <span className="font-bold" style={{
  color: "#fc9b1c"
}}>
            {label || "PS"}
          </span>
          {message && `: `}
        </span>}
      {message}
    </p>
    <div className="absolute left-0 top-1/2 -translate-y-1/2 rounded-e-full" style={{
  width: 2,
  height: 35,
  backgroundColor: "#fc9b1c"
}} />
  </div>;

Welcome to Bvndle SSO. With our API, you can access shared data within the ecosystem

###

<NoteStatement
  message={
<p style={{ marginBlock: 0 }}>
  Add the authentication page URL as a{" "}
  <strong>
    <em>webRedirectUrl</em>
  </strong>{" "}
  while onboarding as a Partner with Bvndle. See documentation{" "}
  <a href="https://bvndle.mintlify.app/bvndle-sso/onboard-partners">
    https://bvndle.mintlify.app/bvndle-sso/onboard-partners
  </a>
  .
</p>
}
/>

###

<List
  number={1}
  title={
<p style={{ marginBlock: 0 }}>
  Integrate the Bvndle SSO workflow using the official NPM package{" "}
  <a
    style={{ fontSize: "14px" }}
    href="https://www.npmjs.com/package/@bvndle/sso-client"
  >
    npm: @bvndle/sso-client
  </a>{" "}
  or open the window pointing to{" "}
  <a
    style={{ fontSize: "14px" }}
    href="
  https://dev-vfd-sso.netlify.app/?client_id=$BVNDLE_CLIENT_ID&scope=$SCOPE&device_type=$DEVICE_TYPE"
  >
    https://dev-vfd-sso.netlify.app/?client_id=$BVNDLE_CLIENT_ID&
    <br />
    scope=$SCOPE&device_type=$DEVICE_TYPE
  </a>
</p>
}
  caption={
<ul>
  <li>
    <strong>client_id</strong>: Represents the clientId created after
    partner registration.
  </li>
  <li>
    <strong>scope</strong>: <em>(optional)</em> Determines the user data
    that is returned (email, fullname, or profile). Defaults to{" "}
    <strong>profile</strong>.
  </li>
  <li>
    <strong>device_type</strong>: <em>(optional)</em> Determines the type of
    redirectUrl returned (web or mobile). Defaults to <strong>web</strong>.
  </li>
  <li>
    <strong>image</strong>: <em>(optional)</em> Determines whether you want
    the avatar in base64 format. For base64, send image=base64. Defaults to{" "}
    <strong>null</strong>.
  </li>
</ul>
}
/>

####

<List
  number={2}
  title={
<p style={{ marginBlock: 0 }}>
  If the user TAG & PASSWORD is validated, the window URL changes to:{" "}
  <strong>
    <em>redirectUrl/?authorization-code=NYFFS72HS9G</em>
  </strong>
  .
</p>
}
/>

####

<List
  number={3}
  title={
<p style={{ marginBlock: 0 }}>
  Next, run the Get SSO Token endpoint passing authorizationCode as the
  params. See documentation{" "}
  <a href="https://bvndle.mintlify.app/bvndle-sso/get-sso-access-token">
    https://bvndle.mintlify.app/bvndle-sso/get-sso-access-token
  </a>
  .
</p>
}
/>