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