@protobase/ui 0.5.0 → 0.6.0

package/dist/account/account-security-page.js

@@ -1,23 +1,36 @@
 import { Spinner } from "../primitives/spinner.js";
 import { PageHeader } from "../app-shell/page-header.js";
-import { authMessage } from "../auth/auth-messages.js";
+import { authMessage, providerMessage } from "../auth/auth-messages.js";
+import { readProviderError, withoutSignInLink } from "../auth/provider-link.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { PasskeysSection } from "./passkeys-section.js";
+import { SignInProvidersSection } from "./sign-in-providers-section.js";
 import { TwoFactorSection } from "./two-factor-section.js";
 import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/account-security-page.tsx
-/** The signed-in person's passkeys and two-factor authentication, within what the sign-in policy allows. */
+const takeLinkError = () => {
+	const code = readProviderError(window.location.href);
+	if (code) window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
+	return code;
+};
+/** The signed-in person's passkeys, two-factor authentication and connected accounts, within what the sign-in policy allows. */
 const AccountSecurityPage = ({ email }) => {
-	const { session } = useAuth();
+	const { session, signInProviders, linkProvider } = useAuth();
 	const { account } = session;
 	const [loaded, setLoaded] = useState();
 	const [error, setError] = useState();
+	const [linkError] = useState(takeLinkError);
 	const reload = useCallback(() => {
-		Promise.all([account.signInMethods(), account.passkeys()]).then(([methods, passkeys]) => setLoaded({
+		Promise.all([
+			account.signInMethods(),
+			account.passkeys(),
+			account.linkedProviders()
+		]).then(([methods, passkeys, linked]) => setLoaded({
 			methods,
-			passkeys
+			passkeys,
+			linked
 		}), (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your sign-in methods"));
 	}, [account]);
 	useEffect(reload, [reload]);
@@ -27,25 +40,34 @@ const AccountSecurityPage = ({ email }) => {
 		children: [/* @__PURE__ */ jsx(PageHeader, {
 			title: "Sign-in & security",
 			subtitle: email
-		}), loaded ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PasskeysSection, {
-			rule: loaded.methods.policy.passkey,
-			passkeys: loaded.passkeys,
-			onAdd: () => thenReload(account.addPasskey()),
-			onRename: (id, name) => thenReload(account.renamePasskey(id, name)),
-			onRemove: (id) => thenReload(account.removePasskey(id))
-		}), /* @__PURE__ */ jsx(TwoFactorSection, {
-			rule: loaded.methods.policy.twoFactor,
-			enabled: loaded.methods.account.twoFactor,
-			authenticatorApp: loaded.methods.account.authenticatorApp,
-			mail: loaded.methods.mail,
-			needsPassword: loaded.methods.account.password,
-			onStartApp: (password) => account.startAuthenticatorApp(password),
-			onConfirmApp: (code) => account.confirmAuthenticatorApp(code),
-			onEmailedCodes: (password) => account.turnOnEmailedCodes(password),
-			onTurnOff: (password) => account.turnOffTwoFactor(password),
-			onNewBackupCodes: (password) => account.newBackupCodes(password),
-			onChanged: reload
-		})] }) : error ? /* @__PURE__ */ jsx("p", {
+		}), loaded ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(PasskeysSection, {
+				rule: loaded.methods.policy.passkey,
+				passkeys: loaded.passkeys,
+				onAdd: () => thenReload(account.addPasskey()),
+				onRename: (id, name) => thenReload(account.renamePasskey(id, name)),
+				onRemove: (id) => thenReload(account.removePasskey(id))
+			}),
+			/* @__PURE__ */ jsx(TwoFactorSection, {
+				rule: loaded.methods.policy.twoFactor,
+				enabled: loaded.methods.account.twoFactor,
+				authenticatorApp: loaded.methods.account.authenticatorApp,
+				mail: loaded.methods.mail,
+				needsPassword: loaded.methods.account.password,
+				onStartApp: (password) => account.startAuthenticatorApp(password),
+				onConfirmApp: (code) => account.confirmAuthenticatorApp(code),
+				onEmailedCodes: (password) => account.turnOnEmailedCodes(password),
+				onTurnOff: (password) => account.turnOffTwoFactor(password),
+				onNewBackupCodes: (password) => account.newBackupCodes(password),
+				onChanged: reload
+			}),
+			signInProviders.length > 0 && /* @__PURE__ */ jsx(SignInProvidersSection, {
+				providers: signInProviders,
+				linked: loaded.linked,
+				onConnect: linkProvider,
+				error: linkError && providerMessage(linkError, signInProviders.length === 1 ? signInProviders[0].name : "the provider")
+			})
+		] }) : error ? /* @__PURE__ */ jsx("p", {
 			role: "alert",
 			className: "text-[13px] text-danger-text",
 			children: error

package/dist/account/sign-in-policy-form.js

@@ -22,15 +22,25 @@ const rowNote = ({ method }, draft, { mail, effective, policy }) => {
 	if (method === "emailCode" && !mail) return "Needs mail settings (PROTOBASE_SMTP_URL and PROTOBASE_MAIL_FROM): off until they are set.";
 	if (method === "password" && !mail && draft.password === "forbidden") return "Without mail settings, password sign-in stays on so nobody is locked out.";
 	if (method === "staffAccess" && !mail && draft.staffAccess === "notify") return "Needs mail settings (PROTOBASE_SMTP_URL and PROTOBASE_MAIL_FROM): staff cannot sign in until they are set.";
+	if (method === "platformSignIn" && draft.platformSignIn === "allowed" && (draft.passkey === "required" || draft.twoFactor === "required")) return "Off while passkeys or two-factor authentication are required: it skips the second step.";
 	if (draft[method] === policy[method] && effective[method] !== policy[method]) return `Applies as ${ruleLabel(method, effective[method])} for now.`;
 };
+const rowsFor = ({ operator, platformSignIn }) => policyRows.flatMap((row) => {
+	if (row.method === "staffAccess" && !operator) return [];
+	if (row.method === "platformSignIn") return platformSignIn ? [{
+		...row,
+		label: `Sign in with ${platformSignIn} through the platform`
+	}] : [];
+	return [row];
+});
 /**
 * The admin's sign-in policy: for each way to sign in, whether people may use it, must set it up, or cannot use it;
-* and, when the app has an operator provider, whether its staff may sign in as people.
+* when the app has an operator provider, whether its staff may sign in as people; and when the platform adds a sign-in
+* provider, whether people may use it.
 */
 const SignInPolicyForm = ({ state, onSave, busy, error, notice }) => {
 	const [draft, setDraft] = useState(state.policy);
-	const rows = policyRows.filter(({ method }) => method !== "staffAccess" || state.operator);
+	const rows = rowsFor(state);
 	const changed = rows.some(({ method }) => draft[method] !== state.policy[method]);
 	return /* @__PURE__ */ jsxs("form", {
 		className: "flex flex-col gap-4",

package/dist/account/sign-in-policy-labels.js

@@ -64,6 +64,12 @@ const policyRows = [
 				label: "Off"
 			}
 		]
+	},
+	{
+		method: "platformSignIn",
+		label: "Sign-in through the platform",
+		description: "The sign-in provider the platform that runs this app adds, for people who have an account here already. It never creates accounts.",
+		rules: onOff
 	}
 ];
 /** The word for `rule` in `method`'s row, for example "Optional" for an allowed passkey. Every rule the server stores has one. */

package/dist/account/sign-in-providers-section.js

@@ -0,0 +1,54 @@
+import { Badge } from "../primitives/badge.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection, SectionError } from "./account-section.js";
+import { useState } from "react";
+import { Link2 } from "lucide-react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/sign-in-providers-section.tsx
+/** The providers someone can sign in with besides a password, and a way to connect one whatever address it has. */
+const SignInProvidersSection = ({ providers, linked, onConnect, error: returned }) => {
+	const [busy, setBusy] = useState();
+	const [error, setError] = useState(returned);
+	const connect = async (provider) => {
+		setBusy(provider);
+		setError(void 0);
+		try {
+			await onConnect(provider);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setBusy(void 0);
+		}
+	};
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Connected accounts",
+		description: "Sign in with these instead of your password. Connecting one asks you to sign in there; its address may differ from yours here.",
+		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsx("ul", {
+			className: "divide-y rounded-md border",
+			children: providers.map((provider) => /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-wrap items-center gap-3 px-3 py-2.5",
+				children: [
+					/* @__PURE__ */ jsx(Link2, { className: "size-4 shrink-0 text-muted-foreground" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-[13px] font-medium",
+						children: provider.name
+					}),
+					linked.includes(provider.id) ? /* @__PURE__ */ jsx(Badge, {
+						tone: "green",
+						children: "Connected"
+					}) : /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						loading: busy === provider.id,
+						disabled: busy !== void 0,
+						onClick: () => void connect(provider.id),
+						children: ["Connect ", provider.name]
+					})
+				]
+			}, provider.id))
+		})]
+	});
+};
+//#endregion
+export { SignInProvidersSection };

