flowlink-auth 2.7.3 → 2.7.5

package/src/SignUp.jsx

@@ -0,0 +1,747 @@
+// // src/signup.jsx
+// 'use client'
+// import React, { useState } from 'react'
+// import { useAuth } from './provider.js'
+
+// export default function SignUp() {
+//   const {
+//     publishableKey,
+//     baseUrl,
+//     redirect,
+//     redirectTo,
+//     user,
+//     loadingUser,
+//     fetchMe,
+//     setUser
+//   } = useAuth()
+
+//   const [name, setName] = useState('')
+//   const [email, setEmail] = useState('')
+//   const [password, setPassword] = useState('')
+//   const [loading, setLoading] = useState(false)
+//   const [error, setError] = useState(null)
+//   const [message, setMessage] = useState(null)
+
+//   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()
+//     setError(null)
+//     setMessage(null)
+//     setLoading(true)
+
+//     const url = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/signup`
+
+//     try {
+//       const res = await fetch(url, {
+//         method: 'POST',
+//         credentials: 'include',
+//         headers: {
+//           'Content-Type': 'application/json',
+//           'x-publishable-key': publishableKey || ''
+//         },
+//         body: JSON.stringify({ name, email, password })
+//       })
+
+//       const data = await res.json().catch(() => ({}))
+//       if (!res.ok) throw new Error(data.error || 'Signup failed')
+
+//       if (data.user && typeof setUser === 'function') setUser(data.user)
+//       if (typeof fetchMe === 'function') await fetchMe()
+
+//       setMessage('Account created. Redirecting…')
+
+//       if (redirect) {
+//         setTimeout(() => {
+//           if (typeof redirectTo === 'function') redirectTo(redirect)
+//           else if (typeof window !== 'undefined') window.location.assign(redirect)
+//         }, 300)
+//       }
+//     } catch (err) {
+//       setError(err?.message ?? 'Network error')
+//       console.error('Signup error:', err)
+//     } finally {
+//       setLoading(false)
+//     }
+//   }
+
+//   async function startOAuthFlow(provider) {
+//   // prevent double clicks
+//   setError(null)
+//   setLoading(true)
+
+//   try {
+//     const rid =
+//       (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+//         ? crypto.randomUUID()
+//         : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
+
+//     // callback must match what your SDK start expects and what Google console allows
+//     const callbackUrl = encodeURIComponent(`${window.location.origin}/signup`)
+
+//     // build start URL (server returns { oauthUrl })
+//     const sdkBase = (typeof process !== 'undefined' && process.env && process.env.NEXT_PUBLIC_FLOWLINK_BASE_URL)
+//       || baseUrl || window.location.origin.replace(/\/+$/, '')
+//     const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
+
+//     // ensure publishableKey exists
+//     if (!publishableKey) {
+//       throw new Error('Missing publishable key (client side). Set NEXT_PUBLIC_FLOWLINK_PUBLISHABLE_KEY or provide publishableKey in provider.')
+//     }
+
+//     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 to provider (Google/GitHub)
+//     window.location.href = data.oauthUrl
+//   } catch (err) {
+//     console.error('OAuth start error:', err)
+//     setError(err?.message || 'OAuth start failed')
+//     setLoading(false)
+//   }
+// }
+
+// const handleGoogle = (e) => {
+//   if (e && typeof e.preventDefault === 'function') e.preventDefault()
+//   startOAuthFlow('google')
+// }
+
+// const handleGithub = (e) => {
+//   if (e && typeof e.preventDefault === 'function') e.preventDefault()
+//   startOAuthFlow('github')
+// }
+//   return (
+//     <div style={overlay}>
+//       <div style={modal}>
+//         <h2 style={title}>Create account</h2>
+
+//         <form onSubmit={submit}>
+//           <label style={label}>Full name</label>
+//           <input
+//             name="name"
+//             style={input}
+//             value={name}
+//             onChange={e => setName(e.target.value)}
+//             autoComplete="name"
+//           />
+
+//           <label style={label}>Email</label>
+//           <input
+//             name="email"
+//             type="email"
+//             style={input}
+//             value={email}
+//             onChange={e => setEmail(e.target.value)}
+//             required
+//             autoComplete="email"
+//           />
+
+//           <label style={label}>Password</label>
+//           <input
+//             name="password"
+//             type="password"
+//             style={input}
+//             value={password}
+//             onChange={e => setPassword(e.target.value)}
+//             required
+//             autoComplete="new-password"
+//           />
+
+//           <div style={{ marginTop: 12 }}>
+//             <button style={button} type="submit" disabled={loading}>
+//               {loading ? 'Creating...' : 'Create account'}
+//             </button>
+//           </div>
+
+//           <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+//             <button
+//               type="button"
+//               onClick={handleGoogle}
+//               style={oauthButtonGoogle}
+//             >
+//               Continue with Google
+//             </button>
+
+//             <button
+//               type="button"
+//               onClick={handleGithub}
+//               style={oauthButtonGithub}
+//             >
+//               Continue with GitHub
+//             </button>
+//           </div>
+
+//           {error && <div style={errorBox}>{error}</div>}
+//           {message && <div style={successBox}>{message}</div>}
+//         </form>
+//       </div>
+//     </div>
+//   )
+// }
+
+// const overlay = {
+//   position: 'fixed',
+//   inset: 0,
+//   background: 'rgba(0,0,0,0.5)',
+//   display: 'flex',
+//   justifyContent: 'center',
+//   alignItems: 'center',
+//   padding: 20,
+//   zIndex: 9999
+// }
+// const modal = {
+//   width: '100%',
+//   maxWidth: 420,
+//   background: '#0f1724',
+//   borderRadius: 12,
+//   padding: 24,
+//   color: '#fff'
+// }
+// const title = { margin: 0, fontSize: 20, fontWeight: 600 }
+// const label = { marginTop: 10, display: 'block', fontSize: 13 }
+// const input = {
+//   width: '100%',
+//   padding: '10px 12px',
+//   borderRadius: 8,
+//   background: '#0b1220',
+//   color: '#fff',
+//   border: '1px solid #1e293b',
+//   marginTop: 6
+// }
+// const button = {
+//   marginTop: 15,
+//   width: '100%',
+//   padding: '10px 12px',
+//   borderRadius: 8,
+//   background: '#2563eb',
+//   border: 'none',
+//   color: '#fff',
+//   fontWeight: 600,
+//   cursor: 'pointer'
+// }
+// const oauthButtonGoogle = {
+//   flex: 1,
+//   padding: '10px 12px',
+//   borderRadius: 8,
+//   background: '#db4437',
+//   color: '#fff',
+//   border: 'none',
+//   cursor: 'pointer'
+// }
+// const oauthButtonGithub = {
+//   flex: 1,
+//   padding: '10px 12px',
+//   borderRadius: 8,
+//   background: '#24292f',
+//   color: '#fff',
+//   border: 'none',
+//   cursor: 'pointer'
+// }
+// const errorBox = { marginTop: 10, color: '#ffb4b4', fontSize: 13 }
+// const successBox = { marginTop: 10, color: '#bef264', fontSize: 13 }
+
+'use client'
+import React, { useState, useRef, useEffect } from 'react'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useAuth } from './provider.js'
+
+export default function SignUp() {
+const {
+publishableKey,
+baseUrl,
+redirect,
+redirectTo,
+user,
+loadingUser,
+fetchMe,
+setUser
+} = useAuth()
+
+const [name, setName] = useState('')
+const [email, setEmail] = useState('')
+const [password, setPassword] = useState('')
+const [loading, setLoading] = useState(false)
+const [message, setMessage] = useState(null)
+const redirectTimer = useRef(null)
+
+useEffect(() => {
+return () => {
+if (redirectTimer.current) clearTimeout(redirectTimer.current)
+}
+}, [])
+
+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)
+
+const url = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/signup`
+
+try {
+  const res = await fetch(url, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-publishable-key': publishableKey || ''
+    },
+    body: JSON.stringify({ name, email, 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()
+
+  setMessage('Account created. Redirecting…')
+  toast.success('Account created. Redirecting…')
+
+  if (redirect) {
+    redirectTimer.current = setTimeout(() => {
+      if (typeof redirectTo === 'function') redirectTo(redirect)
+      else if (typeof window !== 'undefined') window.location.assign(redirect)
+    }, 300)
+  }
+} catch (err) {
+  const text = err?.message ?? 'Network error'
+  toast.error(text)
+  console.error('Signup error:', err)
+} finally {
+  setLoading(false)
+}
+
+
+}
+
+async function startOAuthFlow(provider) {
+if (loading) return
+// prevent double clicks
+setLoading(true)
+
+try {
+  const rid =
+    (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+      ? crypto.randomUUID()
+      : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`
+
+  // callback must match what your SDK start expects and what Google console allows
+  const callbackUrl = encodeURIComponent(`${window.location.origin}/signup`)
+
+  // build start URL (server returns { oauthUrl })
+  const sdkBase = baseUrl || window.location.origin.replace(/\/+$/, '')
+  const startUrl = `${sdkBase}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
+
+  // ensure publishableKey exists
+  if (!publishableKey) {
+    throw new Error('Missing publishable key (client side). Set NEXT_PUBLIC_FLOWLINK_PUBLISHABLE_KEY or provide publishableKey in provider.')
+  }
+
+  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 to provider (Google/GitHub)
+  window.location.href = data.oauthUrl
+} catch (err) {
+  console.error('OAuth start error:', err)
+  toast.error(err?.message || 'OAuth start failed')
+  setLoading(false)
+}
+
+
+}
+
+const handleGoogle = (e) => {
+if (e && typeof e.preventDefault === 'function') e.preventDefault()
+startOAuthFlow('google')
+}
+
+const handleGithub = (e) => {
+if (e && typeof e.preventDefault === 'function') e.preventDefault()
+startOAuthFlow('github')
+}
+
+return (
+<div style={page}>
+<ToastContainer position="top-right" autoClose={5000} />
+<div style={card}>
+<div style={cardInner}>
+<div style={brand}>
+<div style={brandRow}>
+<div style={logoPlaceholder} aria-hidden />
+<h1 style={brandTitle}>Create account</h1>
+</div>
+<div style={brandSub}>
+<div style={brandLead}>Sign up to continue</div>
+<div style={brandMuted}>Welcome! Create your account.</div>
+</div>
+</div>
+
+      <div style={oauthRow}>
+        <button
+          onClick={handleGoogle}
+          type="button"
+          style={{ ...oauthButton, ...oauthGoogle }}
+          disabled={loading}
+          aria-disabled={loading}
+        >
+          <svg width={18} style={{ marginRight: 10 }} viewBox="-3 0 262 262" xmlns="http://www.w3.org/2000/svg" fill="#000000" aria-hidden>
+            <path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"></path>
+            <path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"></path>
+            <path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"></path>
+            <path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"></path>
+          </svg>
+          <span>{loading ? 'Loading...' : 'Continue with Google'}</span>
+        </button>
+
+        <button
+          onClick={handleGithub}
+          type="button"
+          style={{ ...oauthButton, ...oauthGithub }}
+          disabled={loading}
+          aria-disabled={loading}
+        >
+          <svg width={18} style={{ marginRight: 10 }} xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 20 20" aria-hidden>
+            <path fillRule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clipRule="evenodd" />
+          </svg>
+          <span>{loading ? 'Loading...' : 'Continue with GitHub'}</span>
+        </button>
+      </div>
+
+      <div style={dividerRow}>
+        <div style={line} />
+        <div style={orText}>or</div>
+        <div style={line} />
+      </div>
+
+      <form onSubmit={submit} style={form}>
+        <label style={label} htmlFor="name">
+          <span style={labelText}>Name</span>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder="Your name"
+            style={input}
+            autoComplete="name"
+          />
+        </label>
+
+        <label style={label} htmlFor="email">
+          <span style={labelText}>Email address</span>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            required
+            placeholder="you@example.com"
+            style={input}
+            autoComplete="email"
+          />
+        </label>
+
+        <label style={label} htmlFor="password">
+          <span style={labelText}>Password</span>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+            placeholder="••••••••"
+            style={input}
+            autoComplete="new-password"
+          />
+        </label>
+
+        <button
+          type="submit"
+          style={submitButton}
+          disabled={loading}
+          aria-disabled={loading}
+        >
+          {loading ? 'Signing up...' : 'Sign Up'}
+        </button>
+      </form>
+    </div>
+
+    <div style={below}>
+      <div style={belowRow}>
+        <span style={muted}>Already have an account? </span>
+        <a href="/sign-in" style={link}>Sign in</a>
+      </div>
+      <div style={dividerThin} />
+      <div style={secured}>
+        <div style={securedText}>Secured by auth</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+)
+}
+
+/* styles (JS objects) */
+const page = {
+position: 'fixed',
+inset: 0,
+display: 'flex',
+alignItems: 'center',
+justifyContent: 'center',
+padding: 24,
+background: 'linear-gradient(to bottom, #0b1220 0%, #071023 40%, #02040a 100%)',
+color: '#f8e9d3',
+minHeight: '100vh',
+zIndex: 9999
+}
+
+const card = {
+width: '100%',
+maxWidth: 520,
+borderRadius: 18,
+background: 'linear-gradient(180deg, rgba(15,19,36,0.9) 0%, rgba(6,10,18,0.95) 100%)',
+border: '1px solid rgba(148,163,184,0.06)',
+boxShadow: '0 10px 30px rgba(2,6,23,0.6)',
+overflow: 'hidden',
+display: 'flex',
+flexDirection: 'column',
+gap: 12
+}
+
+const cardInner = {
+padding: 26,
+display: 'flex',
+flexDirection: 'column',
+gap: 18
+}
+
+const brand = {
+display: 'flex',
+flexDirection: 'column',
+gap: 8
+}
+
+const brandRow = {
+display: 'flex',
+alignItems: 'center',
+gap: 12
+}
+
+const logoPlaceholder = {
+width: 36,
+height: 36,
+borderRadius: 999,
+background: 'linear-gradient(135deg,#2b313a,#0f1724)'
+}
+
+const brandTitle = {
+margin: 0,
+fontSize: 20,
+fontWeight: 600,
+color: '#fff'
+}
+
+const brandSub = {
+display: 'flex',
+flexDirection: 'column',
+gap: 4
+}
+
+const brandLead = {
+fontSize: 15,
+color: 'rgba(255,255,255,0.95)'
+}
+
+const brandMuted = {
+fontSize: 13,
+color: 'rgba(255,255,255,0.65)',
+marginTop: 2
+}
+
+const oauthRow = {
+display: 'flex',
+gap: 10,
+marginTop: 8
+}
+
+const oauthButton = {
+flex: 1,
+display: 'inline-flex',
+alignItems: 'center',
+justifyContent: 'center',
+padding: '10px 12px',
+borderRadius: 10,
+border: '1px solid rgba(148,163,184,0.08)',
+fontSize: 14,
+cursor: 'pointer',
+userSelect: 'none',
+gap: 8
+}
+
+const oauthGoogle = {
+background: 'rgba(255,255,255,0.06)',
+color: '#fff'
+}
+
+const oauthGithub = {
+background: 'rgba(255,255,255,0.03)',
+color: '#fff'
+}
+
+const dividerRow = {
+display: 'flex',
+alignItems: 'center',
+gap: 12,
+marginTop: 14
+}
+
+const line = {
+flex: 1,
+height: 1,
+background: 'rgba(148,163,184,0.06)'
+}
+
+const orText = {
+fontSize: 13,
+color: 'rgba(255,255,255,0.6)',
+padding: '0 8px'
+}
+
+const form = {
+display: 'flex',
+flexDirection: 'column',
+gap: 12,
+marginTop: 6
+}
+
+const label = {
+display: 'flex',
+flexDirection: 'column',
+gap: 6
+}
+
+const labelText = {
+fontSize: 13,
+color: 'rgba(255,255,255,0.66)'
+}
+
+const input = {
+width: '100%',
+padding: '10px 12px',
+borderRadius: 10,
+background: 'rgba(11,18,32,0.5)',
+color: '#f8e9d3',
+border: '1px solid rgba(148,163,184,0.06)',
+fontSize: 14,
+outline: 'none',
+boxSizing: 'border-box'
+}
+
+const submitButton = {
+marginTop: 6,
+width: '100%',
+padding: '10px 12px',
+borderRadius: 10,
+background: 'linear-gradient(180deg,#2563eb,#60a5fa)',
+border: 'none',
+color: '#fff',
+fontWeight: 600,
+cursor: 'pointer',
+fontSize: 15,
+display: 'inline-flex',
+alignItems: 'center',
+justifyContent: 'center'
+}
+
+const below = {
+padding: '12px 20px 20px 20px',
+borderTop: '1px solid rgba(148,163,184,0.03)',
+display: 'flex',
+flexDirection: 'column',
+gap: 10
+}
+
+const belowRow = {
+textAlign: 'center',
+display: 'flex',
+justifyContent: 'center',
+gap: 8,
+alignItems: 'center'
+}
+
+const muted = {
+color: 'rgba(255,255,255,0.65)',
+fontSize: 13
+}
+
+const link = {
+color: '#3b82f6',
+textDecoration: 'none',
+fontWeight: 600
+}
+
+const dividerThin = {
+height: 1,
+background: 'rgba(148,163,184,0.05)',
+marginTop: 6,
+marginBottom: 6
+}
+
+const secured = {
+textAlign: 'center'
+}
+
+const securedText = {
+color: 'rgba(255,255,255,0.9)',
+fontSize: 13,
+fontWeight: 600
+}