@orangecheck/auth-client 2.13.0 → 2.14.1

package/dist/index.mjs

@@ -1677,6 +1677,13 @@ function OcSignIn({
   const [path, setPath] = React3.useState(initialPath);
   const [signedIn, setSignedIn] = React3.useState(null);
   const [linkAlso, setLinkAlso] = React3.useState(false);
+  const [oauthError, setOauthError] = React3.useState(false);
+  React3.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (new URLSearchParams(window.location.search).has("oauth_error")) {
+      setOauthError(true);
+    }
+  }, []);
   const navigate = React3.useCallback(
     async (account) => {
       if (resolveReturnTo) {
@@ -1762,6 +1769,22 @@ function OcSignIn({
   const bothEnabled = walletEnabled && emailEnabled;
   const activeMethod = !emailEnabled ? "wallet" : !walletEnabled ? "email" : path;
   return /* @__PURE__ */ jsxs("div", { className, "data-oc-signin": "", children: [
+    oauthError && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-oc-signin-oauth-error": "",
+        style: {
+          marginBottom: 14,
+          padding: "0.6rem 0.75rem",
+          border: "1px solid var(--destructive, #ef4444)",
+          borderRadius: 6,
+          color: "var(--destructive, #ef4444)",
+          fontFamily: "ui-monospace, SFMono-Regular, monospace",
+          fontSize: 11
+        },
+        children: "That sign-in didn't complete. Please try again."
+      }
+    ),
     bothEnabled && /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1804,6 +1827,7 @@ function OcSignIn({
         }
       )
     ] }),
+    /* @__PURE__ */ jsx(ProviderSignIn, { authOrigin, returnTo: safeReturn }),
     linkPrompt && /* @__PURE__ */ jsxs("label", { "data-oc-signin-linkalso": "", style: linkAlsoStyle, children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -1854,6 +1878,68 @@ function SigninTab({
     }
   );
 }
+var OAUTH_PROVIDERS = [
+  { id: "google", label: "Continue with Google" }
+];
+function ProviderSignIn({
+  authOrigin,
+  returnTo
+}) {
+  const [origin, setOrigin] = React3.useState("");
+  React3.useEffect(() => {
+    setOrigin(window.location.origin);
+  }, []);
+  const providerReturnTo = origin ? `${origin}${returnTo}` : returnTo;
+  const line = { flex: 1, height: 1, background: "var(--border, #27272a)" };
+  return /* @__PURE__ */ jsxs("div", { "data-oc-signin-providers": "", style: { marginTop: 20 }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          margin: "4px 0 12px",
+          color: "var(--muted-foreground, #a1a1aa)",
+          fontFamily: "ui-monospace, SFMono-Regular, monospace",
+          fontSize: 10,
+          letterSpacing: "0.16em",
+          textTransform: "uppercase"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: line }),
+          "or",
+          /* @__PURE__ */ jsx("span", { style: line })
+        ]
+      }
+    ),
+    OAUTH_PROVIDERS.map((p) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `${authOrigin}/api/auth/${p.id}/start?return_to=${encodeURIComponent(
+          providerReturnTo
+        )}`,
+        "data-oc-signin-provider": p.id,
+        style: {
+          display: "block",
+          boxSizing: "border-box",
+          width: "100%",
+          padding: "0.6rem 0.875rem",
+          textAlign: "center",
+          border: "1px solid var(--border, #27272a)",
+          borderRadius: 6,
+          background: "transparent",
+          color: "var(--muted-foreground, #a1a1aa)",
+          fontFamily: "ui-monospace, SFMono-Regular, monospace",
+          fontSize: 12,
+          textDecoration: "none"
+        },
+        children: p.label
+      },
+      p.id
+    ))
+  ] });
+}
 function WalletFlow({ authOrigin, audience, onSuccess }) {
   const [address, setAddress] = React3.useState("");
   const [error, setError] = React3.useState(null);