@orangecheck/auth-client 2.18.0 → 2.20.0

package/dist/index.d.mts

@@ -125,6 +125,7 @@ interface OcSignInProps {
     resolveReturnTo?: (account: OcAccount) => string | Promise<string>;
     authOrigin?: string;
     initialPath?: 'wallet' | 'email';
+    providersFirst?: boolean;
     paths?: {
         wallet?: boolean;
         email?: boolean;
@@ -133,7 +134,7 @@ interface OcSignInProps {
     add?: boolean;
     className?: string;
 }
-declare function OcSignIn({ audience, returnTo, onSuccess, resolveReturnTo, linkPrompt, add: addProp, authOrigin, initialPath, paths, className, }: OcSignInProps): React.ReactElement;
+declare function OcSignIn({ audience, returnTo, onSuccess, resolveReturnTo, linkPrompt, add: addProp, authOrigin, initialPath, providersFirst, paths, className, }: OcSignInProps): React.ReactElement;
 
 interface OcLinkedIdentity {
     id: string;

package/dist/index.d.ts

@@ -125,6 +125,7 @@ interface OcSignInProps {
     resolveReturnTo?: (account: OcAccount) => string | Promise<string>;
     authOrigin?: string;
     initialPath?: 'wallet' | 'email';
+    providersFirst?: boolean;
     paths?: {
         wallet?: boolean;
         email?: boolean;
@@ -133,7 +134,7 @@ interface OcSignInProps {
     add?: boolean;
     className?: string;
 }
-declare function OcSignIn({ audience, returnTo, onSuccess, resolveReturnTo, linkPrompt, add: addProp, authOrigin, initialPath, paths, className, }: OcSignInProps): React.ReactElement;
+declare function OcSignIn({ audience, returnTo, onSuccess, resolveReturnTo, linkPrompt, add: addProp, authOrigin, initialPath, providersFirst, paths, className, }: OcSignInProps): React.ReactElement;
 
 interface OcLinkedIdentity {
     id: string;

package/dist/index.js

@@ -1953,7 +1953,8 @@ function OcSignIn({
   linkPrompt = true,
   add: addProp,
   authOrigin = "https://ochk.io",
-  initialPath = "wallet",
+  initialPath,
+  providersFirst = true,
   paths,
   className
 }) {
@@ -1982,7 +1983,9 @@ function OcSignIn({
     }
     setAddMode(new URLSearchParams(window.location.search).get("add") === "1");
   }, [addProp]);
-  const [path, setPath] = React3__namespace.useState(initialPath);
+  const [path, setPath] = React3__namespace.useState(
+    initialPath ?? (providersFirst ? "email" : "wallet")
+  );
   const [signedIn, setSignedIn] = React3__namespace.useState(null);
   const [linkAlso, setLinkAlso] = React3__namespace.useState(false);
   const [oauthError, setOauthError] = React3__namespace.useState(false);
@@ -2130,7 +2133,16 @@ function OcSignIn({
         ]
       }
     ),
-    bothEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
+    providersFirst && /* @__PURE__ */ jsxRuntime.jsx(
+      ProviderSignIn,
+      {
+        authOrigin,
+        returnTo: resolvedReturn,
+        add: addMode,
+        first: true
+      }
+    ),
+    bothEnabled && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         role: "tablist",
@@ -2142,7 +2154,24 @@ function OcSignIn({
           marginBottom: 16,
           borderBottom: "1px solid var(--border, #27272a)"
         },
-        children: [
+        children: providersFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SigninTab,
+            {
+              active: path === "email",
+              onClick: () => setPath("email"),
+              children: "email + otp"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SigninTab,
+            {
+              active: path === "wallet",
+              onClick: () => setPath("wallet"),
+              children: "bitcoin \xB7 self-custody"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             SigninTab,
             {
@@ -2151,8 +2180,15 @@ function OcSignIn({
               children: "bitcoin wallet"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(SigninTab, { active: path === "email", onClick: () => setPath("email"), children: "email + otp" })
-        ]
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SigninTab,
+            {
+              active: path === "email",
+              onClick: () => setPath("email"),
+              children: "email + otp"
+            }
+          )
+        ] })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-oc-signin-panel": "", role: "tabpanel", children: [
@@ -2174,7 +2210,7 @@ function OcSignIn({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ProviderSignIn, { authOrigin, returnTo: resolvedReturn, add: addMode }),
+    !providersFirst && /* @__PURE__ */ jsxRuntime.jsx(ProviderSignIn, { authOrigin, returnTo: resolvedReturn, add: addMode }),
     linkPrompt && /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-oc-signin-linkalso": "", style: linkAlsoStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -2245,7 +2281,8 @@ function ProviderIcon({ id }) {
 function ProviderSignIn({
   authOrigin,
   returnTo,
-  add
+  add,
+  first = false
 }) {
   const [providers, setProviders] = React3__namespace.useState([]);
   const [origin, setOrigin] = React3__namespace.useState("");
@@ -2263,60 +2300,65 @@ function ProviderSignIn({
   if (providers.length === 0) return null;
   const providerReturnTo = returnTo.startsWith("/") ? origin ? `${origin}${returnTo}` : returnTo : returnTo;
   const line = { flex: 1, height: 1, background: "var(--border, #27272a)" };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-oc-signin-providers": "", style: { marginTop: 20 }, children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: line }),
-          "or",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: line })
-        ]
-      }
-    ),
-    providers.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "a",
-      {
-        href: `${authOrigin}/api/auth/${p.id}/start?return_to=${encodeURIComponent(
-          providerReturnTo
-        )}${add ? "&add=1" : ""}`,
-        "data-oc-signin-provider": p.id,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 10,
-          boxSizing: "border-box",
-          width: "100%",
-          marginTop: i === 0 ? 0 : 8,
-          padding: "0.6rem 0.875rem",
-          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: [
-          /* @__PURE__ */ jsxRuntime.jsx(ProviderIcon, { id: p.id }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: p.label })
-        ]
+  const divider = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        margin: first ? "14px 0 4px" : "4px 0 12px",
+        color: "var(--muted-foreground, #a1a1aa)",
+        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+        fontSize: 10,
+        letterSpacing: "0.16em",
+        textTransform: "uppercase"
       },
-      p.id
-    ))
-  ] });
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: line }),
+        "or",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: line })
+      ]
+    }
+  );
+  const buttons = providers.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: `${authOrigin}/api/auth/${p.id}/start?return_to=${encodeURIComponent(
+        providerReturnTo
+      )}${add ? "&add=1" : ""}`,
+      "data-oc-signin-provider": p.id,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 10,
+        boxSizing: "border-box",
+        width: "100%",
+        marginTop: i === 0 ? 0 : 8,
+        padding: "0.6rem 0.875rem",
+        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: [
+        /* @__PURE__ */ jsxRuntime.jsx(ProviderIcon, { id: p.id }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: p.label })
+      ]
+    },
+    p.id
+  ));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-oc-signin-providers": "", style: first ? { marginBottom: 4 } : { marginTop: 20 }, children: first ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    buttons,
+    divider
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    divider,
+    buttons
+  ] }) });
 }
 function WalletFlow({ authOrigin, audience, add, onSuccess }) {
   const [address, setAddress] = React3__namespace.useState("");