Skip to main content

Sign-in and the phone app

The box has its own sign-in page. Sign in once on a device and it remembers you for a year. Added to a phone's home screen, the whole thing becomes one app called The Office, which can send notifications.

Where you see it​

The sign-in page. Its title is "The Office, sign in". It has a username box, a password box, and one button. It is light only, with no dark mode, because you see it about once per device.

The username box is there only so a password manager will save the login. The box ignores what is typed in it. The password is what counts.

The home-screen app. On a phone, add the page to the home screen. It shows up as one app named The Office, with its own icon. It opens straight to the Office.

Notifications. The app can send real phone notifications. Tap one and it opens that conversation. If the conversation is already open in a tab, it jumps there instead of opening a second one.

What happens, step by step​

  1. The owner opens the box's address on a new phone. The phone has no sign-in cookie (a small saved pass) yet.
  2. The box shows the sign-in page.
  3. The owner types the password. The phone's password manager fills it in after the first time.
  4. The box checks it. Too many wrong tries in a row, and it stops accepting tries for a while.
  5. On success, the box gives the phone a signed cookie good for a year. It moves the phone to the page it asked for as a normal page load, so the password manager offers to save.
  6. The owner adds it to the home screen. From now on, one tap opens The Office.

What powers it​

PartWhat it does
sdk_login.htmlThe sign-in page.
login() in sdk_server.pyChecks the password against a stored hash (a scrambled copy that cannot be turned back into the password). Limits wrong tries.
guarded() in sdk_server.pyRuns on every page and request. Checks the cookie and what that user is allowed to see.
cookie.keyA secret key on the box used to sign cookies. It is separate from the page's address, so a leaked address alone cannot make a valid cookie.
app.webmanifestNames the home-screen app The Office and sets its icon and start page.
sw.jsThe service worker (a small helper the phone keeps running). It turns a push message into a real notification.

Why it works this way​

Why a page and not the browser's pop-up. Sign-in used to be the browser's built-in pop-up box. Password managers could not save it. On an iPhone home-screen app, it asked again every single time the app opened. The owner's words: "it doesn't prompt me to save it... really just doesn't work." So it was replaced with a real page and a real form, built so password managers would treat it like any other login.

Two things, not one. Getting in takes both the page's private address (something you have) and the password (something you know).

One app, not two. Every screen points to the same app manifest (the file that tells a phone what the app is called). So only one app ever lands on the home screen, and it is always The Office.

Push is optional

If the box is missing the pieces for push, notifications simply stay off. Nothing else breaks.

Connected to​