# 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,
      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.
```

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>
```

Delete account

```
await passport.deleteAccount():Promise<void>
// Opens account deletion flow in a new tab
```

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 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 Coin (cred/sui)

```
await passport.requestAirDropCoin({ amount, coinType, suiNetwork }: {
  amount: number
  coinType?: string // default CURRENT_PACKAGE::cred::CRED,
  suiNetwork: string //'testnet' | 'mainnet'
}):Promise<void>
```

Request AirDrop Asset

```
await passport.requestAirDropAsset({
  amount,
  packageId,
  configId,
  assetId,
  suiNetwork,
}: {
  suiNetwork:  string //'testnet' | 'mainnet'
  amount: number
  packageId: string
  assetId: string
  configId: string
  title?: string
}):Promise<void>
```

Request Loyalty Points

```
await passport.requestLoyaltyPoints(eventId: number, packageId: string):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 Menu UI

```
await passport.openUI('navMenu')
```

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,
    action?: {
      text: string;
      link?: string;
      onClick?: (...args: unknown[]) => unknown;
    },
    closeButtonText?: string;
  },
})
```

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

```