flowlink-auth 2.7.3 → 2.7.4

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "flowlink-auth",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "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 }
+

package/src/SignUp.jsx

@@ -0,0 +1,260 @@
+// 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 }
+

package/src/api.js

@@ -0,0 +1,60 @@
+// src/api.js
+import { getConfigSafe, getCSRFToken } from './init.js'
+
+/**
+ * Secure API call wrapper with CSRF protection and validation
+ */
+export const makeApi = () => {
+  const cfg = getConfigSafe()
+  return {
+    call: async (path, opts = {}) => {
+      if (!cfg) {
+        return { status: 400, body: { error: 'flowlink-auth: SDK not initialized (publishable key missing)' } }
+      }
+
+      // Security: Validate path
+      if (!path || typeof path !== 'string') {
+        return { status: 400, body: { error: 'Invalid API path' } }
+      }
+
+      // Security: Prevent open redirect
+      if (path.startsWith('//') || path.startsWith('http')) {
+        return { status: 400, body: { error: 'Invalid API path' } }
+      }
+
+      const headers = {
+        'Content-Type': 'application/json',
+        'x-publishable-key': cfg.publishableKey,
+        ...(opts.headers || {})
+      }
+
+      // Security: Add CSRF token if available
+      const csrfToken = getCSRFToken()
+      if (csrfToken && opts.method && opts.method.toUpperCase() !== 'GET') {
+        headers['x-csrf-token'] = csrfToken
+      }
+
+      try {
+        // Security: Validate URL before fetch
+        const fullUrl = new URL(cfg.baseUrl + path).href
+        
+        const res = await fetch(fullUrl, {
+          ...opts,
+          headers,
+          // Security: Include credentials for cookie-based auth
+          credentials: 'include',
+          // Security: Enforce no referrer for sensitive requests
+          referrerPolicy: 'strict-origin-when-cross-origin'
+        })
+
+        const body = await res.json().catch(() => null)
+        return { status: res.status, body }
+      } catch (err) {
+        // Security: Don't leak error details
+        console.error('API call failed:', err.message)
+        return { status: 500, body: { error: 'Request failed. Please try again.' } }
+      }
+    }
+  }
+}
+

package/src/createAuthMiddleware.js

@@ -0,0 +1,69 @@
+// flowlink-auth/src/createAuthMiddleware.js
+import { NextResponse } from 'next/server'
+import { jwtVerify } from 'jose'
+
+/**
+ * Factory that returns a Next.js middleware function.
+ * - secret: JWT HMAC secret (string)
+ * - redirectTo: where to send unauthenticated users (default '/signin')
+ *
+ * Note: the app's middleware.ts should export the returned function as default
+ * and set `export const config = { matcher: [...] }` for paths to protect.
+ */
+export function createAuthMiddleware({ secret, redirectTo = '/signin', publicPaths = [] } = {}) {
+  if (!secret) {
+    throw new Error('createAuthMiddleware: secret is required')
+  }
+
+  if (secret.length < 32) {
+    console.warn('createAuthMiddleware: secret should be at least 32 characters long for security')
+  }
+
+  return async function middleware(req) {
+    const url = req.nextUrl.clone()
+    const pathname = req.nextUrl.pathname
+
+    // Check if path is public (no auth required)
+    if (publicPaths && publicPaths.some(path => pathname.startsWith(path))) {
+      return NextResponse.next()
+    }
+
+    // 1) Read token from cookie (secure, httpOnly)
+    const token = req.cookies.get?.('flowlink_token')?.value ?? null
+
+    if (!token) {
+      // No token -> redirect to sign-in
+      url.pathname = redirectTo
+      return NextResponse.redirect(url)
+    }
+
+    // 2) Validate token signature & expiry
+    try {
+      // Security: Use jose for secure JWT verification
+      const key = new TextEncoder().encode(secret)
+      const verified = await jwtVerify(token, key, {
+        algorithms: ['HS256'] // Restrict to HS256
+      })
+
+      // 3) Security: Add user info to request headers for downstream services
+      const requestHeaders = new Headers(req.headers)
+      requestHeaders.set('x-user-id', verified.payload.userId || '')
+      requestHeaders.set('x-tenant-id', verified.payload.tenantId || '')
+
+      // token OK -> continue with verified user info
+      return NextResponse.next({
+        request: {
+          headers: requestHeaders
+        }
+      })
+    } catch (err) {
+      // Security: Log failed verification but don't expose details to user
+      console.error('Token verification failed:', err.message)
+
+      // invalid/expired token -> redirect to sign-in
+      url.pathname = redirectTo
+      return NextResponse.redirect(url)
+    }
+  }
+}
+

package/src/index.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+
+export interface FlowlinkAuthProviderProps {
+  baseUrl: string;
+  publishableKey?: string;
+  children: React.ReactNode;
+  redirect?: string;
+}
+
+export declare function FlowlinkAuthProvider(props: FlowlinkAuthProviderProps): JSX.Element;
+export declare function initFlowlinkAuth(opts: { publishableKey: string; baseUrl: string; opts?: any }): void;
+export declare function SignIn(props?: any): JSX.Element;
+export declare function SignUp(props?: any): JSX.Element;
+export declare function useAuth(): any;
+

package/src/index.js

@@ -0,0 +1,5 @@
+export { default as FlowlinkAuthProvider } from './provider'
+export { default as SignIn } from './SignIn'
+export { default as SignUp } from './SignUp'
+export { useAuth } from './provider'
+