TypeScript Support

PassageElement Type

<passage-auth>, <passage-login>, and <passage-register> all support the same prototype taking an app-id as an attribute, reflected as a property appId, and accepting properties for onSuccess and beforeAuth to set custom callback behavior.

If you are using TypeScript with your project you can import a PassageElement interface to see all available properties and methods on the elements:

import '@passageidentity/passage-elements/passage-auth'
import { PassageElement } from '@passageidentity/passage-elements'

Note: You will still need to import the top level package as a separate import because this is needed to register the custom elements for use in your module.

The PassageElement interface is defined as:

interface PassageElement extends HTMLElement {
  appId?: string
  onSuccess?: OnSuccessCallback
  beforeAuth?: BeforeAuthCallback
  lang: string,
  defaultCountryCode?: string,
  theme?: 'light' | 'dark' | 'auto',
}

Using this interface allows you to add additional type safety when interacting with the properties and methods on Passage Elements.

const passageAuth = document.querySelector('passage-auth') as PassageElement
const passageLogin = document.querySelector('passage-login') as PassageElement
const passageRegister = document.querySelector('passage-register') as PassageElement

PassageProfileElement Type

The <passage-profile> and <passage-passkey-table> elements have a similar type to PassageElement called PassageProfileElement. This type shares most of the properties as PassageElement but does not have any callback properties.

The PassageProfileElement type can be imported from the same top-level package entry point:

import { PassageProfileElement } from '@passageidentity/passage-elements'

The full PassageProfileElement interface is defined as:

export interface PassageProfileElement extends HTMLElement {
    appId?: string;
    lang: string;
    defaultCountryCode?: string;
    theme?: 'light' | 'dark' | 'auto',
}