@protobase/ui 0.40.8 → 0.40.9

package/dist/app/app.d.ts

@@ -2,6 +2,7 @@ import { SidebarMode } from "../app-shell/sidebar-mode.js";
 import "../app-shell/index.js";
 import { ProjectUi } from "./pages/project-ui.js";
 import { PluginLoader } from "../plugins/load-plugin.js";
+import { NativeBridge } from "./native-auth-fetch.js";
 import { Locale } from "@protobase/schema/internal";
 import { AssistantClient, AuthSession, Client, RuntimeClient } from "@protobase/client";
 //#region src/app/app.d.ts
@@ -30,11 +31,13 @@ export type AppProps = {
   pluginLoader?: PluginLoader;
   /** The language the screens are in when the app's `/meta` sets none, such as the browser's (`browserLocale()`); English by default. */
   locale?: Locale;
+  /** The native bridge of the iOS or Android app (`nativeBridgeOf`): sign-in goes through native HTTP. */
+  nativeBridge?: NativeBridge;
 };
 /**
  * The admin: a public form at `/-/forms/<name>` for anyone, the sign-in route first, `/-/sign-in`, or browsing as a
  * visitor when the project's anonymous role reads, then a sidebar from `/meta`, `/:page` composed pages, `/:resource`
  * lists and `/:resource/:key` records. Fills its parent, in the theme this browser chose, light, dark or the system's.
  */