package/dist/auth/auth-gate.js

@@ -1,43 +1,68 @@
 import { Spinner } from "../primitives/spinner.js";
+import { providerMessage } from "./auth-messages.js";
+import { readProviderError, readSignInLink, withoutSignInLink } from "./provider-link.js";
 import { useAuth } from "./auth-provider.js";
 import { Button } from "../primitives/button.js";
 import { EmailCodePage } from "./email-code-page.js";
 import { FirstRunPage } from "./first-run-page.js";
 import { readResetLink, withoutResetLink } from "./reset-link.js";
 import { ForgotPasswordPage } from "./forgot-password-page.js";
+import { ProviderSignInPage } from "./provider-sign-in-page.js";
 import { ResetPasswordPage } from "./reset-password-page.js";
 import { SetupRequiredPage } from "./setup-required-page.js";
 import { SignInPage } from "./sign-in-page.js";
 import { readStaffLink, withoutStaffLink } from "./staff-link.js";
 import { StaffSignInPage } from "./staff-sign-in-page.js";
 import { TwoFactorPage } from "./two-factor-page.js";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/auth-gate.tsx
 const firstPage = () => {
-	const link = readResetLink(window.location.href);
+	const href = window.location.href;
+	const link = readResetLink(href);
 	if (link) return {
 		kind: "reset-password",
 		token: link.token
 	};
-	const staff = readStaffLink(window.location.href);
-	return staff ? {
+	const staff = readStaffLink(href);
+	if (staff) return {
 		kind: "staff-sign-in",
 		link: staff
+	};
+	const provider = readSignInLink(href);
+	if (provider) return {
+		kind: "provider-sign-in",
+		provider
+	};
+	const providerError = readProviderError(href);
+	return providerError ? {
+		kind: "sign-in",
+		providerError
 	} : { kind: "sign-in" };
 };
 const forgetResetLink = () => window.history.replaceState(window.history.state, "", withoutResetLink(window.location.href));
 const forgetStaffLink = () => window.history.replaceState(window.history.state, "", withoutStaffLink(window.location.href));
+const forgetSignInLink = () => window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
 /**
 * Shows the app when the user is signed in (or the server has no login), and the right page otherwise: the sign-in
 * steps, or the page an emailed reset link or a staff link opened.
 */
 const AuthGate = ({ workspace, children }) => {
-	const { state, recheck, passwordReset, signOut } = useAuth();
+	const { state, recheck, passwordReset, signOut, signInProviders } = useAuth();
 	const [page, setPage] = useState(firstPage);
 	useEffect(() => {
-		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => current.kind === "email-code" || current.kind === "sign-in" && current.notice ? { kind: "sign-in" } : current);
+		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => {
+			if (current.kind === "provider-sign-in") forgetSignInLink();
+			return current.kind === "email-code" || current.kind === "provider-sign-in" || current.kind === "sign-in" && (current.notice || current.error || current.providerError) ? { kind: "sign-in" } : current;
+		});
 	}, [state.kind]);
