> ## 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 - Mobile

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 }}>
		Set up Deeplink schema or universal link in your application and add it as
		a{" "}
		<strong>
			<em>mobileRedirectUrl</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 }}>
		Set up an In-App Browser that redirects back to the APP when the URL
		changes to{" "}
		<strong>
			<em>redirectUrl</em>
		</strong>
	</p>
}
/>

####

<List
  number={2}
  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/@dblackdev/bvndle-sso-react-native"
		>
			npm: @dblackdev/bvndle-sso-react-native
		</a>{" "}
		or open the In-App Browser 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={3}
  title={
	<p style={{ marginBlock: 0 }}>
		If the user TAG & PASSWORD is validated, the In-App Browser URL changes
		to:{" "}
		<strong>
			<em>redirectUrl/?authorization-code=NYFFS72HS9G</em>
		</strong>
		. At this point it redirects back to the APP while returning the URL.
	</p>
}
/>

####

<List
  number={4}
  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>
}
/>