Framework Integration

The DOM Package is framework-agnostic and headless. It does not render login, account, catalog, or profile components. Create an SDK instance in browser-side code, keep it alive for the application shell, and connect onAuthStateChange() to your framework's state system.

React Pattern

In React, initialize the browser SDK in a provider or other client-only owner. The important pieces are to subscribe to session changes, explicitly restore the initial session, unsubscribe, and destroy the instance when its owner unmounts.

'use client';

import { Tiquo, type TiquoSession } from '@tiquo/dom-package';
import { useEffect, useRef, useState } from 'react';

export function AccountShell() {
  const tiquoRef = useRef<Tiquo | null>(null);
  const [session, setSession] = useState<TiquoSession | null>(null);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const tiquo = new Tiquo({
      publicKey: 'pk_dom_your_key_here',
    });
    tiquoRef.current = tiquo;

    const unsubscribe = tiquo.onAuthStateChange(setSession);

    void tiquo.getUser()
      .then(setSession)
      .catch(() => setSession(null))
      .finally(() => setReady(true));

    return () => {
      unsubscribe();
      tiquo.destroy();
      tiquoRef.current = null;
    };
  }, []);

  if (!ready) return <p>Loading account…</p>;
  if (!session) return <p>Sign in to continue.</p>;

  return (
    <>
      <p>Signed in as {session.user.email}</p>
      <button onClick={() => tiquoRef.current?.logout()}>
        Sign out
      </button>
    </>
  );
}

For a larger application, put the Tiquo instance, session, and actions in a context provider so routes share one client and one session subscription.

Authentication UI

Your component controls the two OTP steps:

1. Collect and validate the email, then call sendOTP(email).
2. Show a six-digit code field, then call verifyOTP(email, code).
3. Let the auth-state subscription update the application after verification.
4. Render loading, retry, expired-code, and signed-out states in the application's own design system.

See Customer Authentication for the method behavior.

useTiquo() and useTiquoAuth() Exports

Version 1.6.6 exports useTiquo(instance) and the backwards-compatible useTiquoAuth(instance) convenience facades. They require an existing SDK instance and expose a subset of its methods; they do not create a provider or finished UI.

For reactive React rendering, use onAuthStateChange() with React state as shown above. Continue using the Tiquo instance directly for methods not present on the convenience facade, including membership embeds, token access, external-token initialization, and booking-ticket downloads.

Other Frameworks

Use the same lifecycle in Vue, Svelte, or another framework:

• Construct one Tiquo client when the browser application mounts.
• Copy sessions from onAuthStateChange() into a reactive store.
• Call getUser() for explicit initial restoration.
• Keep the UI and validation in the framework.
• Call the unsubscribe function and destroy() when the owning application shell unmounts.