+	useEffect(() => {
+		if (state.kind === "signed-out" && page.kind === "sign-in" && page.providerError) forgetSignInLink();
+	}, [state.kind, page]);
+	const signInFailed = useCallback((error) => setPage({
+		kind: "sign-in",
+		error
+	}), []);
 	const leaveResetPage = (next) => {
 		forgetResetLink();
 		setPage(next);
@@ -89,20 +114,28 @@ const AuthGate = ({ workspace, children }) => {
 		onBack: backToSignIn
 	});
 	if (state.kind === "setup-required") return /* @__PURE__ */ jsx(SetupRequiredPage, { missing: state.missing }, state.missing.join());
+	if (page.kind === "provider-sign-in") return /* @__PURE__ */ jsx(ProviderSignInPage, {
+		provider: page.provider,
+		workspace,
+		onFailed: signInFailed
+	});
 	if (page.kind === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { onBack: () => setPage({ kind: "sign-in" }) });
 	if (page.kind === "email-code") return /* @__PURE__ */ jsx(EmailCodePage, {
 		email: page.email,
 		onBack: () => setPage({ kind: "sign-in" })
 	});
+	const providerError = page.providerError && providerMessage(page.providerError, signInProviders.length === 1 ? signInProviders[0].name : "the provider");
+	const error = page.error ?? providerError;
 	return /* @__PURE__ */ jsx(SignInPage, {
 		workspace,
 		notice: page.notice,
+		error,
 		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0,
 		onCodeSent: (email) => setPage({
 			kind: "email-code",
 			email
 		})
-	});
+	}, error);
 };
 //#endregion
 export { AuthGate };

