Authenticate your user

This guide wires up login, logout, and a signed-in UI in your app. It does not cover product gating — for subscriptions, see monetizing with subscriptions; for time-based billing, see charging for time-based sessions.

---

1. Install and initialize the SDK

If you haven't yet, install @tiun/sdk and initialize it. The Quickstart has the full install commands; here's the minimal init:

import { tiun } from '@tiun/sdk';

tiun.init({
  snippetId: 'YOUR_SNIPPET_ID',
  language: 'en',
});

---

2. Add a login button

tiun.login() opens the tiun login overlay where the user enters their email and verifies via phone OTP. The full login flow — what the overlay does and how the session is persisted — is covered in Authentication / How it works in Reference.

function onClickLogin() {
  tiun.login();
}

After a successful login, userChange fires with event: 'login'.

---

3. Add a logout button

tiun.logout() clears the session on the current device.

function onClickLogout() {
  tiun.logout();
}

After logout, userChange fires with event: 'logout' and user is null.

---

4. React to user state changes

Listen to userChange to keep your UI in sync. The handler fires on session restore, login, logout, and anytime user state updates — so you don't need to poll.

tiun.on('userChange', (data) => {
  if (!data.isAuthenticated) {
    showLoginButton();
    return;
  }

  showLogoutButton(data.user.email);
});

data.user is the user object — null when nobody is signed in, otherwise it carries userId, email, and (for subscription users) productAccess. See User object in Reference for the full shape and when each field is populated.

---

5. Session restore is automatic

When a returning user loads your app, tiun restores their session automatically. userChange fires with event: 'init' and the same payload as above — so the handler from step 4 covers this case too.

---

Full example

import { tiun } from '@tiun/sdk';

tiun.on('userChange', (data) => {
  if (!data.isAuthenticated) {
    showLoginButton();
    return;
  }

  showLogoutButton(data.user.email);
});

tiun.init({
  snippetId: 'YOUR_SNIPPET_ID',
  language: 'en',
});

function login() {
  tiun.login();
}

function logout() {
  tiun.logout();
}

---

If your backend serves protected data, you'll also want to verify the user's identity server-side — see server-side authentication verification.