Nuxt

npm install usethatapp

UTA_CLIENT_ID=...            # required
UTA_CLIENT_SECRET=...        # required (server-side only)
UTA_REDIRECT_URI=http://localhost:3000/api/callback
NUXT_SESSION_PASSWORD=...    # 32+ chars, for the encrypted session cookie
# optional — default to production:
UTA_ISSUER=https://www.usethatapp.com/o
UTA_API_URL=https://www.usethatapp.com
UTA_SCOPES="openid entitlements"

import type { H3Event } from "h3";
import type { UtaFlowState } from "usethatapp";

export interface UtaSessionData {
  flow?: UtaFlowState;
  sub?: string;
  accessToken?: string;
  idToken?: string;
}

export function utaSession(event: H3Event) {
  return useSession<UtaSessionData>(event, {
    password: process.env.NUXT_SESSION_PASSWORD!, // 32+ chars
    name: "uta-session",
  });
}

import { beginLogin } from "usethatapp";

export default defineEventHandler(async (event) => {
  const session = await utaSession(event);
  const { authorizationUrl, flowState } = await beginLogin();
  await session.update({ flow: flowState }); // stash across the redirect
  return sendRedirect(event, authorizationUrl);
});

import { completeLogin, UtaError } from "usethatapp";

export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const session = await utaSession(event);

  // On cancel/deny, OAuth redirects back with ?error=... and no code.
  if (query.error) {
    await session.update({ flow: undefined });
    return sendRedirect(event, "/");
  }

  try {
    const s = await completeLogin({
      code: String(query.code),
      state: String(query.state),
      flowState: session.data.flow!,
    });
    await session.update({
      flow: undefined,
      sub: s.sub,                 // pairwise, per-app id — your user key
      accessToken: s.access_token,
      idToken: s.id_token,
    });
    return sendRedirect(event, "/");
  } catch (e) {
    if (e instanceof UtaError) return sendRedirect(event, "/"); // back, not signed in
    throw e;
  }
});

import { getEntitlement, UtaError, UtaTokenError } from "usethatapp";

export default defineEventHandler(async (event) => {
  const session = await utaSession(event);
  const token = session.data.accessToken;
  if (!token) {
    throw createError({ statusCode: 401, statusMessage: "not signed in" });
  }
  try {
    const entitlement = await getEntitlement(token);
    return { sub: session.data.sub, entitlement };
  } catch (e) {
    if (e instanceof UtaTokenError) {
      // Token revoked/expired (e.g. signed out of UseThatApp). Reconcile.
      await session.clear();
      throw createError({ statusCode: 401, statusMessage: "session ended" });
    }
    if (e instanceof UtaError) {
      throw createError({ statusCode: 502, statusMessage: e.message });
    }
    throw e;
  }
});

import { logoutUrl } from "usethatapp";

export default defineEventHandler(async (event) => {
  // Don't clear the session yet — the user may choose "Stay signed in". A real
  // logout revokes the token, so the next /api/entitlement 401s and reconciles.
  const session = await utaSession(event);
  const target = await logoutUrl({
    idToken: session.data.idToken,
    postLogoutRedirectUri: getRequestURL(event).origin + "/",
  });
  return sendRedirect(event, target);
});

<script setup lang="ts">
const PRO_PRODUCT_ID = "prod_<your-pro-id>"; // stable prod_... id from the dashboard

interface Entitlement {
  readonly entitled: boolean;
  readonly version: string | null;
  readonly product_id: string | null;
  readonly product_public_id: string | null;
  readonly status: string;
  readonly is_free: boolean;
  readonly period_end: string | null;
  readonly raw: Record<string, unknown>;
}

// 401 (signed out) lands in 'error'; the entitlement lands in 'data'.
const { data, error, pending } = await useFetch<{ entitlement: Entitlement }>(
  "/api/entitlement",
  { credentials: "include" },
);

const ent = computed(() => data.value?.entitlement);
const isPro = computed(() => !!ent.value?.entitled && ent.value?.product_public_id === PRO_PRODUCT_ID);
const signedIn = computed(() => !!ent.value);
</script>

<template>
  <header>
    <a v-if="signedIn" href="/api/logout">Sign out</a>
    <a v-else href="/api/login">Sign in with UseThatApp</a>
  </header>

  <p v-if="pending">Loading…</p>

  <!-- Signed out: a plain link to the server route starts the OAuth redirect -->
  <section v-else-if="!signedIn">
    <h1>Welcome</h1>
    <p>Sign in with your UseThatApp account to see your plan.</p>
    <a href="/api/login">Sign in with UseThatApp</a>
  </section>

  <!-- Gate on the stable product_public_id; show the mutable version name -->
  <h1 v-else-if="isPro">{{ ent?.version }} Dashboard</h1>

  <section v-else>
    <h1>Free Dashboard</h1>
    <a href="/api/login">Upgrade</a>
  </section>
</template>

import { getEntitlement, manageUrl, purchaseUrl } from "usethatapp";

const PRO_PRODUCT_ID = "prod_<your-pro-id>"; // stable prod_... id from the dashboard
const PRO_PRICE_ID = "<your-pro-price-id>";     // prc_... — from getPrices() or the dashboard

export default defineEventHandler(async (event) => {
  const session = await utaSession(event);
  const returnTo = getRequestURL(event).origin + "/";

  const token = session.data.accessToken;
  if (token) {
    const ent = await getEntitlement(token);
    if (ent.entitled && ent.product_public_id === PRO_PRODUCT_ID) {
      // Already on Pro — hosted subscription management instead.
      return sendRedirect(event, manageUrl({ next: returnTo }));
    }
  }
  // Not on Pro — hosted checkout. They return signed in, entitled.
  return sendRedirect(event, purchaseUrl(PRO_PRICE_ID, { next: returnTo }));
});