Usage

import {Passport} from '@credenza-web3/passport'

or

const Passport = window.CredenzaPassport

const passport = new Passport({
  chainId: Passport.chains.POLYGON_MUMBAI,
  clientId: "СREDENZA OAUTH CLIENT ID",
  config: {
    buyTokens?: true
    auth?: {
      extendedRegistration: false,
      credentials?: false
      google?: true
      ticketmaster?: false
      passwordless?: false
      metamask?: true
    },
    nav?: {
      theme?: Passport.themes.BLACK,
      direction?: Passport.navDirections.BOTTOM,
    },
    email?: {
      templateId?: string // For custom email template usage
    },
    content?: {
      cloak?: boolean
      // depends on `cloak: true`
      payPerArticle?: [
        {
          nfts: [{address: 'contract-address-1', tokens:['token-id-1', 'token-id-2'], type: 'ERC1155' | 'ERC721'}],
          memberships: [{address: 'contract-address-1', owner: 'owner-address-1'}],
          uriMasks: ['part-of-the-article-uri'] // [''] for all uris
        }
      ],
      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()

chainId: The universal blockchain identifier for each of our supported chains as well as theire testnet counterparts.

clientId: The ID issused by Credenza that gives you authority to implement Passprot as well as define available authentication options

buyTokens: Enable the purchased of stored value, whether it is Credenza's standard CRED token or another ERC20-compliant token.

auth: Specific auth services that are made available for login.

nav: Credenza Presence provides a persistent Nav Bar. This config variables allows you to determine its position and appearance.

email: While Credenza provides generic email templates, clients that request a special format can specify that here.

cloak: This variable allows the client to specify whether only logged in users can access this page.

payPerArticle: Allowing for site content to be restricted to members, token holders, or users with enough loyalty points. It's a form of Digital Rights Management (DRM).

imageUrl: A custom image for the login page if you want to brand it

signin: Customizable messaging on the sign in page.

signup: Customizable messaging when users sign out.

logout: Customizable messaging when users sign out.

paymentResult: Customizable messaging when users make a purchase.

progressVideos: When Credenza runs transactions, the systems asks the user to wait until the blockchain activity commits, which can take any where from 2 seconds to 20 seconds. Seems like a perfect time for a short commercial. This is where you can set the video for when users wait. This feature does allow the user to "skip" once the transaction is complete.