Skip to main content
You are here: Passport JS EVM SDK

Install Passport JS EVM SDK

Installation

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:

Package manager

javascript
//with npm
npm install @credenza3/passport-evm

//with yarn
yarn add @credenza3/passport-evm

//with pnpm
pnpm install @credenza3/passport-evm

Script Tag / CDN

javascript
<script src="https://cdn.jsdelivr.net/npm/@credenza3/passport-evm/dist/passport.umd.js"></script>
<script>
  const Passport = window.CredenzaPassport
</script>

Initializing Passport

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. Below illustrates the breadth of implementing a Passport configuration.

typescript
import { Passport } from '@credenza3/passport-evm'
//or when using with script tag
//const Passport = window.CredenzaPassport

const passport = new Passport({
  chainId: Passport.chains.POLYGON_AMOY,
  clientId: "СREDENZA OAUTH CLIENT ID",
  provider?: window.ethereum // (as an example)
  config: {
    erc20Contract?: {
       address: string,
       decimals: number,
    },
    buyTokens?: true
    auth?: {
      extendedRegistration?: boolean;
    },
    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 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'
      }],
      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,
          primaryAction: { text: 'buy nft', contractAddress: '', tokenId?: 'tokenid', typeId?: 'typeId' },
          secondaryAction: { text: 'get sub', link: '', openInNewTab: true }
        }
      ],
    },
  },
})
await passport.init()

Upon creating the Passport object, invoke await passport.init() to initialize Passport. After initialization, you gain access to all its features. Decide whether to use Credenza Presence, a library of UI elements for managing login and account access, or to create custom elements using the Passport API. We assume you will use Presence, but you can develop your own elements if you prefer.

Configuration Options

When setting up Passport, you can customize its behavior with various configuration options. The following describe each of these options:

chainId

Determines the blockchain environment. Use Passport.chains.POLYGON_AMOY for testing.

clientId

Specifies your Credenza OAuth Client ID. This links to your account.

provider

Allows to set custom EVM provider instead of Credenza's default.

config

Contains various sub-configurations:

erc20Contract

Allows users to setup custom erc20 contract instead of CRED

buyTokens

Allows users to purchase tokens if set to true.

auth

Configures authentication methods. Options include:

  • extendedRegistration: Enables extended registration flow.

Configures navigation appearance and behavior. Options include:

  • theme: Sets the navigation theme, e.g., Passport.themes.BLACK.

  • direction: Places navigation elements, e.g., Passport.navDirections.BOTTOM.

email

Configures email behavior. Includes:

  • templateId: Uses a custom email template if provided.

content

Customizes UI, text and images. Options include:

  • cloak: Hides the background if set to true.
    IMPORTANT: Passport acts as an overlay screen to hide your page if the user is not logged into Passport. Additionally, it's not allowed to close the passport window until you log in if set to true.

  • imageUrl: Sets a custom image URL.

  • signin: Customizes sign-in title and description.

  • signup: Customizes sign-up title and description.

  • logout: Customizes logout title and description.

  • paymentResult: Modifies payment result messages with custom titles, subtitles, and descriptions.

  • progressVideos: Displays embedded videos, positions specified.

  • payPerArticle: Configures pay-per-article settings. Includes NFTs and memberships with contract addresses, optional token IDs, and types (ERC1155 or ERC721). Includes primary and secondary actions with text options and links.