@synqauth/plugin-passkey 0.0.0 → 0.2.0

package/README.md

@@ -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,14 +10,16 @@ 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
@@ -46,6 +48,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.2.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.2.0"
   },
   "devDependencies": {
     "vitest": "5.0.2"