@pithy-sh/ui-react-native 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pithy-sh/ui-react-native",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/src/platform.ts

@@ -33,7 +33,7 @@ function decodeComponent(value: string): string {
 }
 
 /**
- * A query string as name to value: `"?email=ada%40example.com"` gives `{ email: "ada@example.com" }`. The leading
+ * A query string as name to value: `"?tab=billing%20history"` gives `{ tab: "billing history" }`. The leading
  * `?` is optional. The first value of a repeated name wins, as `URLSearchParams.get` answers.
  */
 export function parseQuery(search: string): Record<string, string> {

package/templates/src/router.tsx

@@ -38,7 +38,7 @@ import { useTheme } from "./theme";
 
 /** How the app navigates: the router a screen goes through, never `window`. */
 export interface RouterAdapter {
-  /** Where the app is now: the path and its query, such as `/otp?email=ada%40example.com`. */
+  /** Where the app is now: the path and its query, such as `/invitations/tok_1?resume=%2Fhome`. */
   path(): string;
   /** Go to `to`, a path with an optional query. `replace` swaps the current entry rather than pushing one. */
   go(to: string, options: { replace: boolean }): void;
@@ -151,7 +151,7 @@ export function usePath(): string {
   return splitPath(useLocation()).pathname;
 }
 
-/** The current query string, verbatim: `"?email=ada"`, or `""`. Re-renders on every navigation. */
+/** The current query string, verbatim: `"?tab=billing"`, or `""`. Re-renders on every navigation. */
 export function useSearch(): string {
   return splitPath(useLocation()).search;
 }

package/templates/src/routes/pithy/otp.tsx

@@ -5,8 +5,17 @@ import { screenPath } from "@pithy-sh/ui-core/src/routes";
 import { type ReactNode, useCallback, useRef, useState } from "react";
 import { Pressable, Text, TextInput, View } from "react-native";
 import { authConfig } from "../../pithy-config";
-import { routeTable, useGo, useSearch, useSearchParam } from "../../router";
-import { adoptSignIn, afterSignIn, refusedAccountScreen } from "../../session";
+import { parseQuery, queryString } from "../../platform";
+import { Redirect, routeTable, useGo, usePath, useSearch, useSearchParam } from "../../router";
+import {
+  adoptSignIn,
+  afterSignIn,
+  heldOtpAddress,
+  holdOtpAddress,
+  refusedAccountScreen,
+  releaseOtpAddress,
+  resumeQuery,
+} from "../../session";
 import { type Theme, useTheme } from "../../theme";
 import { transport } from "../../transport";
 import { Turnstile, turnstilePending, turnstileRequest } from "../../turnstile";
@@ -18,10 +27,13 @@ export const path = "/otp";
 // **The sign-in screen sends people here on a phone with no universal link.** It offers one way in, and there that
 // is a code: the Worker hands a magic link only to an https link, since any app can claim a custom scheme. With
 // `universalLinkOrigin` set, the sign-in screen mails a link instead and nothing sends anyone here. To send a code
-// from your own screen, go here with `go(`/otp?email=${encodeURIComponent(email)}`)`.
+// from your own screen, hand it the address and go here: `holdOtpAddress(email); go("/otp")`.
 //
-// **The email is a query parameter, not a path segment.** The address is a prefill, not the thing this screen
-// is, and `/otp` with no email is a valid screen that says "your inbox".
+// **The address is never in the URL.** A path or a query string is written to every request log between the
+// browser and the Worker, so `holdOtpAddress` keeps it in memory and in this tab's session storage. A reload keeps
+// it. A new tab, a bookmark or a link somebody else opens has none, and goes back to sign-in, since a code cannot be
+// checked without the address it was sent to. An older link carrying `?email=` is read once, held, and dropped from
+// the address bar.
 
 /**
  * This screen's English, baked in: the only catalog that survives being copied into your repository.
@@ -75,7 +87,12 @@ export default function Otp(): ReactNode {
   const theme = useTheme();
   const go = useGo();
   const search = useSearch();
-  const email = useSearchParam("email") ?? "";
+  const path = usePath();
+  const carried = useSearchParam("email");
+  const [email] = useState(() => {
+    if (carried) holdOtpAddress(carried);
+    return carried || heldOtpAddress() || "";
+  });
   const length = authConfig.otpLength;
   const [digits, setDigits] = useState<string[]>(() => Array.from({ length }, () => ""));
   const [captcha, setCaptcha] = useState<string | null>(null);
@@ -111,6 +128,7 @@ export default function Otp(): ReactNode {
     const held = result.ok && (await adoptSignIn(result.value));
     setBusy(false);
     if (held) {
+      releaseOtpAddress();
       // A sign-in a screen or an application's authorization sent somebody to resumes it, or goes home.
       const next = await afterSignIn(search);
       if (next !== null) go(next);
@@ -129,6 +147,15 @@ export default function Otp(): ReactNode {
     await sendOtp({ email, type: "sign-in" }, { ...transport.auth, gate: (body) => turnstileRequest(body, captcha) });
   }
 
+  if (carried !== null) {
+    const { email: _dropped, ...rest } = parseQuery(search);
+    return <Redirect to={`${path}${queryString(rest)}`} replace />;
+  }
+  if (!email) {
+    const resume = resumeQuery(search);
+    return <Redirect screen="sign-in" replace {...(resume ? { search: resume.slice(1) } : {})} />;
+  }
+
   return (
     <View
       style={{ flex: 1, padding: theme.spacing.lg, gap: theme.spacing.md, backgroundColor: theme.colors.background }}

package/templates/src/routes/pithy/sign-in.tsx

@@ -27,6 +27,7 @@ import {
   afterSignIn,
   beginHandoff,
   completeHandoff,
+  holdOtpAddress,
   type IdTokenUser,
   leaveInPlace,
   refusedAccountScreen,
@@ -435,8 +436,8 @@ export function SignInScreen(props: SignInScreenProps): ReactNode {
     // Whatever the answer, the code screen: telling a registered address from another is an enumeration oracle.
     await sendOtp({ email, type: "sign-in" }, { ...transport.auth, gate: check.attach });
     setBusy(false);
-    const resume = resumeQuery(search);
-    go(`${otpPath}${queryString({ email })}${resume ? `&${resume.slice(1)}` : ""}`);
+    holdOtpAddress(email);
+    go(`${otpPath}${resumeQuery(search)}`);
   }
 
   /** Where a sign-in goes when it took: the screen or the request it should resume, or home. */

package/templates/src/session.tsx

@@ -288,3 +288,62 @@ export async function afterSignIn(search: string): Promise<string | null> {
   if ((await resumeAfterSignIn(search)) && !onDevice()) return null;
   return "/";
 }
+
+/** The key the code screen's address waits under in this tab's session storage. */
+const OTP_ADDRESS_KEY = "pithy.auth.otp-address";
+
+/** The address, held in memory too: a phone has no session storage, and a private window may refuse it. */
+let otpAddress: string | null = null;
+
+/** The slice of the Web Storage API the held address uses. */
+interface TabStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+/** This tab's session storage, or `null` where there is none or it refuses to be read. */
+function tabStorage(): TabStorage | null {
+  try {
+    return (globalThis as { sessionStorage?: TabStorage }).sessionStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Hand the code screen the address a code was sent to, before going there.
+ *
+ * **Never in the URL.** A path or a query string is written to every request log between the browser and the
+ * Worker the moment a reload, a bookmark or a shared link sends it, so the address waits in memory and in this
+ * tab's session storage instead. A reload of the code screen keeps it; a new tab, a bookmark or a link somebody
+ * else opens does not, and the screen goes back to sign-in.
+ */
+export function holdOtpAddress(email: string): void {
+  otpAddress = email;
+  try {
+    tabStorage()?.setItem(OTP_ADDRESS_KEY, email);
+  } catch {
+    // Storage refused: memory still holds it for this page.
+  }
+}
+
+/** The address the code screen was handed, or `null`. */
+export function heldOtpAddress(): string | null {
+  if (otpAddress !== null) return otpAddress;
+  try {
+    return tabStorage()?.getItem(OTP_ADDRESS_KEY) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** Forget the held address, once the code has done its work. */
+export function releaseOtpAddress(): void {
+  otpAddress = null;
+  try {
+    tabStorage()?.removeItem(OTP_ADDRESS_KEY);
+  } catch {
+    // Nothing to forget.
+  }
+}