TypeScript Support

PassageElement Type

<passage-auth>, <passage-login>, and <passage-register> all support the same interface.

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;
    identifier?: string;
    onSuccess?: OnSuccessCallback;
    beforeAuth?: BeforeAuthCallback;
    onEvent?: OnEventCallback;
    lang: string;
    defaultCountryCode?: string;
    tokenStore?: TokenStore;
    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;
    tokenStore?: TokenStore;
    theme?: 'light' | 'dark' | 'auto';
}