@credenza3/passport-sui v0.0.4

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: {
    buyTokens?: true
    auth?: {
      extendedRegistration: false,
      credentials?: false
      google?: true
      ticketmaster?: false
      passwordless?: 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.

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>

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
    }
  }
)

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(test@test.com)

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'))
})