@synqauth/plugin-passkey 0.0.0 → 0.3.0

package/README.md

@@ -4,7 +4,7 @@ A Synq plugin for passkeys from your own UI.
 
 Synq is customer identity for businesses: an OpenID Connect issuer for each of your brands, with Solana wallet, social, email and passkey sign-in. The documentation is at [docs.synq.build](https://docs.synq.build).
 
-This package is at 0.x and hasn't been published yet: its API can change in any release until Synq's first customer depends on it.
+This package is at 0.x, so a minor release can change its API: see its CHANGELOG.md.
 
 ## Usage
 
@@ -17,10 +17,14 @@ import { SynqProvider, usePlugin } from '@synqauth/react'
 const passkey = passkeyPlugin()
 
 // <SynqProvider plugins={[passkey]}> ... then, in a component:
-const { signInUrl, addUrl, list, remove } = usePlugin(passkey)
-location.assign(signInUrl({ returnTo: '/account' }))
+const { signIn, signInUrl, addUrl, list, remove } = usePlugin(passkey)
+
+const { data, error } = await signIn({ returnTo: '/account' })
+if (data) location.assign(data.signedIn ? data.returnTo : data.url)
 ```
 
+`signIn()` asks for the passkey right on your page when the app has own-UI sign-in on and the browser can use the brand's passkeys there. Otherwise it answers the URL of the hosted page's passkey step, the same URL `signInUrl()` gives.
+
 `list()` and `remove(id)` go through your `@synqauth/nextjs` route mount's account API and answer `{ data, error }`.
 
 ## License

package/dist/index.d.ts

@@ -14,8 +14,31 @@ export type PasskeyResult<T> = {
 };
 /** Calls the app's route mount, from its own page: what @synqauth/react and @synqauth/nextjs/client hand a plugin. */
 export type MountRequest = (path: string, init?: RequestInit) => Promise<Response>;
+/** How `signIn()` went: signed in on the page, or the hosted page to go to. */
+export type PasskeySignIn =
+/** Signed in: go to `returnTo` (or refresh the page's session). */
+{
+  readonly signedIn: true;
+  readonly returnTo: string;
+} |
+/** Go to `url`: the brand's page at its passkey step, which takes them in this browser. */
+{
+  readonly signedIn: false;
+  readonly url: string;
+};
 /** What the passkey plugin does from the page: where to send the person, and their passkeys. */
 export interface PasskeyActions {
+  /**
+   * Signs in with a passkey on the app's own page where the app has
+   * own-UI sign-in on and the browser takes the issuer's passkeys here;
+   * anywhere else, answers the hosted page's passkey step to go to. A
+   * prompt the person closed is the error `passkey_cancelled`; a passkey
+   * Synq didn't take is its problem (`passkey_unknown`, `passkey_failed`…).
+   */
+  signIn: (options?: {
+    returnTo?: string;
+    loginHint?: string;
+  }) => Promise<PasskeyResult<PasskeySignIn>>;
   /** Where to send someone to sign in with a passkey: the brand's page, at its passkey step. */
   signInUrl: (options?: {
     returnTo?: string;

package/dist/index.js

@@ -10,26 +10,43 @@ function passkeyPlugin(options = {}) {
 		for (const [name, value] of Object.entries(params)) if (value) query.set(name, value);
 		return `${base}/sign-in?${query.toString()}`;
 	};
+	const signInUrl = ({ returnTo, loginHint } = {}) => signInPath({
+		method: "passkey",
+		returnTo,
+		login_hint: loginHint
+	});
 	return {
 		id: PASSKEY_PLUGIN_ID,
 		actions: (request) => ({
-			signInUrl: ({ returnTo, loginHint } = {}) => signInPath({
-				method: "passkey",
-				returnTo,
-				login_hint: loginHint
-			}),
+			signIn: (signInOptions = {}) => signInOnPage(request, signInOptions, signInUrl),
+			signInUrl,
 			addUrl: ({ returnTo } = {}) => signInPath({
 				intent: "add-passkey",
 				returnTo
 			}),
 			list: async () => {
-				const result = await call(request, "account/v1/passkeys");
-				if (result.error) return {
-					data: null,
-					error: result.error
-				};
+				const passkeys = [];
+				const followed = /* @__PURE__ */ new Set();
+				let cursor = null;
+				do {
+					const query = new URLSearchParams({ limit: "200" });
+					if (cursor) query.set("cursor", cursor);
+					const result = await call(request, `account/v1/passkeys?${query.toString()}`);
+					if (result.error) return {
+						data: null,
+						error: result.error
+					};
+					passkeys.push(...result.data.data);
+					const next = result.data.next_cursor ?? null;
+					if (next !== null && (next === "" || followed.has(next))) return {
+						data: null,
+						error: new SynqError("invalid_response", "account/v1/passkeys answered a next_cursor that can't be followed")
+					};
+					if (next !== null) followed.add(next);
+					cursor = next;
+				} while (cursor !== null);
 				return {
-					data: result.data.data,
+					data: passkeys,
 					error: null
 				};
 			},
@@ -46,6 +63,81 @@ function passkeyPlugin(options = {}) {
 		})
 	};
 }
+/** A passkey on the page through the mount's `sign-in/flow`, or the hosted page's passkey step. */
+async function signInOnPage(request, options, signInUrl) {
+	const hosted = () => ({
+		data: {
+			signedIn: false,
+			url: signInUrl(options)
+		},
+		error: null
+	});
+	const browser = globalThis;
+	const statics = browser.PublicKeyCredential;
+	const credentials = browser.navigator?.credentials;
+	if (!statics?.getClientCapabilities || !statics.parseRequestOptionsFromJSON || !credentials) return hosted();
+	try {
+		if ((await statics.getClientCapabilities()).relatedOrigins !== true) return hosted();
+	} catch {
+		return hosted();
+	}
+	const step = (body) => call(request, "sign-in/flow", {
+		method: "POST",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify({
+			...body,
+			...options.returnTo ? { returnTo: options.returnTo } : {}
+		})
+	});
+	const asked = await step({ step: "passkey-options" });
+	if (asked.error) return asked.error.status === 404 ? hosted() : {
+		data: null,
+		error: asked.error
+	};
+	if (asked.data.status !== "passkey") return answered(asked.data, hosted);
+	let credential;
+	try {
+		credential = await credentials.get({ publicKey: statics.parseRequestOptionsFromJSON(asked.data.passkey.options) });
+	} catch {
+		credential = null;
+	}
+	if (!credential) return {
+		data: null,
+		error: new SynqError("passkey_cancelled", "No passkey was used")
+	};
+	const taken = await step({
+		step: "passkey",
+		credential: credential.toJSON()
+	});
+	if (taken.error) return {
+		data: null,
+		error: taken.error
+	};
+	return answered(taken.data, hosted);
+}
+/** What the mount answered, as `signIn()` answers it. */
+function answered(answer, hosted) {
+	switch (answer.status) {
+		case "signed-in": return {
+			data: {
+				signedIn: true,
+				returnTo: answer.returnTo
+			},
+			error: null
+		};
+		case "passkey":
+		case "retry":
+		case "refused":
+		case "expired": {
+			const code = answer.status === "passkey" ? answer.problem ?? "passkey_failed" : answer.status === "retry" ? answer.problem : answer.status === "refused" ? answer.reason : "invalid_session";
+			return {
+				data: null,
+				error: new SynqError(code, answer.message ?? code, { ...answer.status === "retry" && answer.retryAfter !== void 0 ? { retryAfter: answer.retryAfter } : {} })
+			};
+		}
+		default: return hosted();
+	}
+}
 /** Calls the mount and reads its JSON; a problem it answers, or no answer, is the result's `error`. */
 async function call(request, path, init) {
 	let response;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synqauth/plugin-passkey",
-  "version": "0.0.0",
+  "version": "0.3.0",
   "description": "A Synq plugin for passkeys from your own UI.",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@synqauth/js": "0.0.0"
+    "@synqauth/js": "0.3.0"
   },
   "devDependencies": {
     "vitest": "5.0.2"