-export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...rest }: AppProps) => import("react").JSX.Element;
+export declare const App: ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, nativeBridge, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -328,11 +328,12 @@ const PublicFormGate = ({ baseUrl, client, ui, children }) => {
 * visitor when the project's anonymous role reads, then a sidebar from `/meta`, `/:page` composed pages, `/:resource`
 * lists and `/:resource/:key` records. Fills its parent, in the theme this browser chose, light, dark or the system's.
 */
-const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, ...rest }) => {
+const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, nativeBridge, ...rest }) => {
 	setFallbackLocale(locale ?? "en");
 	return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 		session: auth,
 		...rest.baseUrl && { origin: new URL(rest.baseUrl, window.location.href).origin },
+		...nativeBridge && { nativeBridge },
 		children: /* @__PURE__ */ jsx(Router, {
 			basePath,
 			initialUrl,

package/dist/app/main.js

@@ -1,4 +1,5 @@
 import { browserLocale } from "../locale/active-locale.js";
+import { nativeBridgeOf } from "./native-auth-fetch.js";
 import { uiFromModule } from "./pages/ui-from-module.js";
 import { App } from "./app.js";
 import { pageApiOrigin } from "./page-api-origin.js";
@@ -13,6 +14,7 @@ if (!root) throw new Error("index.html needs an element with id \"root\"");
 createRoot(root).render(/* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, {
 	baseUrl: `${pageApiOrigin() ?? ""}/api/v1`,
 	ui: uiFromModule(projectUi),
-	locale: browserLocale()
+	locale: browserLocale(),
+	nativeBridge: nativeBridgeOf(window)
 }) }));
 //#endregion

package/dist/app/native-auth-fetch.d.ts

@@ -0,0 +1,8 @@
+//#region src/app/native-auth-fetch.d.ts
+/** What the iOS and Android app's native bridge, `window.Capacitor`, offers the page; the shell never imports Capacitor. */
+export type NativeBridge = {
+  isNativePlatform(): boolean;
+  getPlatform(): string;
+  nativePromise(plugin: string, method: string, options: object): Promise<unknown>;
+};
+//#endregion

package/dist/app/native-auth-fetch.js

@@ -0,0 +1,53 @@
+import { authBasePath, capacitorOrigin } from "@protobase/schema/internal";
+//#region src/app/native-auth-fetch.ts
+/** The native bridge of the page, when it runs in the iOS or Android app; `undefined` in a browser. */
+const nativeBridgeOf = (win) => win.Capacitor?.isNativePlatform() ? win.Capacitor : void 0;
+const nullBodyStatuses = [
+	101,
+	204,
+	205,
+	304
+];
+const encodedSeparator = /%2f|%5c/i;
+const isPlatform = (platform) => Object.hasOwn(capacitorOrigin, platform);
+const allowedUrl = (url, apiOrigin) => url.origin === apiOrigin && !url.username && !url.password && url.pathname.startsWith(`${authBasePath}/`) && !encodedSeparator.test(url.pathname);
+const bodyOf = ({ status, headers, data }) => {
+	if (nullBodyStatuses.includes(status)) return null;
+	if (Object.entries(headers).some(([name, value]) => name.toLowerCase() === "content-type" && value.startsWith("application/json"))) return JSON.stringify(data);
+	return typeof data === "string" ? data : JSON.stringify(data);
+};
+/**
+* A `fetch` for the app's sign-in, at `<apiOrigin>/api/auth/...` only, through Capacitor's native HTTP: the session
+* cookie lives in the device's cookie jar, which native HTTP sends and keeps, and the request names the Capacitor
+* origin of the platform, which the server trusts for sign-in with a mobile section. The page cannot set `Cookie`, so
+* the cookie comes from the native jar alone. Any other address is refused before the bridge is called.
+*/
+const nativeAuthFetch = (bridge, apiOrigin) => {
+	const platform = bridge.getPlatform();
+	if (!isPlatform(platform)) throw new Error(`Signing in through native HTTP is for iOS and Android, not ${platform}`);
+	const origin = capacitorOrigin[platform];
+	return async (input, init) => {
+		const request = new Request(input, init);
+		const url = new URL(request.url);
+		if (!allowedUrl(url, apiOrigin)) throw new Error(`Native sign-in requests go to ${apiOrigin}${authBasePath}/ only, not ${request.url}`);
+		const withBody = request.method !== "GET" && request.method !== "HEAD";
+		const answer = await bridge.nativePromise("CapacitorHttp", "request", {
+			url: url.href,
+			method: request.method,
+			headers: {
+				...Object.fromEntries(request.headers),
+				origin
+			},
+			...withBody && { data: await request.text() },
+			responseType: "text",
+			disableRedirects: true
+		});
+		const headers = Object.entries(answer.headers).filter(([name]) => name.toLowerCase() !== "set-cookie");
+		return new Response(bodyOf(answer), {
+			status: answer.status,
+			headers
+		});
+	};
+};
+//#endregion
+export { nativeAuthFetch, nativeBridgeOf };

package/dist/auth/auth-provider.js

@@ -1,3 +1,4 @@
+import { nativeAuthFetch } from "../app/native-auth-fetch.js";
 import { providerName, withoutSignInLink } from "./provider-link.js";
 import { text } from "./messages.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -12,9 +13,10 @@ const useAuth = () => {
 };
 /**
 * Finds out whether the server has a login and who is signed in, and keeps that state for the app. Without a `session`,
-* it makes one on `origin`, the page's own by default.
+* it makes one on `origin`, the page's own by default; in the iOS or Android app, with its `nativeBridge`, the session
+* signs in through native HTTP, and "Forgot password?" is not offered, as a reset link cannot come back to the app.
 */
-const AuthProvider = ({ session: given, origin, children }) => {
+const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
@@ -35,8 +37,13 @@ const AuthProvider = ({ session: given, origin, children }) => {
 	signedOut.current = markSignedOut;
 	const session = useMemo(() => given ?? createAuthSession({
 		...origin && { origin },
+		...nativeBridge && { fetch: nativeAuthFetch(nativeBridge, origin ?? window.location.origin) },
 		onSignedOut: () => signedOut.current()
-	}), [given, origin]);
+	}), [
+		given,
+		origin,
+		nativeBridge
+	]);
 	const enter = useCallback(async (user) => {
 		const [{ missing }, staff] = await Promise.all([session.account.signInMethods(), session.staff.current()]);
 		setState(missing.length > 0 ? {
@@ -57,7 +64,7 @@ const AuthProvider = ({ session: given, origin, children }) => {
 		setState({ kind: "loading" });
 		session.status().then(async (status) => {
 			setSignInMethods(status.signInMethods);
-			setPasswordReset(status.passwordReset);
+			setPasswordReset(status.passwordReset && !nativeBridge);
 			setMcp(Boolean(status.mcp));
 			setCanSignUp(Boolean(status.signUp));
 			setPasskeyDomains(status.passkeyDomains ?? []);
@@ -76,7 +83,11 @@ const AuthProvider = ({ session: given, origin, children }) => {
 			kind: "error",
 			message: error instanceof Error ? error.message : text("noAnswer")
 		}));
-	}, [session, enter]);
+	}, [
+		session,
+		enter,
+		nativeBridge
+	]);
 	useEffect(recheck, [recheck]);
 	const api = useMemo(() => ({
 		state,

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.40.8";
+var version = "0.40.9";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };