Solid

The talon-login web component works inside Solid apps. Import it once to register the custom element, then render it in JSX and use a local ref with onMount to call getUser().

Setup

Install the package:

npm install talon-auth

Import the component once to register the custom element:

import 'talon-auth/login'

Reading the user

Declare a local variable with ! and assign it via the ref prop — Solid resolves DOM refs synchronously before onMount runs. Call getUser() in onMount and store the result in a signal:

let loginEl!: TalonLoginElement
const [user, setUser] = createSignal(null)

onMount(() => {
  loginEl.getUser().then(setUser)
})

return <talon-login ref={loginEl} app-id="[your-app-id]" />

Example

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