flowlink-auth 2.7.5 → 2.7.6

package/package.json

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

package/src/SignUp.jsx

@@ -258,490 +258,512 @@
 // const errorBox = { marginTop: 10, color: '#ffb4b4', fontSize: 13 }
 // const successBox = { marginTop: 10, color: '#bef264', fontSize: 13 }
 
+// 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 { 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)
+import Link from 'next/link'
+
+export default function SignUp({ agency = { name: 'MyApp', logo: '' } }) {
+  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)
+
+  useEffect(() => {
+    return () => {
+      if (redirectTimer.current) clearTimeout(redirectTimer.current)
+    }
+  }, [])
+
+  // Example submit — replace with real auth call
+  async function submit(e) {
+    e.preventDefault()
+    if (loading) return
+    setMessage(null)
+    setLoading(true)
+
+    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)
+    } catch (err) {
+      const text = err?.message ?? 'Network error'
+      // show toast with black background (ToastContainer configured below)
+      toast.error(text)
+      console.error('Signup error:', err)
+    } finally {
+      setLoading(false)
+    }
   }
 
-  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)
+  async function startOAuthFlow(provider) {
+    if (loading || loadingOauth[provider]) return
+    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
+    } catch (err) {
+      toast.error(err?.message || 'OAuth start failed')
+      console.error('OAuth start error:', err)
+      setLoadingOauth(prev => ({ ...prev, [provider]: false }))
+    }
   }
-} 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 handleGoogle = (e) => {
+    if (e && typeof e.preventDefault === 'function') e.preventDefault()
+    startOAuthFlow('google')
   }
 
-  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')
+  const handleGithub = (e) => {
+    if (e && typeof e.preventDefault === 'function') e.preventDefault()
+    startOAuthFlow('github')
   }
 
-  // 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} />
+  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
+        }}
+      />
+
+      <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>
+                <div style={subtitle}>Welcome! Create your account.</div>
+              </div>
+            </div>
+          </header>
+
+          <section style={oauthSection}>
+            <button
+              onClick={handleGoogle}
+              type="button"
+              style={{ ...oauthButton, ...oauthGoogle }}
+              disabled={loading || loadingOauth.google}
+              aria-disabled={loading || loadingOauth.google}
+            >
+              <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>{loadingOauth.google ? 'Loading...' : 'Continue with Google'}</span>
+            </button>
+
+            <button
+              onClick={handleGithub}
+              type="button"
+              style={{ ...oauthButton, ...oauthGithub }}
+              disabled={loading || loadingOauth.github}
+              aria-disabled={loading || loadingOauth.github}
+            >
+              <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>{loadingOauth.github ? 'Loading...' : 'Continue with GitHub'}</span>
+            </button>
+          </section>
+
+          <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={modalFooter}>
+          <div style={belowRow}>
+            <span style={muted}>Already have an account? </span>
+            <Link href="/sign-in" style={link}>Sign in</Link>
+          </div>
+          <div style={dividerThin} />
+          <div style={secured}>
+            <div style={securedText}>Secured by auth</div>
+          </div>
+        </div>
       </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>
+      {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>
-  </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
-}
+/* Styles (JS objects) */
 
-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
+/* overlay: translucent so underlying content is visible; backdrop blur and subtle vignette */
+const overlay = {
+  position: 'fixed',
+  inset: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 20,
+  background: 'linear-gradient(180deg, rgba(2,6,23,0.25), rgba(2,6,23,0.35))',
+  backdropFilter: 'blur(6px)',
+  minHeight: '100vh',
+  zIndex: 9999
 }
 
