Styled login pages

kinedb has two sets of login pages:

• The built-in pages. They are plain HTML with no style, and they are in the server. They apply when you install no custom page.
• The styled pages. They are a separate package in web/auth-pages/. They have the style of the web console: the same colors, fonts, card and buttons.

The styled pages are custom login pages. The server serves them from the directory of the custom login pages (Custom login pages). The default install, the binary and the Docker image keep the built-in pages.

The pages

File	It replaces
login.html	The login page of GET /auth/login, and the answer of a failed password.
error.html	Each error page of /auth/. The text is general, because the file is static. The server gives the HTTP status.
link.html	The prompt to link a second provider (A custom link page).
logout.html	The page "You are signed out" of /end_session.
logout-confirm.html	The confirm page of /end_session (The pages).

The login page shows the same items as the built-in page:

• One button for each provider of GET /auth/providers. A button starts the login at /auth/start with the return and app values of the page address.
• The password form. It sends POST /auth/password with fetch. A failed password shows a message on the page. A correct password goes to the return address.
• When the web password login is off, the page shows the password form only for root, behind the button Sign in as root. The address parameter form=root opens that form.

The pages hold no inline script and no on* attribute, so the fixed CSP of a custom page allows them. They load files only from this server, at /auth/files/<path>.

Download the pages

Each release also publishes the built pages as kinedb-auth-pages.tar.gz. It is in the same place as the binaries, and SHA256SUMS-linux.txt lists it (see Run kinedb). To use the downloaded pages, do these steps:

1. Download the archive and check it:

   base=https://git.kinedb.com/api/packages/kinedb/generic/kinedb/latest
   curl -fLO "$base/kinedb-auth-pages.tar.gz"
   curl -fLO "$base/SHA256SUMS-linux.txt"
   sha256sum -c --ignore-missing SHA256SUMS-linux.txt

2. Unpack it into a directory that the server can read. The archive makes the directory dist-auth/, and the pages are directly in it. For example:

   mkdir -p /srv/kinedb
   tar xzf kinedb-auth-pages.tar.gz -C /srv/kinedb

3. Point the server at /srv/kinedb/dist-auth. Use --auth-webroot /srv/kinedb/dist-auth, or set KINEDB_AUTH_WEBROOT=/srv/kinedb/dist-auth. The flag wins. Another way is to copy the content of dist-auth/ to auth/ in the web console directory. See Custom login pages for the order of the rules.

4. Restart the server. The server finds the directory one time, at the start. A path that is not a directory gives a warning at the start, and the built-in pages apply.

5. Check that the styled page shows:

   • Open /auth/login in a browser. The page has the style of the web console.
   • curl -I <server>/auth/files/auth.css answers 200 OK. With the built-in pages, it answers 404 Not Found.
   • SHOW SETTINGS shows the full path of the directory as boot.auth_webroot.

After the first start, a changed file needs no restart. To change the pages, build them from the source as the next section shows.

Build the pages

Run the build in the folder web/:

bun install
bun run build:auth

The build writes the pages to web/dist-auth/. To write them to another directory, use --out:

bun scripts/build-auth-pages.js --out /srv/kinedb-auth

The build overwrites its own files in the directory. It removes no other file.

The output directory holds:

• The five pages.
• auth.css: one stylesheet. The build reads the console stylesheet web/src/styles/app.css and its design tokens, and writes them into this file.
• login.js, login-lib.js and link.js: the page scripts.
• fonts/ and kinedb-icon.svg: the fonts and the logo of the console.

Install the pages

Use one of these steps:

• Copy the content of web/dist-auth/ to auth/ in the web console directory. The server uses that directory when you give no other one.
• Start the server with --auth-webroot <dir>, or set KINEDB_AUTH_WEBROOT=<dir>.

The server finds the directory one time, at the start. Restart the server after you create the directory. After that, the server reads each file again on each request, so a changed file needs no restart.

To go back to the built-in pages, remove the directory, or remove one page file. A missing page file gives the built-in page.

Change the pages

The style comes from the console stylesheet. The package keeps no copy of a color, a font or a size. When the console style changes, build the pages again.

To change the pages for your site:

• Edit the installed copy. For example, change a text in login.html or add a rule at the end of auth.css. The next request shows the change.
• Or edit the source in web/auth-pages/ and build again. Add a rule to web/auth-pages/auth.css with the console tokens, for example var(--app-fg2).
• Or replace a page with your own file. Keep the rules of Custom login pages: no inline script, no file from another site, and the form fields that the server reads.