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://auth.magic.link/sdk" type="text/javascript"></script>

<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. These non-Credenza libraries not only allow the integration of Passport, but also enable several additional Blockchain features that sophisticated clients can utilize. With these libraries, we can now create a Passport object in JavaScript that exposes the methods, properties, and events that can be used to access the blockchain and smart contracts.

To create the Passport object, we simply call the constructor with an optional set of parameters that define the choice of blockchain as well as define some critical elements of the Presence visual elements. Those configuration variables will be defined in the Appendix, which has become much richer in Passport 4.0. Below is the simplest implementation of a Passport configuration.

const passport = new window.CredenzaPassport({
        chainId: '80001',
        config: {
          metamask: {
            disabled: false,
          },
          magic: {
            disabled: false,
          },
        },
      })

Once the Passport Object has been instantiated, you must call await passport.init() for Passport to initialize. This is a change from Passport v1. Once this is done, you now have programmatic access to all of its features. The most important decision to be made is whether to rely on Credenza Presence, the library of UI elements to handle login and account access or create your own using the Passport API. We will operate making the assumption that Presence will be used but we know some clients will build their own elements.