Sign-In Kit

The sign-in kit is one stylesheet and one script served by KT Accounts. It draws the account button, the person’s picture with a menu (name, handle, Account Settings, Log Out), and the app switcher with the person’s apps. Signing in always happens on accounts.aidenkt.com; the person comes back to the page they were on.

The kit works only on a registered aidenkt.com origin, or on an origin Aiden has added to the service’s allowed list.

Add It to a Page

1. Register the app and add the site’s exact origin, for example https://notes.aidenkt.com, to its Origins.
2. Put the two tags in the page’s <head>. The file names and integrity values change whenever the kit changes, so copy them from the app’s page in the portal, or read them from https://accounts.aidenkt.com/kit/manifest.json:

<link rel="stylesheet" href="https://accounts.aidenkt.com/kit/kit.<hash>.css" integrity="sha384-…" crossorigin="anonymous">
<script src="https://accounts.aidenkt.com/kit/kit.<hash>.js" integrity="sha384-…" crossorigin="anonymous" defer></script>

3. Put the placeholder where the button and picture go, usually at the right end of the nav:

<div data-kt-account data-kt-label="Log In"></div>

Without a data-kt-account element, the button is fixed at the top right of the page. Do not copy the kit’s script into the site or bundle it: it finds the accounts service from its own script URL.

Content Security Policy

If the site sends a Content-Security-Policy, add https://accounts.aidenkt.com to these five directives and keep what is already there:

script-src  https://accounts.aidenkt.com
style-src   https://accounts.aidenkt.com
font-src    https://accounts.aidenkt.com
img-src     https://accounts.aidenkt.com
connect-src https://accounts.aidenkt.com

Nothing else is needed: no 'unsafe-inline', and the kit works under require-trusted-types-for 'script'.

Show or Hide Parts of a Page

<p data-kt-if="signed-out" hidden>Sign in to see more. <button type="button" data-kt-open>Sign In</button></p>
<p data-kt-if="signed-in" hidden>You are signed in. <button type="button" data-kt-signout>Sign Out</button></p>
<section data-kt-if="perm:brand.materials" hidden>Only for people with brand.materials.</section>
<section data-kt-if="perm:role.friend" hidden>Only for people with the Friend badge.</section>
<section data-kt-if="owner" hidden>Only for Aiden.</section>

Attribute	What It Does
data-kt-account	Where the account button is drawn
data-variant on that element	line (the default), float or glass
data-kt-label on that element	The word on the signed-out button. Default Sign In
data-kt-apps="off" on that element	Leaves out the app switcher
data-kt-if="signed-in"	Shown only when someone is signed in
data-kt-if="signed-out"	Shown only when nobody is
data-kt-if="owner"	Shown only to Aiden
data-kt-if="perm:<name>"	Shown only to people with that permission, including role permissions such as role.friend. The owner has every permission
data-kt-open	Clicking it opens the sign-in card
data-kt-signout	Clicking it signs the person out

Write hidden on every data-kt-if element so nothing shows before the kit has checked. If the site’s CSS overrides hidden, add [hidden] { display: none !important; }.

Caution

These attributes only change what the browser shows. They protect nothing: anyone can read the page source. Check anything that matters on a server.

The Three Styles

data-variant	Looks Like	Use It On
line (default)	An outline in the page’s own text colour, no fill	Plain pages and bars whose text colour reads on their background
float	A white pill with a soft shadow	Busy or mid-tone backgrounds
glass	Frosted white glass with white text	Photos and full-bleed colour

line checks its contrast: if the element’s text colour is under 3 : 1 against the nearest opaque background behind it, the kit draws float instead. On KT Green, use Black text (about 11 : 1), not white.

The button is drawn inside a shadow root, so in page source the element looks empty. The kit reports what it did with attributes: data-kt-ready="signed-in" or "signed-out" once the first check is done, data-variant for the style in use, and data-variant-wanted for the style that was asked for.

The JavaScript API

window.ktAccounts exists once the kit script has run. The kit tag is defer, so it is there for a defer or module script placed after the kit tags, and for anything that runs on DOMContentLoaded or later.

Member
ready	Promise of the person (or null) after the first check
user()	The last known person, or null
can(name)	true if the person has that permission. The owner has all
open(options?)	Opens the sign-in card. Options: returnTo, title, message, dismissible
close()	Closes the card
refresh()	Asks the service again; resolves to the person or null
signOut()	Signs out, then refreshes
on("change", fn)	Calls fn(user) whenever the person changes. Returns a function that stops it
version	"1"
origin	The accounts service the kit talks to

Events on document, each with event.detail.user: ktaccounts:ready (once, after the first check), ktaccounts:change (every change, including the first check), and ktaccounts:signedin (after a sign-in in a card opened with dismissible: false).

const user = await window.ktAccounts.ready;
if (user) console.log(user.displayName, window.ktAccounts.can("role.developer"));
const stop = window.ktAccounts.on("change", (u) => console.log(u ? "signed in" : "signed out"));

The kit follows data-theme="light" or data-theme="dark" on <html> if the site sets it.