React

The talon-login web component works inside React apps. Import it once to register the custom element, then render it like any other HTML element and call getUser() via a ref to get the authenticated user.

Setup

Install the package:

npm install talon-auth

Import the component once in your app (e.g. in main.tsx or the component that uses it) to register the custom element:

import 'talon-auth/login'

Reading the user

Use a ref to access the element and call getUser(), which returns a Promise that resolves once the user has authenticated. Call it from a useEffect and store the result in state:

const loginRef = useRef<TalonLoginElement>(null)
const [user, setUser] = useState(null)

useEffect(() => {
  loginRef.current?.getUser().then(setUser)
}, [])

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

Example

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