Svelte

The talon-login web component works inside Svelte apps. Import it once to register the custom element, then bind the element reference with bind:this and call getUser() in onMount.

Setup

Install the package:

npm install talon-auth

Import the component once to register the custom element:

import 'talon-auth/login'

Reading the user

Use bind:this to get a reference to the element and call getUser() in onMount. The Promise resolves once the user has authenticated:

let loginEl: TalonLoginElement
let user = null

onMount(() => {
  loginEl.getUser().then((u) => {
    user = u
  })
})

Svelte's reactivity picks up the assignment to user automatically, so the template updates as soon as the Promise resolves.

Example

The example below is a complete Svelte component that renders <talon-login> and displays a greeting once the user is authenticated.