Skip to main content
You are here: Passport JS SUI SDK

Install Passport JS SUI SDK

Installation

Credenza Passport allows for client-side user authentication as well as the ability currently access the Blockchain through a custodial wallet.

Embedding Passport on a website is done through a simple set of JavaScript includes as well as an instantiation of the Passport object:

Package manager

javascript
//with npm
npm install @credenza3/passport-sui

//with yarn
yarn add @credenza3/passport-sui

//with pnpm
pnpm install @credenza3/passport-sui

Script Tag / CDN

javascript
<script src="https://cdn.jsdelivr.net/npm/@credenza3/passport-sui/dist/passport.umd.js"></script>
<script>
  const Passport = window.CredenzaPassport
</script>

Initializing Passport

Creating the Passport object is straightforward; we invoke the constructor with an optional set of parameters, defining the preferred blockchain and specifying crucial elements of the Presence visual components. Below illustrates the breadth of implementing a Passport configuration.

typescript
import { Passport } from '@credenza3/passport-sui'
//or when using with script tag
//const Passport = window.CredenzaPassport

const passport = new Passport({
  suiNetwork: Passport.suiNetworks.TESTNET,
  clientId: "СREDENZA OAUTH CLIENT ID",
  config: {
    storedValuePackageId?: string
    buyTokens?: boolean
    auth?: {
      extendedRegistration?: boolean;
      zk?: boolean;
    },
    nav?: {
      theme?: Passport.themes.BLACK,
      direction?: Passport.navDirections.BOTTOM,
    },
    email?: {
      templateId?: string // For custom email template usage
    },
    content?: {
      cloak?: boolean
      imageUrl?: 'https://yoursite.com/image.png', // Replaces default `Standford Socker` image
      signin: {
        title: "Your title!", // Replaces default ``
        description: "Your description.", // Replaces default ``
      },
      signup: {
        title: "Your title!", // Replaces default ``
        description: "Your description.", // Replaces default ``
      },
      logout: {
        title: "Your title!", // Replaces default ``
        description: "Your description!", // Replaces default ``
      },
      paymentResult?: {
        title?: "Your title!", // Replaces default `Success!`
        subtitle?: "Your subtitle!", // Replaces default `Your payment was successful!`
        description?: "Your description!", // Replaces default `Usually it takes us as many as a few minutes to deliver tokens to your account.`
      }
      progressVideos?: [{
        embedded: true,
        src: 'https://www.youtube.com/embed/tgbNymZ7vqY',
      }, {
        src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
      }]
    },
  },
})
await passport.init()

Upon creating the Passport object, invoke await passport.init() to initialize Passport. After initialization, you gain access to all its features. Decide whether to use Credenza Presence, a library of UI elements for managing login and account access, or to create custom elements using the Passport API. We assume you will use Presence, but you can develop your own elements if you prefer.

Configuration Options

When setting up Passport, you can customize its behavior with various configuration options. The following describe each of these options:

suiNetwork

Determines the blockchain environment. Use Passport.suiNetworks.TESTNET for testing.

clientId

Specifies your Credenza OAuth Client ID. This links to your account.

config

Contains various sub-configurations:

storedValuePackageId

Allows users to set custom package id for coin currency instead of CRED.

buyTokens

Allows users to purchase tokens if set to true.

auth

Configures authentication methods. Options include:

  • extendedRegistration: Enables extended registration flow.

  • zk: Allows zero-knowledge login.

Configures navigation appearance and behavior. Options include:

  • theme: Sets the navigation theme, e.g., Passport.themes.BLACK.

  • direction: Places navigation elements, e.g., Passport.navDirections.BOTTOM.

email

Configures email behavior. Includes:

  • templateId: Uses a custom email template if provided.

content

Customizes UI, text and images. Options include:

  • cloak: Hides the background if set to true.
    IMPORTANT:
    Passport acts as a overlay screen to hide your page if user is not logged in to Passport. Additionally, it's not allowed to close passport window until you login if set to true

  • imageUrl: Sets a custom image URL.

  • signin: Customizes signin title and description.

  • signup: Customizes signup title and description.

  • logout: Customizes logout title and description.

  • paymentResult: Modifies payment result messages with custom titles, subtitles, and descriptions.

  • progressVideos: Displays embedded videos, positions specified.