package/dist/auth/auth-messages.js

@@ -44,5 +44,14 @@ const staffSignInMessage = (failure) => {
 	if (typeof failure === "string") return "The staff sign-in did not go through. Try again.";
 	return failure.status === 429 ? tooManyRequests : failure.message;
 };
+const providerMessages = {
+	signup_disabled: (name) => `No account here belongs to this ${name} account. Ask an admin to add you, or sign in another way.`,
+	account_not_linked: (name) => `Your ${name} account is not linked to your account here. Sign in another way, then connect ${name} on the Sign-in & security page.`,
+	account_already_linked_to_different_user: (name) => `This ${name} account is linked to someone else here already.`,
+	unable_to_link_account: (name) => `Your ${name} account could not be linked. Try again.`,
+	access_denied: (name) => `${name} did not let you in, or you cancelled.`
+};
+/** Why signing in or linking with the provider `name` did not go through, from the code it came back with. */
+const providerMessage = (code, name) => providerMessages[code]?.(name) ?? `Signing in with ${name} did not go through. Try again.`;
 //#endregion
-export { authMessage, signInMessage, staffSignInMessage };
+export { authMessage, providerMessage, signInMessage, staffSignInMessage };

package/dist/auth/auth-provider.js

@@ -1,3 +1,4 @@
+import { providerName, withoutSignInLink } from "./provider-link.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createAuthSession } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
@@ -14,6 +15,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
 	const [socialProviders, setSocialProviders] = useState([]);
