Credenza3 Passport

Installation

with npm

npm install @credenza3/passport

with yarn

yarn add @credenza3/passport-sui

with pnpm

pnpm install @credenza3/passport-sui

or include a script tag

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

or with esm

<script type="module">
  import {Passport} from 'https://cdn.jsdelivr.net/npm/@credenza3/passport-sui/+esm'
</script>

Usage

Create the Passport instance

const passport = new Passport({
  suiNetwork: "testnet" | "mainnet" | "devnet",
  clientId: "СREDENZA OAUTH CLIENT ID",
  config: {
    storedValuePackageId?: string;
    buyTokens?: true
    auth?: {
      extendedRegistration: false,
      credentials?: false
      google?: true
      ticketmaster?: false
      passwordless?: false
      zk?:false
    },
    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()

Passport instance Properties

isLoggedIn: boolean

suiNetwork: string

user: User instance

Passport static properties

Passport.version (string) Current package version

Passport.SuiNetworks (enum) Supported sui networks

Passport.pages = (enum) Available pages for logged in User

Passport.paymentTypes = (enum) Available payment types

Passport.themes = (enum) Available color schemas

Passport.navDirections = (enum) Available directions where passport nav bar will expand when opened

Passport.navMinimizationTogglerPositions = (enum) Available minimization toggler positions

Passport.events = (enum) Available events for passport.on() listener

Modes

Passport can be used in 3 modes: Code UI Navigation

Apple Pay

You must verify your domain. https://support.stripe.com/questions/enable-apple-pay-on-your-stripe-account Enabled by default on all supported devices and registered domains.

Google Pay

Is enabled on all supported devices by default

Code mode

Login with credentials

await passport.login(provider: "OAUTH", oauthType?: "CREDENTIALS" | "GOOGLE" | "PASSWORDLESS" | "TICKETMASTER")
// Do not provide is 'signUp' param if you want passport to try detect automatically.

Login with JWT

await passport.jwtLogin(
  opts: { validatorId: string, idToken?: string, accessToken?: string }
)

Logout

await passport.logout()

Switch chain

await passport.switchChain({suiNetworkName: string}):Promise<void> // any of Passport.suiNetwork

Get current session address

await passport.getAddress():Promise<string | null>

Get current user roles

await passport.getRoles():Promise<(Admin | Superadmin | User)[]>

Confirm email / phone number

await passport.confirmAccount({phoneCode?:number, emailCode?:number}):Promise<boolean>

Perform NFT or Membership payment

await passport.openUI(Passport.pages.PAYMENT, {
  title: string,
  subtitle: string,
  payments?: {
    credenzaStoredValue?: {
        disabled?: boolean //default - false
    },
  },
  assets: [
    {
      packageId: string,
      type: string //  "credenza_asset_collection" | "membership" | "decom" | "cred",
      assetId?: number, // only needed if type is  "credenza_asset_collection"
      amount?: number // can be used for type cred or credenza_asset_collection
    },
  ]

})

Check membership

await passport.checkMembership(ownerAddress:string, membershipPackage: string):Promise<{isMember:boolean, meta: unknown}>

Get User Asset Balance

await passport.getUserAssetWithBalance(packageId: string,assetId: string):Promise<{ balance, objectId }>

Get User Assets Balance

await passport.getUserCollectionAssetsWithBalances(packageId: string):Promise<{ [assetId: string]: number }>

Send Credenza Decom Token

await passport.sendNft({ packageId, recipient, amount, assetId }: {
  recipient: string,
  packageId: string,
  assetId?: string, // needed only if sending assets
  amount?: number // needed only if sending assets, by default 1
}):Promise<any>

Send tokens (CRED or Sui native)

Do not pass isNativeCoinTransfer if you transfer the CRED tokens. Pass true if you want to transfer SUI tokens.

await passport.sendTokens(opts: {
  address: string,
  amount: bigint | number,
  isSuiNativeCoinTransfer?: boolean
}): Promise<void>;

Request AirDrop

await passport.requestAirDrop({ amount, coinType }: {
  amount: number
  coinType?: string // default CURRENT_PACKAGE::cred::CRED
}):Promise<void>

Navigation mode

Show navigation panel

await passport.showNavigation({
  bottom?: "5px",
  right?: "5px",
  left?: "inherit",
  top?: "inherit",
}, {
  minimization?: {
    enabled?: boolean, // false
    toggler?: {
      enabled?: boolean, // false
      position?: Passport.navMinimizationTogglerPositions.(LEFT | RIGHT), // left
    }
  }
}); // Bottom right corner

Hide navigation panel

passport.hideNavigation();

Passport UI mode

Open UI (Use one of Credenza.pages.PROFILE, Credenza.pages.PASSPORT_ID)

await passport.openUI() // defaults to Credenza.pages.PROFILE

Close UI

passport.close()

Open Passport alert

passport.toastAlert(
  message,
  type?: 'success' | 'warning' | 'failure' | 'info', // defaults to info
  opts?:{
    duration?: number // if -1 - then there is no timer and it stays untill dismissed,
    centered?: {
      enabled?: boolean,
      position?: 'top' | 'bottom' // can be used only for centered block
    }
  }
)

Open Passport rich alert

passport.openUI(Passport.pages.RICH_ALERT, {
  richAlertData: {
    title?: string,
    description?: string,
    actions?: [{
      text: string;
      link?: string;
      onClick?: (...args: unknown[]) => unknown;
    }]
  },
})

Destroy passport

passport.destroy()

Events (Most likely for Navigation and UI modes)

Listen for event

const unsubscribe = passport.on(Passport.events[eventName], (data) => {
  console.log(data)
})

Listen for event(Triggers once)

const unsubscribe = passport.once(Passport.events[eventName], (data) => {
  console.log(data)
})

Supported query params

Prepopulates email address on login / signup form.

?credenza_user_email=test%40test.com
// ?credenza_user_email=encodeURIComponent([email protected])

SSR

Passport is not build for the Server Side Rendering, but you still can make it work with the SSR app. Make sure you disable SSR for passport specific component or you can dynamically import passport after it's mounted e.g.

// svelte
onMount(() => {
  const {Passport} = (await import('@credenza3/passport-sui'))
})