flowlink-auth 2.7.6 → 2.7.8

package/package.json

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

package/src/SignUp.jsx

@@ -261,55 +261,135 @@
 // src/signup.jsx
 'use client'
 import React, { useState, useRef, useEffect } from 'react'
-import { ToastContainer, toast } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
 import Link from 'next/link'
+import { useAuth } from './provider.js' // keep if your app provides it; safe to remove if not used
 
 export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
+  const {
+    publishableKey,
+    baseUrl,
+    redirect,
+    redirectTo,
+    user,
+    loadingUser,
+    fetchMe,
+    setUser
+  } = (typeof useAuth === 'function' ? useAuth() : {}) || {}
+
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
   const [loadingOauth, setLoadingOauth] = useState({ google: false, github: false })
-  const [message, setMessage] = useState(null)
-  const [showKeysPanel, setShowKeysPanel] = useState(false)
-  const [newKeys, setNewKeys] = useState(null)
   const redirectTimer = useRef(null)
+  const toastId = useRef(0)
+  const [toasts, setToasts] = useState([]) // local toast system to avoid external libs (black background)
 
   useEffect(() => {
     return () => {
       if (redirectTimer.current) clearTimeout(redirectTimer.current)
+      // clear pending toast timers
+      toasts.forEach(t => clearTimeout(t._timer))
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Example submit — replace with real auth call
+  // simple toast helper (auto-dismiss). type: 'success' | 'error' | 'info'
+  function showToast(type, message, ms = 5000) {
+    const id = ++toastId.current
+    const created = Date.now()
+    const t = { id, type, message, created, _timer: null }
+    // add toast
+    setToasts(prev => {
+      const next = [t, ...prev].slice(0, 6)
+      return next
+    })
+    // schedule removal
+    const timer = setTimeout(() => {
+      setToasts(prev => prev.filter(x => x.id !== id))
+    }, ms)
+    // store timer so cleanup can clear it
+    t._timer = timer
+  }
+
+  // remove toast immediately
+  function removeToast(id) {
+    setToasts(prev => {
+      prev.forEach(t => {
+        if (t.id === id) clearTimeout(t._timer)
+      })
+      return prev.filter(x => x.id !== id)
+    })
+  }
+
+  if (loadingUser) return null
+
+  if (user && redirect) {
+    if (typeof redirectTo === 'function') redirectTo(redirect)
+    else if (typeof window !== 'undefined') window.location.assign(redirect)
+    return null
+  }
+
   async function submit(e) {
     e.preventDefault()
     if (loading) return
-    setMessage(null)
     setLoading(true)
 
+    // basic client validation
+    if (!name.trim()) {
+      showToast('error', 'Please enter your name.')
+      setLoading(false)
+      return
+    }
+    if (!email.includes('@')) {
+      showToast('error', 'Please enter a valid email address.')
+      setLoading(false)
+      return
+    }
+    if (password.length < 8) {
+      showToast('error', 'Password must be at least 8 characters.')
+      setLoading(false)
+      return
+    }
+
+    const url = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/signup`
+
     try {
-      // simulate API
-      await new Promise((r) => setTimeout(r, 700))
-
-      // example error cases (replace with real server response handling)
-      if (!email.includes('@')) throw new Error('Invalid email address')
-      if (password.length < 8) throw new Error('Password must be at least 8 characters')
-      if (email === 'taken@example.com') throw new Error('User already exists')
-
-      // success
-      setMessage('Account created. Redirecting…')
-      toast.success('Account created. Redirecting…')
-
-      // simulate redirect timer
-      redirectTimer.current = setTimeout(() => {
-        // real redirect logic here
-      }, 300)
+      const res = await fetch(url, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-publishable-key': publishableKey || ''
+        },
+        body: JSON.stringify({ name: name.trim(), email: email.trim(), password })
+      })
+
+      const data = await res.json().catch(async () => {
+        const text = await res.text().catch(() => '')
+        return { _raw: text }
+      })
+
+      if (!res.ok) {
+        const errMsg = data?.error || data?._raw || `Signup failed (${res.status})`
+        throw new Error(errMsg)
+      }
+
+      if (data.user && typeof setUser === 'function') setUser(data.user)
+      if (typeof fetchMe === 'function') await fetchMe()
+
+      showToast('success', 'Account created. Redirecting…')
+      // redirect after tiny delay so user sees toast
+      if (redirect) {
+        redirectTimer.current = setTimeout(() => {
+          if (typeof redirectTo === 'function') redirectTo(redirect)
+          else if (typeof window !== 'undefined') window.location.assign(redirect)
+        }, 450)
+      }
     } catch (err) {
+      // present server errors as toast (black background)
       const text = err?.message ?? 'Network error'
-      // show toast with black background (ToastContainer configured below)
-      toast.error(text)
+      showToast('error', text)
       console.error('Signup error:', err)
     } finally {
       setLoading(false)
@@ -321,14 +401,32 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
     setLoadingOauth(prev => ({ ...prev, [provider]: true }))
 
     try {
-      // simulate network latency
-      await new Promise((r) => setTimeout(r, 600))
-
-      // replace with actual start flow & redirect
-      toast.info(`Starting ${provider} sign-in...`)
-      // on success real flow will redirect, so no need to unset loading in that case
+      const rid =
+        (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+          ? crypto.randomUUID()
+          : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
+
+      const callbackUrl = encodeURIComponent(`${typeof window !== 'undefined' ? window.location.origin : ''}/signup`)
+      const sdkBase = baseUrl || (typeof window !== 'undefined' ? window.location.origin.replace(/\/+$/, '') : '')
+      const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
+
+      if (!publishableKey) {
+        throw new Error('Missing publishable key (client side).')
+      }
+
+      const res = await fetch(startUrl, {
+        method: 'GET',
+        headers: { 'x-publishable-key': publishableKey }
+      })
+
+      const data = await res.json().catch(() => null)
+      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 away to provider
+      if (typeof window !== 'undefined') window.location.href = data.oauthUrl
     } catch (err) {
-      toast.error(err?.message || 'OAuth start failed')
+      showToast('error', err?.message || 'OAuth start failed')
       console.error('OAuth start error:', err)
       setLoadingOauth(prev => ({ ...prev, [provider]: false }))
     }
@@ -346,33 +444,43 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
 
   return (
     <div style={overlay}>
-      <ToastContainer
-        position="top-right"
-        autoClose={5000}
-        newestOnTop
-        closeOnClick
-        pauseOnHover
-        draggable
-        toastStyle={{
-          background: '#000000',
-          color: '#ffffff',
-          borderRadius: 10,
-          boxShadow: '0 6px 18px rgba(0,0,0,0.6)',
-          padding: '10px 14px',
-          fontWeight: 500
-        }}
-      />
+      {/* toast container (custom) */}
+      <div style={toastContainer}>
+        {toasts.map(t => (
+          <div
+            key={t.id}
+            role="status"
+            aria-live="polite"
+            style={{
+              ...toastBase,
+              ...(t.type === 'error' ? toastError : t.type === 'success' ? toastSuccess : toastInfo)
+            }}
+            onMouseEnter={() => {
+              // pause dismiss
+              clearTimeout(t._timer)
+            }}
+            onMouseLeave={() => {
+              // restart dismiss for this toast
+              const timer = setTimeout(() => removeToast(t.id), 3000)
+              // patch timer into state (imperative but fine for local toast)
+              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={() => removeToast(t.id)} style={toastCloseBtn}>✕</button>
+          </div>
+        ))}
+      </div>
 
       <div style={modal}>
         <div style={modalInner}>
           <header style={header}>
             <div style={brandRow}>
               <div style={logo}>
-                {/* if you have a real logo, replace with <Image src={agency.logo} ... /> */}
                 <div style={logoCircle} aria-hidden />
               </div>
               <div>
-                <h1 style={title}>Sign up to {agency.name}</h1>
+                <h1 style={title}>Sign up to {agency?.name || 'App'}</h1>
                 <div style={subtitle}>Welcome! Create your account.</div>
               </div>
             </div>
@@ -479,34 +587,11 @@ export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
           </div>
         </div>
       </div>
-
-      {showKeysPanel && newKeys && (
-        <div style={keysOverlay}>
-          <div style={keysPanel}>
-            <h3 style={{ margin: 0, marginBottom: 8 }}>Your API keys — copy now</h3>
-            <p style={{ margin: 0, marginBottom: 12, color: '#4b5563', fontSize: 13 }}>Secret key is shown only once. Save it securely.</p>
-
-            <div style={{ marginBottom: 10 }}>
-              <div style={{ fontSize: 12, color: '#6b7280' }}>Publishable key (use in client)</div>
-              <pre style={keyBox}>{newKeys.publishableKey}</pre>
-              <button onClick={() => navigator.clipboard.writeText(newKeys.publishableKey)} style={copyBtn}>Copy publishable key</button>
-            </div>
-
-            <div style={{ marginBottom: 6 }}>
-              <div style={{ fontSize: 12, color: '#6b7280' }}>Secret key (server only)</div>
-              <pre style={keyBox}>{newKeys.secretKey}</pre>
-              <button onClick={() => navigator.clipboard.writeText(newKeys.secretKey)} style={copyBtn}>Copy secret key</button>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
 
-/* Styles (JS objects) */
-
-/* overlay: translucent so underlying content is visible; backdrop blur and subtle vignette */
+/* styles (JS objects) - neutral palette, translucent overlay so underlying content shows */
 const overlay = {
   position: 'fixed',
   inset: 0,
@@ -514,20 +599,18 @@ const overlay = {
   alignItems: 'center',
   justifyContent: 'center',
   padding: 20,
-  background: 'linear-gradient(180deg, rgba(2,6,23,0.25), rgba(2,6,23,0.35))',
+  background: 'linear-gradient(180deg, rgba(2,6,23,0.22), rgba(2,6,23,0.32))',
   backdropFilter: 'blur(6px)',
   minHeight: '100vh',
   zIndex: 9999
 }
 
-/* modal itself uses semi-transparent background + strong soft shadow,
-   so things beneath are slightly visible but content still readable */
 const modal = {
   width: '100%',
   maxWidth: 560,
   borderRadius: 14,
-  background: 'rgba(10,14,20,0.65)', // translucent neutral
-  border: '1px solid rgba(148,163,184,0.12)', // more visible neutral border
+  background: 'linear-gradient(180deg, rgba(15,19,24,0.6), rgba(10,12,16,0.6))', // translucent neutral so background peeks through
+  border: '1px solid rgba(99,102,106,0.12)', // slightly stronger neutral border
   boxShadow: '0 20px 50px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
   overflow: 'hidden',
   display: 'flex',
@@ -542,7 +625,7 @@ const modalInner = {
   gap: 12
 }
 
-/* HEADER / BRAND */
+/* header / brand */
 const header = {
   paddingBottom: 6,
   borderBottom: '1px solid rgba(148,163,184,0.04)'
@@ -583,7 +666,7 @@ const subtitle = {
   marginTop: 4
 }
 
-/* OAUTH ROW */
+/* oauth row */
 const oauthSection = {
   marginTop: 8,
   display: 'flex',
@@ -615,7 +698,7 @@ const oauthGithub = {
   color: '#fff'
 }
 
-/* DIVIDER */
+/* divider row */
 const dividerRow = {
   display: 'flex',
   alignItems: 'center',
@@ -635,7 +718,7 @@ const orText = {
   padding: '0 8px'
 }
 
-/* FORM */
+/* form */
 const form = {
   display: 'flex',
   flexDirection: 'column',
@@ -660,7 +743,7 @@ const input = {
   borderRadius: 10,
   background: 'rgba(255,255,255,0.02)',
   color: '#e6e6e6',
-  border: '1px solid rgba(148,163,184,0.10)', // slightly stronger border for visibility
+  border: '1px solid rgba(148,163,184,0.10)',
   fontSize: 14,
   outline: 'none',
   boxSizing: 'border-box',
@@ -672,7 +755,7 @@ const submitButton = {
   width: '100%',
   padding: '10px 12px',
   borderRadius: 10,
-  background: 'linear-gradient(180deg,#475569,#94a3b8)', // neutral blue-gray gradient
+  background: 'linear-gradient(180deg,#475569,#94a3b8)',
   border: 'none',
   color: '#fff',
   fontWeight: 600,
@@ -684,7 +767,7 @@ const submitButton = {
   minHeight: 44
 }
 
-/* FOOTER / BELOW */
+/* modal footer */
 const modalFooter = {
   padding: '12px 18px 18px 18px',
   borderTop: '1px solid rgba(148,163,184,0.03)',
@@ -729,41 +812,50 @@ const securedText = {
   fontWeight: 600
 }
 
-/* KEYS PANEL */
-const keysOverlay = {
+/* toasts - black background as requested */
+const toastContainer = {
   position: 'fixed',
-  inset: 0,
-  zIndex: 20000,
+  top: 18,
+  right: 18,
+  width: 360,
+  maxWidth: 'calc(100% - 36px)',
   display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  background: 'rgba(2,6,23,0.45)'
+  flexDirection: 'column',
+  gap: 10,
+  zIndex: 60000
 }
 
-const keysPanel = {
-  background: '#fff',
-  color: '#111827',
-  padding: 18,
+const toastBase = {
+  display: 'flex',
+  gap: 10,
+  alignItems: 'center',
+  padding: '10px 12px',
   borderRadius: 10,
-  maxWidth: 720,
-  width: '95%',
-  boxShadow: '0 12px 40px rgba(2,6,23,0.5)'
+  boxShadow: '0 8px 20px rgba(2,6,23,0.6)',
+  color: '#fff',
+  fontSize: 13,
+  minWidth: 120
 }
 
-const keyBox = {
-  padding: 10,
-  background: '#f3f4f6',
-  borderRadius: 8,
-  overflowX: 'auto',
-  fontSize: 13
+const toastError = {
+  background: '#000000',
+  border: '1px solid rgba(255,255,255,0.06)'
+}
+const toastSuccess = {
+  background: '#000000',
+  border: '1px solid rgba(255,255,255,0.06)'
+}
+const toastInfo = {
+  background: '#000000',
+  border: '1px solid rgba(255,255,255,0.06)'
 }
 
-const copyBtn = {
-  marginTop: 8,
-  padding: '8px 10px',
-  borderRadius: 8,
-  background: '#111827',
-  color: '#fff',
+const toastCloseBtn = {
+  marginLeft: 8,
+  background: 'transparent',
   border: 'none',
-  cursor: 'pointer'
+  color: 'rgba(255,255,255,0.7)',
+  cursor: 'pointer',
+  fontSize: 14,
+  lineHeight: 1
 }