Client Side Enablement

While Passport is the custodial wallet, all operations are initiated by the end user on the client browser or app. Therefore, client-side JavaScript library and iOS/Android library are available to handle login confirmation as well as ensure any action or performed by an authenticated user.

For this version of the documentation, we will focus on web integration using JavaScript libraries. 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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/6.0.8/ethers.umd.min.js" type="application/javascript"></script>

<script src="https://unpkg.com/@credenza-web3/passport/dist/passport.umd.js" type="text/javascript"></script>

NOTE: Passport version 5.0 and above requires Ethers v6. All earlier versions require Ethers v5. If you are having issues, confirm that the versions match. See the Appendix for additional information. Passport 8 eliminates the need for the Magic library. These external libraries, not affiliated with Credenza, not only facilitate the integration of Passport but also empower clients to leverage various advanced blockchain functionalities. By leveraging these libraries, we can instantiate a Passport object in JavaScript, exposing methods, properties, and events for accessing the blockchain and smart contracts.

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. The configuration variables will be elaborated in the Appendix, which has been significantly enriched in Passport 8. Below illustrates the breadth of implementing a Passport configuration.

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

Numerous options are available, with most having default settings that can be overridden by configuration variables. Detailed information about these configuration options can be found in the Appendix.

Upon instantiating the Passport Object, you must invoke await passport.init() for Passport to initialize. Once this step is completed, you gain programmatic access to all its features. The primary decision to be made is whether to utilize Credenza Presence, a library of UI elements designed to manage login and account access, or to craft custom elements using the Passport API. While we assume that Presence will be utilized, we acknowledge that some clients may opt to develop their own elements.