-const cardInner = {
-padding: 26,
-display: 'flex',
-flexDirection: 'column',
-gap: 18
+/* 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
+  boxShadow: '0 20px 50px rgba(2,6,23,0.55), inset 0 1px 0 rgba(255,255,255,0.02)',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  transform: 'translateY(-6px)'
 }
 
-const brand = {
-display: 'flex',
-flexDirection: 'column',
-gap: 8
+const modalInner = {
+  padding: 18,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12
 }
 
-const brandRow = {
-display: 'flex',
-alignItems: 'center',
-gap: 12
+/* HEADER / BRAND */
+const header = {
+  paddingBottom: 6,
+  borderBottom: '1px solid rgba(148,163,184,0.04)'
 }
 
-const logoPlaceholder = {
-width: 36,
-height: 36,
-borderRadius: 999,
-background: 'linear-gradient(135deg,#2b313a,#0f1724)'
+const brandRow = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12
 }
 
-const brandTitle = {
-margin: 0,
-fontSize: 20,
-fontWeight: 600,
-color: '#fff'
+const logo = {
+  width: 44,
+  height: 44,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
 }
 
-const brandSub = {
-display: 'flex',
-flexDirection: 'column',
-gap: 4
+const logoCircle = {
+  width: 36,
+  height: 36,
+  borderRadius: 999,
+  background: 'linear-gradient(135deg,#2f3438,#11151a)',
+  boxShadow: '0 4px 12px rgba(2,6,23,0.6)'
 }
 
-const brandLead = {
-fontSize: 15,
-color: 'rgba(255,255,255,0.95)'
+const title = {
+  margin: 0,
+  fontSize: 18,
+  fontWeight: 600,
+  color: '#e6e6e6'
 }
 
-const brandMuted = {
-fontSize: 13,
-color: 'rgba(255,255,255,0.65)',
-marginTop: 2
+const subtitle = {
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.72)',
+  marginTop: 4
 }
 
-const oauthRow = {
-display: 'flex',
-gap: 10,
-marginTop: 8
+/* OAUTH ROW */
+const oauthSection = {
+  marginTop: 8,
+  display: 'flex',
+  gap: 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
+  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,
+  minHeight: 40
 }
 
 const oauthGoogle = {
-background: 'rgba(255,255,255,0.06)',
-color: '#fff'
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
+  color: '#fff'
 }
 
 const oauthGithub = {
-background: 'rgba(255,255,255,0.03)',
-color: '#fff'
+  background: 'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00))',
+  color: '#fff'
 }
 
+/* DIVIDER */
 const dividerRow = {
-display: 'flex',
-alignItems: 'center',
-gap: 12,
-marginTop: 14
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  marginTop: 12
 }
 
 const line = {
-flex: 1,
-height: 1,
-background: 'rgba(148,163,184,0.06)'
+  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'
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.65)',
+  padding: '0 8px'
 }
 
+/* FORM */
 const form = {
-display: 'flex',
-flexDirection: 'column',
-gap: 12,
-marginTop: 6
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  marginTop: 6
 }
 
 const label = {
-display: 'flex',
-flexDirection: 'column',
-gap: 6
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6
 }
 
 const labelText = {
-fontSize: 13,
-color: 'rgba(255,255,255,0.66)'
+  fontSize: 13,
+  color: 'rgba(230,230,230,0.68)'
 }
 
 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'
+  width: '100%',
+  padding: '10px 12px',
+  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
+  fontSize: 14,
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'box-shadow 120ms, border-color 120ms'
 }
 
 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
+  marginTop: 6,
+  width: '100%',
+  padding: '10px 12px',
+  borderRadius: 10,
+  background: 'linear-gradient(180deg,#475569,#94a3b8)', // neutral blue-gray gradient
+  border: 'none',
+  color: '#fff',
+  fontWeight: 600,
+  cursor: 'pointer',
+  fontSize: 15,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: 44
+}
+
+/* FOOTER / BELOW */
+const modalFooter = {
+  padding: '12px 18px 18px 18px',
+  borderTop: '1px solid rgba(148,163,184,0.03)',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8
 }
 
 const belowRow = {
-textAlign: 'center',
-display: 'flex',
-justifyContent: 'center',
-gap: 8,
-alignItems: 'center'
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  gap: 8,
+  alignItems: 'center'
 }
 
 const muted = {
-color: 'rgba(255,255,255,0.65)',
-fontSize: 13
+  color: 'rgba(230,230,230,0.66)',
+  fontSize: 13
 }
 
 const link = {
-color: '#3b82f6',
-textDecoration: 'none',
-fontWeight: 600
+  color: '#9fb0d9',
+  textDecoration: 'none',
+  fontWeight: 600
 }
 
 const dividerThin = {
-height: 1,
-background: 'rgba(148,163,184,0.05)',
-marginTop: 6,
-marginBottom: 6
+  height: 1,
+  background: 'rgba(148,163,184,0.04)',
+  marginTop: 6,
+  marginBottom: 6
 }
 
 const secured = {
-textAlign: 'center'
+  textAlign: 'center'
 }
 
 const securedText = {
-color: 'rgba(255,255,255,0.9)',
-fontSize: 13,
-fontWeight: 600
-}
+  color: 'rgba(230,230,230,0.9)',
+  fontSize: 13,
+  fontWeight: 600
+}
+
+/* KEYS PANEL */
+const keysOverlay = {
+  position: 'fixed',
+  inset: 0,
+  zIndex: 20000,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: 'rgba(2,6,23,0.45)'
+}
+
+const keysPanel = {
+  background: '#fff',
+  color: '#111827',
+  padding: 18,
+  borderRadius: 10,
+  maxWidth: 720,
+  width: '95%',
+  boxShadow: '0 12px 40px rgba(2,6,23,0.5)'
+}
+
+const keyBox = {
+  padding: 10,
+  background: '#f3f4f6',
+  borderRadius: 8,
+  overflowX: 'auto',
+  fontSize: 13
+}
+
+const copyBtn = {
+  marginTop: 8,
+  padding: '8px 10px',
+  borderRadius: 8,
+  background: '#111827',
+  color: '#fff',
+  border: 'none',
+  cursor: 'pointer'
+}