flowlink-auth 2.8.6 → 2.8.8

package/dist/SignIn.js

@@ -2,10 +2,12 @@
 import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import { useAuth } from "./provider.js";
-function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {}) {
+function SignIn({
+  agency = { name: "chest", logo: "/logo.png" },
+  onSuccess,
+  onError
+} = {}) {
   const {
     publishableKey,
     baseUrl,
@@ -21,6 +23,8 @@ function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {
   const [loading, setLoading] = useState(false);
   const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false });
   const redirectTimer = useRef(null);
+  const toastId = useRef(0);
+  const [toasts, setToasts] = useState([]);
   useEffect(() => {
     const meta = document.createElement("meta");
     meta.name = "viewport";
@@ -30,8 +34,41 @@ function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {
       if (redirectTimer.current) clearTimeout(redirectTimer.current);
       const existing = document.querySelector('meta[name="viewport"]');
       if (existing && existing.content === meta.content) document.head.removeChild(existing);
+      toasts.forEach((t) => {
+        if (t._timer) clearTimeout(t._timer);
+      });
     };
   }, []);
+  function showLocalToast(type, message, ms = 3500) {
+    if (type === "error" && typeof onError === "function") {
+      try {
+        onError(message);
+      } catch (_) {
+      }
+      return;
+    }
+    if (type === "success" && typeof onSuccess === "function") {
+      try {
+        onSuccess(message);
+      } catch (_) {
+      }
+    }
+    const id = ++toastId.current;
+    const t = { id, type, message, _timer: null };
+    setToasts((prev) => [t, ...prev].slice(0, 6));
+    const timer = setTimeout(() => {
+      setToasts((prev) => prev.filter((x) => x.id !== id));
+    }, ms);
+    t._timer = timer;
+  }
+  function removeLocalToast(id) {
+    setToasts((prev) => {
+      prev.forEach((t) => {
+        if (t.id === id && t._timer) clearTimeout(t._timer);
+      });
+      return prev.filter((x) => x.id !== id);
+    });
+  }
   if (loadingUser) return null;
   if (user && redirect) {
     if (typeof redirectTo === "function") redirectTo(redirect);
@@ -46,7 +83,7 @@ function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {
     if (loading) return;
     setLoading(true);
     if (!form2.email || !form2.password) {
-      toast.error("Email and password are required", { toastId: "missing-creds", toastStyle: { background: "#000", color: "#fff" } });
+      showLocalToast("error", "Email and password are required");
       setLoading(false);
       return;
     }
@@ -85,13 +122,13 @@ function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {
       } else if (typeof fetchMe === "function") {
         await fetchMe();
       }
-      if (onSuccess) {
+      showLocalToast("success", "Signed in. Redirecting...");
+      if (typeof onSuccess === "function") {
         try {
           onSuccess(data);
         } catch (_) {
         }
       }
-      toast.success("Signed in. Redirecting...", { toastStyle: { background: "#000", color: "#fff" } });
       if (redirect) {
         redirectTimer.current = setTimeout(() => {
           if (typeof redirectTo === "function") redirectTo(redirect);
@@ -99,7 +136,8 @@ function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {
         }, 250);
       }
     } catch (err) {
-      toast.error(err?.message || "Network error", { toastStyle: { background: "#000", color: "#fff" } });
+      const message = err?.message || "Network error";
+      showLocalToast("error", message);
       console.error("Signin error:", err);
     } finally {
       setLoading(false);
@@ -124,7 +162,7 @@ function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {
       if (!data?.oauthUrl) throw new Error("SDK start did not return oauthUrl");
       if (typeof window !== "undefined") window.location.href = data.oauthUrl;
     } catch (err) {
-      toast.error(err?.message || "OAuth start failed", { toastStyle: { background: "#000", color: "#fff" } });
+      showLocalToast("error", err?.message || "OAuth start failed");
       console.error("OAuth start error:", err);
       setLoadingOauth((prev) => ({ ...prev, [provider]: false }));
     }
@@ -137,19 +175,26 @@ function SignIn({ agency = { name: "chest", logo: "/logo.png" }, onSuccess } = {
     if (e?.preventDefault) e.preventDefault();
     startOAuthFlow("github");
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    ToastContainer,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: toastContainer, "aria-live": "polite", "aria-atomic": "true" }, toasts.map((t) => /* @__PURE__ */ React.createElement(
+    "div",
     {
-      position: "top-right",
-      newestOnTop: true,
-      autoClose: 3e3,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      theme: "dark"
-    }
-  ), /* @__PURE__ */ React.createElement("div", { style: page }, /* @__PURE__ */ React.createElement("div", { style: cardWrap }, /* @__PURE__ */ React.createElement("div", { style: card }, /* @__PURE__ */ React.createElement("div", { style: cardInner }, /* @__PURE__ */ React.createElement("div", { style: brand }, /* @__PURE__ */ React.createElement("div", { style: brandRow }, /* @__PURE__ */ React.createElement("div", { style: logoWrap }, /* @__PURE__ */ React.createElement(Image, { src: agency.logo, width: 30, height: 30, alt: agency.name, style: logoImgStyle })), /* @__PURE__ */ React.createElement("h1", { style: brandTitle }, agency.name)), /* @__PURE__ */ React.createElement("div", { style: brandText }, /* @__PURE__ */ React.createElement("div", { style: brandLead }, "Sign in to ", agency.name), /* @__PURE__ */ React.createElement("div", { style: brandSub }, "Welcome back! Let's get you signed in."))), /* @__PURE__ */ React.createElement("div", { style: oauthRow }, /* @__PURE__ */ React.createElement(
+      key: t.id,
+      role: "status",
+      style: {
+        ...toastBase,
+        ...t.type === "error" ? toastError : toastSuccess
+      },
+      onMouseEnter: () => {
+        if (t._timer) clearTimeout(t._timer);
+      },
+      onMouseLeave: () => {
+        const timer = setTimeout(() => removeLocalToast(t.id), 2500);
+        setToasts((prev) => prev.map((x) => x.id === t.id ? { ...x, _timer: timer } : x));
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, t.message),
+    /* @__PURE__ */ React.createElement("button", { "aria-label": "Dismiss", onClick: () => removeLocalToast(t.id), style: toastCloseBtn }, "\u2715")
+  ))), /* @__PURE__ */ React.createElement("div", { style: page }, /* @__PURE__ */ React.createElement("div", { style: cardWrap }, /* @__PURE__ */ React.createElement("div", { style: card }, /* @__PURE__ */ React.createElement("div", { style: cardInner }, /* @__PURE__ */ React.createElement("div", { style: brand }, /* @__PURE__ */ React.createElement("div", { style: brandRow }, /* @__PURE__ */ React.createElement("div", { style: logoWrap }, /* @__PURE__ */ React.createElement(Image, { src: agency.logo, width: 30, height: 30, alt: agency.name, style: logoImgStyle })), /* @__PURE__ */ React.createElement("h1", { style: brandTitle }, agency.name)), /* @__PURE__ */ React.createElement("div", { style: brandText }, /* @__PURE__ */ React.createElement("div", { style: brandLead }, "Sign in to ", agency.name), /* @__PURE__ */ React.createElement("div", { style: brandSub }, "Welcome back! Let's get you signed in."))), /* @__PURE__ */ React.createElement("div", { style: oauthRow }, /* @__PURE__ */ React.createElement(
     "button",
     {
       onClick: handleGoogle,
@@ -326,6 +371,30 @@ const muted = { color: "rgba(255,255,255,0.75)" };
 const link = { color: "#60a5fa", textDecoration: "none", fontWeight: 600 };
 const thinDivider = { height: 1, background: "rgba(148,163,184,0.04)", margin: "12px 0" };
 const securedText = { color: "rgba(255,255,255,0.9)", fontWeight: 600 };
+const toastContainer = {
+  position: "fixed",
+  top: 18,
+  right: 18,
+  width: 360,
+  maxWidth: "calc(100% - 36px)",
+  display: "flex",
+  flexDirection: "column",
+  gap: 10,
+  zIndex: 6e4
+};
+const toastBase = {
+  display: "flex",
+  gap: 10,
+  alignItems: "center",
+  padding: "10px 12px",
+  borderRadius: 10,
+  boxShadow: "0 8px 20px rgba(2,6,23,0.6)",
+  color: "#fff",
+  fontSize: 13
+};
+const toastError = { background: "#000", border: "1px solid rgba(255,255,255,0.06)" };
+const toastSuccess = { background: "#000", border: "1px solid rgba(255,255,255,0.06)" };
+const toastCloseBtn = { marginLeft: 8, background: "transparent", border: "none", color: "rgba(255,255,255,0.7)", cursor: "pointer", fontSize: 14, lineHeight: 1 };
 export {
   SignIn as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowlink-auth",
-  "version": "2.8.6",
+  "version": "2.8.8",
   "description": "Custom auth library",
   "main": "dist/index.js",
   "types": "src/index.d.ts",

package/src/SignIn.jsx

@@ -3,11 +3,24 @@
 import React, { useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { ToastContainer, toast } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
 import { useAuth } from './provider.js'
 
-export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' }, onSuccess } = {}) {
+/**
+ * SignIn component (SDK-friendly)
+ * - Does NOT depend on react-toastify or any external UI lib
+ * - Uses a small local black toast system (same pattern as signup)
+ * - Exposes optional onSuccess/onError callbacks for host apps
+ *
+ * Props:
+ *  - agency: { name, logo } (optional)
+ *  - onSuccess: function(data) optional callback
+ *  - onError: function(message) optional callback
+ */
+export default function SignIn({
+  agency = { name: 'chest', logo: '/logo.png' },
+  onSuccess,
+  onError
+} = {}) {
   const {
     publishableKey,
     baseUrl,
@@ -25,19 +38,55 @@ export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' },
   const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false })
   const redirectTimer = useRef(null)
 
-  // soft-disable pinch-zoom on mobile while mounted (SDK-safe)
+  // local (SDK) toasts — black background — used only if host doesn't provide onError/onSuccess
+  const toastId = useRef(0)
+  const [toasts, setToasts] = useState([])
+
   useEffect(() => {
+    // Soft-disable pinch-zoom on mobile while mounted (SDK-safe)
     const meta = document.createElement('meta')
     meta.name = 'viewport'
     meta.content = 'width=device-width, initial-scale=1, maximum-scale=1'
     document.head.appendChild(meta)
+
     return () => {
       if (redirectTimer.current) clearTimeout(redirectTimer.current)
       const existing = document.querySelector('meta[name="viewport"]')
       if (existing && existing.content === meta.content) document.head.removeChild(existing)
+      // clear toast timers
+      toasts.forEach(t => { if (t._timer) clearTimeout(t._timer) })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // ---------- toast helpers ----------
+  function showLocalToast(type, message, ms = 3500) {
+    // if host provided onError/onSuccess, prefer that
+    if (type === 'error' && typeof onError === 'function') {
+      try { onError(message) } catch (_) {}
+      return
+    }
+    if (type === 'success' && typeof onSuccess === 'function') {
+      try { onSuccess(message) } catch (_) {}
+      // still show local toast for feedback (optional)
+    }
+
+    const id = ++toastId.current
+    const t = { id, type, message, _timer: null }
+    setToasts(prev => [t, ...prev].slice(0, 6))
+    const timer = setTimeout(() => {
+      setToasts(prev => prev.filter(x => x.id !== id))
+    }, ms)
+    t._timer = timer
+  }
+
+  function removeLocalToast(id) {
+    setToasts(prev => {
+      prev.forEach(t => { if (t.id === id && t._timer) clearTimeout(t._timer) })
+      return prev.filter(x => x.id !== id)
+    })
+  }
+
   if (loadingUser) return null
 
   if (user && redirect) {
@@ -50,13 +99,14 @@ export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' },
     setForm(prev => ({ ...prev, [e.target.id]: e.target.value }))
   }
 
+  // ---------- submit login ----------
   async function submit(e) {
     e.preventDefault()
     if (loading) return
     setLoading(true)
 
     if (!form.email || !form.password) {
-      toast.error('Email and password are required', { toastId: 'missing-creds', toastStyle: { background: '#000', color: '#fff' } })
+      showLocalToast('error', 'Email and password are required')
       setLoading(false)
       return
     }
@@ -99,12 +149,12 @@ export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' },
         await fetchMe()
       }
 
-      if (onSuccess) {
+      // callback & local success toast (host will receive onSuccess if provided)
+      showLocalToast('success', 'Signed in. Redirecting...')
+      if (typeof onSuccess === 'function') {
         try { onSuccess(data) } catch (_) {}
       }
 
-      toast.success('Signed in. Redirecting...', { toastStyle: { background: '#000', color: '#fff' } })
-
       if (redirect) {
         redirectTimer.current = setTimeout(() => {
           if (typeof redirectTo === 'function') redirectTo(redirect)
@@ -112,13 +162,15 @@ export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' },
         }, 250)
       }
     } catch (err) {
-      toast.error(err?.message || 'Network error', { toastStyle: { background: '#000', color: '#fff' } })
+      const message = err?.message || 'Network error'
+      showLocalToast('error', message)
       console.error('Signin error:', err)
     } finally {
       setLoading(false)
     }
   }
 
+  // ---------- OAuth start ----------
   async function startOAuthFlow(provider) {
     if (loading || loadingOauth[provider]) return
     setLoadingOauth(prev => ({ ...prev, [provider]: true }))
@@ -145,10 +197,10 @@ export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' },
       if (!res.ok) throw new Error(data?.error || `OAuth start failed (${res.status})`)
       if (!data?.oauthUrl) throw new Error('SDK start did not return oauthUrl')
 
-      // navigate to provider (unloads page, so no need to unset loading)
+      // navigate to provider (page unloads)
       if (typeof window !== 'undefined') window.location.href = data.oauthUrl
     } catch (err) {
-      toast.error(err?.message || 'OAuth start failed', { toastStyle: { background: '#000', color: '#fff' } })
+      showLocalToast('error', err?.message || 'OAuth start failed')
       console.error('OAuth start error:', err)
       setLoadingOauth(prev => ({ ...prev, [provider]: false }))
     }
@@ -157,18 +209,30 @@ export default function SignIn({ agency = { name: 'chest', logo: '/logo.png' },
   const handleGoogle = (e) => { if (e?.preventDefault) e.preventDefault(); startOAuthFlow('google') }
   const handleGithub = (e) => { if (e?.preventDefault) e.preventDefault(); startOAuthFlow('github') }
 
+  // ---------- render ----------
   return (
     <>
-      <ToastContainer
-        position="top-right"
-        newestOnTop
-        autoClose={3000}
-        hideProgressBar={false}
-        closeOnClick
-        pauseOnHover
-        draggable
-        theme="dark"
-      />
+      {/* Local toast container (black style) */}
+      <div style={toastContainer} aria-live="polite" aria-atomic="true">
+        {toasts.map(t => (
+          <div
+            key={t.id}
+            role="status"
+            style={{
+              ...toastBase,
+              ...(t.type === 'error' ? toastError : toastSuccess)
+            }}
+            onMouseEnter={() => { if (t._timer) clearTimeout(t._timer) }}
+            onMouseLeave={() => {
+              const timer = setTimeout(() => removeLocalToast(t.id), 2500)
+              setToasts(prev => prev.map(x => x.id === t.id ? { ...x, _timer: timer } : x))
+            }}
+          >
+            <div style={{ flex: 1 }}>{t.message}</div>
+            <button aria-label="Dismiss" onClick={() => removeLocalToast(t.id)} style={toastCloseBtn}>✕</button>
+          </div>
+        ))}
+      </div>
 
       <div style={page}>
         <div style={cardWrap}>
@@ -411,6 +475,7 @@ const submitBtn = {
   minHeight: 44
 }
 
+/* card footer */
 const cardFooter = {
   padding: '18px',
   borderTop: '1px solid rgba(148,163,184,0.03)',
@@ -422,3 +487,29 @@ const muted = { color: 'rgba(255,255,255,0.75)' }
 const link = { color: '#60a5fa', textDecoration: 'none', fontWeight: 600 }
 const thinDivider = { height: 1, background: 'rgba(148,163,184,0.04)', margin: '12px 0' }
 const securedText = { color: 'rgba(255,255,255,0.9)', fontWeight: 600 }
+
+/* local toast styles */
+const toastContainer = {
+  position: 'fixed',
+  top: 18,
+  right: 18,
+  width: 360,
+  maxWidth: 'calc(100% - 36px)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  zIndex: 60000
+}
+const toastBase = {
+  display: 'flex',
+  gap: 10,
+  alignItems: 'center',
+  padding: '10px 12px',
+  borderRadius: 10,
+  boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
+  color: '#fff',
+  fontSize: 13
+}
+const toastError = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
+const toastSuccess = { background: '#000', border: '1px solid rgba(255,255,255,0.06)' }
+const toastCloseBtn = { marginLeft: 8, background: 'transparent', border: 'none', color: 'rgba(255,255,255,0.7)', cursor: 'pointer', fontSize: 14, lineHeight: 1 }