App data

Whatever serves your page (the cskn web worker, or a native shell’s offline copy of your bundle) writes a small object into window.cskn before your code runs. It tells your app which app it is, whose page it is on, and who is signed in.

<script>
  window.cskn = {
    isUserPage: true,
    user: { username: "ada" },
    app: { id: "6912…", slug: "blog", name: "Blog", version: "1.0.4", status: "active", isPublic: true }
  };
</script>

Reading it

import { getAppData, getAppInfo, getAppUser, getAppAuth, isUserPage } from '@cskn/sdk';

getAppData();   // the whole object, or null when nothing was injected
getAppInfo();   // { id, slug, name?, version, status, isPublic } | null
getAppUser();   // { username } of the page owner on a user page, else null
getAppAuth();   // the signed-in browser user, or null
isUserPage();   // boolean

The host only ever adds to window.cskn, and a native shell attaches its bridge to the same object. Neither is guaranteed to arrive first, so never assign window.cskn = … in your own code; spread into it instead (see Local development).

Fields

boolean

true on a creator’s profile (<username>.cskn.my/<slug>), false on the app’s own host.

{ username: string } | null

The owner of the profile being viewed. Only set on a user page.

object

required

Show properties

string

The app’s id.

string

The slug this bundle is served as. The platform’s per-app API routes key on it.

string

The app’s catalog name. Not every app has one.

string

The deployed version.

string

"active" when the app is live.

boolean

Whether the app is listed publicly.

object | null

The user signed in to this browser: { sub, name, username, picture, email, email_verified }. null for a visitor, and inside a native shell, where identity comes over the bridge instead.

string

Where your routes are mounted: "" on the app’s own host, "/<slug>" on a user page. Read it through appBasename().

object | null

The theme the page owner selected, resolved before first paint. Consumed by useThemeSelection.

{ vapidPublicKey: string | null; serviceWorker: string }

What a browser needs to subscribe to Web Push. Consumed by Web Push.

Common patterns

Show the profile owner’s data on a user page, and the signed-in user’s data otherwise:

import { getAppUser, isUserPage, useAppData } from '@cskn/sdk';

function Posts() {
  const owner = isUserPage() ? getAppUser()?.username : undefined;
  const { data } = useAppData<{ posts: Post[] }>({ appId: 'blog', username: owner });
  return <PostList posts={data?.data.posts ?? []} />;
}

Gate the app on its status:

const app = getAppInfo();
if (app?.status !== 'active') return <Unavailable />;

Local development

pnpm dev has no host to inject anything. Fill in a stand-in when nothing is there, and spread rather than assign so a bridge that a shell attached is kept:

main.tsx

if (import.meta.env.DEV && !window.cskn?.app) {
  window.cskn = {
    ...window.cskn,
    isUserPage: import.meta.env.VITE_IS_USER_PAGE === 'true',
    user: import.meta.env.VITE_IS_USER_PAGE === 'true' ? { username: 'devuser' } : null,
    app: { id: 'dev', slug: 'my-app', version: '0.1.0', status: 'active', isPublic: true },
    auth: null,
  };
}

Run with VITE_IS_USER_PAGE=true pnpm dev to preview the user page.

Get started

Concepts

Reading it

Fields

Common patterns

Local development

​Reading it

​Fields

​Common patterns

​Local development

Reading it

Fields

Common patterns

Local development