flowlink-auth 2.7.3 → 2.7.5

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "flowlink-auth",
-  "version": "2.7.3",
+  "version": "2.7.5",
   "description": "Custom auth library",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "src/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "esbuild src/*.js src/*.jsx --outdir=dist --bundle --format=esm --loader:.js=jsx --loader:.jsx=jsx",

package/src/ErrorBox.jsx

@@ -0,0 +1,22 @@
+// src/ErrorBox.jsx
+import React from 'react'
+
+export default function ErrorBox({ message }) {
+  const style = {
+    border: '1px solid #e53935',
+    background: '#fff6f6',
+    color: '#b71c1c',
+    padding: 12,
+    borderRadius: 8,
+    fontFamily: 'system-ui, Roboto, Arial',
+    maxWidth: 640,
+    margin: '8px auto'
+  }
+  return (
+    <div role="alert" style={style}>
+      <strong>flowlink Auth Error —</strong>
+      <div style={{ marginTop: 6 }}>{message}</div>
+    </div>
+  )
+}
+

package/src/SignIn.jsx

@@ -0,0 +1,212 @@
+// src/signin.jsx
+'use client'
+import React, { useState } from 'react'
+import { useAuth } from './provider.js'
+
+export default function SignIn({ onSuccess } = {}) {
+  const {
+    publishableKey,
+    baseUrl,
+    redirect,
+    redirectTo,
+    user,
+    loadingUser,
+    completeLogin,
+    fetchMe,
+    setUser
+  } = useAuth()
+
+  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)
+
+    if (!email || !password) {
+      setError('Email and password are required')
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const endpoint = `${(baseUrl || '').replace(/\/+$/, '')}/api/sdk/login`
+
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-publishable-key': publishableKey || ''
+        },
+        body: JSON.stringify({ email, password })
+      })
+
+      const ct = res.headers.get('content-type') || ''
+      let data = {}
+      if (ct.includes('application/json')) data = await res.json()
+      else {
+        const text = await res.text()
+        throw new Error(`Unexpected response (status ${res.status}): ${text.slice(0, 200)}`)
+      }
+
+      if (!res.ok) throw new Error(data.error || data.message || `Login failed (status ${res.status})`)
+
+      const serverUser = data.user ?? null
+      if (serverUser && typeof setUser === 'function') {
+        try { setUser(serverUser) } catch (_) {}
+      }
+
+      if (typeof completeLogin === 'function') {
+        try {
+          await completeLogin()
+        } catch (e) {
+          if (typeof fetchMe === 'function') await fetchMe()
+        }
+      } else if (typeof fetchMe === 'function') {
+        await fetchMe()
+      }
+
+      if (onSuccess) {
+        try { onSuccess(data) } catch (_) {}
+      }
+
+      setMessage('Signed in. Redirecting...')
+      if (redirect) {
+        setTimeout(() => {
+          if (typeof redirectTo === 'function') redirectTo(redirect)
+          else if (typeof window !== 'undefined') window.location.assign(redirect)
+        }, 250)
+      }
+    } catch (err) {
+      setError(err.message || 'Network error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // --- OAuth start flow (Google / GitHub) ---
+  async function startOAuthFlow(provider) {
+    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)}`
+
+      // Use main app signin page as callback so user lands on /signin after flow
+      const callbackUrl = encodeURIComponent(`${window.location.origin}/signin`)
+
+      const sdkBase = (typeof process !== 'undefined' && process.env && process.env.NEXT_PUBLIC_FLOWLINK_BASE_URL)
+        || baseUrl || 'http://localhost:3001'
+      const startUrl = `${sdkBase.replace(/\/+$/, '')}/sdk/auth/start?rid=${rid}&source=${encodeURIComponent(provider)}&callbackUrl=${callbackUrl}`
+
+      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 },
+        mode: 'cors'
+      })
+
+      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')
+
+      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}>Sign in</h2>
+        <p style={subtitle}>Welcome back — enter your credentials.</p>
+
+        <form onSubmit={submit} style={{ width: '100%' }}>
+          <label style={label}>Email</label>
+          <input
+            style={input}
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            type="email"
+            required
+          />
+
+          <label style={label}>Password</label>
+          <input
+            style={input}
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+          />
+
+          <div style={{ marginTop: 12 }}>
+            <button style={button} type="submit" disabled={loading}>
+              {loading ? 'Signing in…' : 'Sign in'}
+            </button>
+          </div>
+
+          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+            <button type="button" onClick={handleGoogle} style={oauthButtonGoogle} disabled={loading}>
+              Continue with Google
+            </button>
+
+            <button type="button" onClick={handleGithub} style={oauthButtonGithub} disabled={loading}>
+              Continue with GitHub
+            </button>
+          </div>
+
+          {error && <div style={errorBox}>{error}</div>}
+          {message && <div style={successBox}>{message}</div>}
+        </form>
+      </div>
+    </div>
+  )
+}
+
+/* styles */
+const overlay = { position: 'fixed', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.45)', zIndex: 9999, padding: 20 }
+const modal = { width: '100%', maxWidth: 420, background: '#0f1724', color: '#fff', borderRadius: 12, padding: 22, boxShadow: '0 10px 30px rgba(2,6,23,0.6)', border: '1px solid rgba(255,255,255,0.04)' }
+const title = { margin: 0, fontSize: 20, fontWeight: 600 }
+const subtitle = { marginTop: 6, marginBottom: 14, color: '#cbd5e1', fontSize: 13 }
+const label = { display: 'block', color: '#cbd5e1', fontSize: 13, marginTop: 8 }
+const input = { width: '100%', padding: '10px 12px', marginTop: 6, borderRadius: 8, border: '1px solid rgba(255,255,255,0.06)', background: '#0b1220', color: '#fff', boxSizing: 'border-box' }
+const button = { width: '100%', padding: '10px 12px', borderRadius: 8, background: 'linear-gradient(90deg,#06b6d4,#2563eb)', color: '#0b1220', border: 'none', fontWeight: 700, 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 }
+