+	const [platformSignIn, setPlatformSignIn] = useState();
 	const [staffSignIn, setStaffSignIn] = useState();
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
@@ -41,6 +43,7 @@ const AuthProvider = ({ session: given, children }) => {
 			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
 			setSocialProviders(status.socialProviders);
+			setPlatformSignIn(status.platformSignIn);
 			setStaffSignIn(status.staffSignIn);
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
@@ -57,6 +60,10 @@ const AuthProvider = ({ session: given, children }) => {
 		signInMethods,
 		passwordReset,
 		socialProviders,
+		signInProviders: socialProviders.map((id) => ({
+			id,
+			name: providerName(id, platformSignIn)
+		})),
 		staffSignIn,
 		markSignedOut,
 		recheck,
@@ -66,7 +73,10 @@ const AuthProvider = ({ session: given, children }) => {
 		signInWithPasskey: async () => enter(await session.signInWithPasskey()),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
-			window.location.assign(await session.signInSocial(provider, window.location.href));
+			window.location.assign(await session.signInSocial(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
+		},
+		linkProvider: async (provider) => {
+			window.location.assign(await session.account.linkProvider(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
 		},
 		stopStaffSession: async () => {
 			await session.staff.stop();
@@ -82,6 +92,7 @@ const AuthProvider = ({ session: given, children }) => {
 		signInMethods,
 		passwordReset,
 		socialProviders,
+		platformSignIn,
 		staffSignIn,
 		markSignedOut,
 		recheck,

package/dist/auth/provider-link.js

@@ -0,0 +1,33 @@
+//#region src/auth/provider-link.ts
+/** Marks a link that starts signing in with a provider at once, for example `/?sign-in=github`. */
+const signInMarker = "sign-in";
+/** Where a provider's callback says why a sign-in or a link did not go through, for example `signup_disabled`. */
+const errorParam = "error";
+/**
+* The provider a link asks to sign in with, or `undefined`. A link that came back from the provider with an error
+* starts nothing, so a refused sign-in does not go round again.
+*/
+const readSignInLink = (href) => {
+	const params = new URL(href).searchParams;
+	if (params.has(errorParam)) return void 0;
+	return params.get("sign-in") || void 0;
+};
+/** Why the provider sent the browser back here, or `undefined`. */
+const readProviderError = (href) => new URL(href).searchParams.get(errorParam) || void 0;
+/** The address without the link's marker and the provider's error: for the address bar, and the page to come back to. */
+const withoutSignInLink = (href) => {
+	const url = new URL(href);
+	for (const name of [signInMarker, errorParam]) url.searchParams.delete(name);
+	return `${url.pathname}${url.search}${url.hash}`;
+};
+const knownNames = {
+	github: "GitHub",
+	gitlab: "GitLab",
+	google: "Google",
+	microsoft: "Microsoft",
+	apple: "Apple"
+};
+/** The name of a sign-in provider: the platform's own name for its provider, or a well-known provider's name. */
+const providerName = (provider, platformSignIn) => platformSignIn?.provider === provider ? platformSignIn.name : knownNames[provider] ?? provider.charAt(0).toUpperCase() + provider.slice(1);
+//#endregion
+export { providerName, readProviderError, readSignInLink, signInMarker, withoutSignInLink };

package/dist/auth/provider-sign-in-page.js

@@ -0,0 +1,55 @@
+import { Spinner } from "../primitives/spinner.js";
+import { signInMessage } from "./auth-messages.js";
+import { providerName } from "./provider-link.js";
+import { useAuth } from "./auth-provider.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useEffect, useRef } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/provider-sign-in-page.tsx
+/** What the page shows while the browser leaves for the provider `name`. */
+const ProviderRedirect = ({ name, workspace }) => /* @__PURE__ */ jsx(AuthLayout, {
+	title: `Signing in with ${name}`,
+	description: workspace,
+	children: /* @__PURE__ */ jsxs("p", {
+		role: "status",
+		className: "flex items-center justify-center gap-2 text-[13px] text-muted-foreground",
+		children: [
+			/* @__PURE__ */ jsx(Spinner, {}),
+			" Taking you to ",
+			name,
+			"…"
+		]
+	})
+});
+/**
+* Starts signing in with `provider` at once, for a link such as `/?sign-in=github`, so someone the provider knows lands
+* signed in without a sign-in page. A provider the server does not offer, or a start it refuses, goes to `onFailed`.
+*/
+const ProviderSignInPage = ({ provider, workspace, onFailed }) => {
+	const { signInProviders, signInSocial } = useAuth();
+	const offered = signInProviders.find((candidate) => candidate.id === provider);
+	const name = offered?.name ?? providerName(provider);
+	const started = useRef(false);
+	useEffect(() => {
+		if (started.current) return;
+		started.current = true;
+		if (!offered) return onFailed(`Signing in with ${name} is not offered here. Sign in another way.`);
+		signInSocial(provider).catch((failure) => {
+			if (!(failure instanceof AuthError)) throw failure;
+			onFailed(signInMessage(failure));
+		});
+	}, [
+		offered,
+		name,
+		provider,
+		signInSocial,
+		onFailed
+	]);
+	return /* @__PURE__ */ jsx(ProviderRedirect, {
+		name,
+		workspace
+	});
+};
+//#endregion
+export { ProviderRedirect, ProviderSignInPage };

package/dist/auth/sign-in-form.js

@@ -13,13 +13,14 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, onForgotPassword, onContinueWithGitHub }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, onForgotPassword, providers = [], onContinueWith }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const emailInput = useRef(null);
 	const withPassword = methods.includes("password");
 	const withCode = methods.includes("emailCode") && onSendCode !== void 0;
 	const withPasskey = methods.includes("passkey") && onPasskey !== void 0;
+	const offered = onContinueWith ? providers : [];
 	const sendCode = () => {
 		if (!emailInput.current?.reportValidity()) return;
 		onSendCode?.(email.trim());
@@ -33,14 +34,14 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
 				children: notice
 			}),
-			(onContinueWithGitHub || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			(offered.length > 0 || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-2",
-				children: [onContinueWithGitHub && /* @__PURE__ */ jsx(Button, {
-					onClick: onContinueWithGitHub,
+				children: [offered.map((provider) => /* @__PURE__ */ jsxs(Button, {
+					onClick: () => onContinueWith?.(provider.id),
 					disabled: busy,
 					className: "min-h-10 w-full",
-					children: "Continue with GitHub"
-				}), withPasskey && /* @__PURE__ */ jsxs(Button, {
+					children: ["Continue with ", provider.name]
+				}, provider.id)), withPasskey && /* @__PURE__ */ jsxs(Button, {
 					onClick: onPasskey,
 					disabled: busy,
 					className: "min-h-10 w-full",

package/dist/auth/sign-in-page.js

@@ -5,10 +5,10 @@ import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent }) => {
-	const { signIn, signInSocial, socialProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
+const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent, error: initialError }) => {
+	const { signIn, signInSocial, signInProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
-	const [error, setError] = useState();
+	const [error, setError] = useState(initialError);
 	const attempt = async (start, message) => {
 		setBusy(true);
 		setError(void 0);
@@ -27,7 +27,8 @@ const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent }) => {
 		notice,
 		methods: signInMethods,
 		onForgotPassword,
-		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github"), signInMessage) : void 0,
+		providers: signInProviders,
+		onContinueWith: (provider) => void attempt(() => signInSocial(provider), signInMessage),
 		onPasskey: () => void attempt(signInWithPasskey, authMessage),
 		onSendCode: (email) => void attempt(async () => {
 			await sendSignInCode(email);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.5.0",
-    "@protobase/layout": "0.5.0",
-    "@protobase/schema": "0.5.0",
+    "@protobase/client": "0.6.0",
+    "@protobase/layout": "0.6.0",
+    "@protobase/schema": "0.6.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",
     "@tanstack/react-virtual": "^3.14.13",