Update Javascript client

An easy way to get started with Update is to use the create-update-app command. From this tool, you can choose a framework and have a fully working Update application in seconds. All you need to do is provide a name and your API keys.

npx create-update-app@latest

See our examples for source code and examples of how to use Update in different frameworks.

Create Update Client

To use Update throughout your application, you'll need to initialize the main client first.

Depending on what auth provider you are using, you can initialize the client with different options.

import { createClient } from "@updatedev/js/supabase";
 
const update = createClient({
    process.env.NEXT_PUBLIC_UPDATE_PUBLIC_KEY!,
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      billing: {
        environment: process.env.NODE_ENV === "production" ? "live" : "test",
      },
    }
});

Using Update in a SSR environment

If you're using Update in a framework like Next.js, initializing the client requires a bit more setup.

You should create a utils/update directory where you can create client, middleware, and server files.

First, install the @updatedev/ssr package.

npm install @updatedev/js @updatedev/ssr

import { createBrowserClient } from "@updatedev/ssr/supabase";
 
export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_UPDATE_PUBLIC_KEY!,
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      billing: {
        environment: process.env.NODE_ENV === "production" ? "live" : "test",
      },
    }
  );
}

Using Update with Supabase

Update has built-in support for Supabase.

To use Update with Supabase, you can use the createClient function from the @updatedev/js package.

import { createClient } from "@updatedev/js/supabase";
 
const client = createClient({
  process.env.NEXT_PUBLIC_UPDATE_PUBLIC_KEY!,
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    billing: {
      environment: process.env.NODE_ENV === "production" ? "live" : "test",
    },
  }
});

All methods from the @supabase/js client are available on the update client. See the Supabase docs for full documentation. Some examples are below.

const user = await client.auth.getUser();

The base Supabase client also has extended methods for Update.

const { data, error } = await client.billing.createCheckoutSession();

Get all products that you've created in the Update dashboard.

const { data, error } = await client.billing.getProducts();

{
  "data": {
    "products": [
      {
        "id": "f153c19a-b68f-49cd-8327-9fa85442f01c",
        "name": "Basic",
        "description": "",
        "prices": [
          {
            "id": "32b3cce4-d9ce-49a2-a151-f5b85008a6b6",
            "unit_amount": 1000,
            "currency": "usd",
            "interval": "month",
            "interval_count": 1
          }
        ]
      }
    ]
  },
  "error": null
}

Get all subscriptions for a user.

const { data: subscriptionData } = await client.billing.getSubscriptions();

{
  "data": {
    "subscriptions": [
      {
        "id": "3b6da9f5-d0b3-4056-8ab7-621fa5d7af28",
        "status": "active",
        "cancel_at_period_end": false,
        "canceled_at": null,
        "current_period_start": "2025-03-16T14:49:43+00:00",
        "current_period_end": "2025-04-16T14:49:43+00:00",
        "price": {
          "id": "32b3cce4-d9ce-49a2-a151-f5b85008a6b6",
          "unit_amount": 1000,
          "currency": "usd",
          "interval": "month",
          "interval_count": 1
        },
        "product": {
          "id": "f153c19a-b68f-49cd-8327-9fa85442f01c",
          "name": "Basic",
          "description": "",
          "status": "active"
        }
      }
    ]
  },
  "error": null
}

In Update, you can create a checkout session to sell subscriptions and one-time products. We connect with your billing provider to create the session. For now, we only support Stripe.

A typical flow is to get the price id from the getProducts function and then redirect the user to the checkout session.

const { data, error } = await client.billing.createCheckoutSession(
  priceId,
  {
    redirect_url: 'http://localhost:3000/protected/subscription',
  },
);

Cancel a subscription.

await client.billing.updateSubscription(id, {
  cancel_at_period_end: true,
});

Reactivate a subscription.

await client.billing.updateSubscription(id, {
  cancel_at_period_end: false,
});

List all entitlements for a user.

const { data, error } = await client.entitlements.list();

{
  "data": {
    "entitlements": [
      "premium",
      "pro",
      "enterprise"
    ]
  },
  "error": null
}

Check if a user has an entitlement.

const { data, error } = await client.entitlements.check("premium");

{
  "data": {
    "hasAccess": true
  },
  "error": null
}

An auth flow link is a page that is managed by Update that you can use to sign in users. Instead of building your own auth page, you can use the createAuthFlowLink method to create a link to the auth page. All that you need to do is verify the code that comes back from the auth page.

First, you need to create a connection and redirect the user to the auth page.

const { data, error } = await client.auth.createAuthFlowLink();
window.location.href = data.url;

const { data, error } = await client.auth.createAuthFlowLink({ type: 'sign-in' });
window.location.href = data.url;

{
  "data": {
    "url": "https://connect.update.dev/auth/25f917f9-5144-4019-80af-227c6c44f3fc/sign-in"
  },
  "error": null
}

The second part of the auth flow is to verify the code that comes back from the auth flow link. The user will be automatically signed in after the code is verified.

const { error } = await client.auth.verifyAuthFlowCode(code);

import { createClient } from "@/utils/update/server";
import { NextResponse } from "next/server";
 
export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get("code");
 
  if (!code) return NextResponse.redirect(`${origin}/sign-in`);
 
  const client = await createClient();
  const { error } = await client.auth.verifyAuthFlowCode(code);
  if (error) {
    return NextResponse.redirect(`${origin}/sign-in`);
  }
 
  return NextResponse.redirect(`${origin}/protected`);
}