Comment on page
TypeScript Support
<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
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',
}
Last modified 1mo ago