@ismaelsoilet/synapsejs 1.9.0 → 1.11.1

package/src/runtime/server.ts

@@ -13,8 +13,10 @@ import * as path from 'path';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { SynapseProvider } from '../client/context';
+import { ToastProvider } from '../client/toast';
 import {
   buildClientBundle,
+  buildCssBundle,
   buildVendorBundle,
   type ClientManifest,
   freshBundleFrom,
@@ -27,21 +29,32 @@ import {
   type ActionContext,
   AnonymousSession,
   BoundedLruCache,
+  buildOAuthAuthorizationUrl,
   createActionContext,
   createDefaultLogger,
   createSession,
   type DatabaseClient,
+  discordOAuthPreset,
+  exchangeOAuthCode,
+  fetchOAuthUserProfile,
+  generateOAuthState,
+  generatePkceChallenge,
   getDatabase,
+  githubOAuthPreset,
+  googleOAuthPreset,
   hasAnyRole,
   loadSynapseConfig,
   normalizeCacheKey,
+  type OAuthProviderConfig,
   optimizeImage,
   resetDatabaseInstance,
   type SessionContext,
   type SliceCacheConfig,
   type SliceSocketDefinition,
   type SynapseConfig,
-  serializeCookie
+  serializeCookie,
+  signSessionToken,
+  verifyOAuthState
 } from '../core/index';
 import { ROLES_COOKIE, SESSION_COOKIE } from '../core/session-cookie';
 import { isSessionTokenRevoked, isSessionTokenRevokedInDb, verifySessionToken } from '../core/session-token';
@@ -119,21 +132,9 @@ export interface SliceLoadError {
   message: string;
 }
 
-/**
- * Domain error codes are the contract; the HTTP status is a transport detail
- * derived from them. Before this, every failure was 400, so a client could not
- * tell an expired session (401) from a missing row (404) or a duplicate (409).
- * Unknown codes keep 400: the domain, not the transport, decides.
- */
-const ERROR_STATUS: Array<{ pattern: RegExp; status: number }> = [
-  { pattern: /^UNAUTHORIZED$/, status: 401 },
-  { pattern: /^FORBIDDEN$/, status: 403 },
-  { pattern: /_NOT_FOUND$/, status: 404 },
-  { pattern: /^(DUPLICATE_|ALREADY_|CONFLICT)/, status: 409 },
-  { pattern: /^(INVALID_|MALFORMED)/, status: 422 },
-  { pattern: /^(NO_DATABASE|PERSISTENCE_FAILED)/, status: 500 },
-  { pattern: /_FAILED$/, status: 500 }
-];
+import { ERROR_STATUS, escapeHtml, httpStatusForError } from './security-headers';
+
+export { ERROR_STATUS, escapeHtml, httpStatusForError };
 
 const RATE_LIMITED_PREFIXES = [
   '/_synapse/rpc/',
@@ -157,8 +158,58 @@ export const TURBO_ROUTER_SCRIPT = `(function() {
       const newRoot = doc.querySelector('#synapse-root');
       const curRoot = document.querySelector('#synapse-root');
       if (newRoot && curRoot) {
-        curRoot.innerHTML = newRoot.innerHTML;
-        document.title = doc.title;
+        const updateDom = function() {
+          var preserved = document.querySelectorAll('[data-synapse-preserve]');
+          var preservedMap = new Map();
+
+          preserved.forEach(function(el) {
+            var key = el.getAttribute('data-synapse-preserve') || el.id || el.getAttribute('name');
+            if (!key) return;
+            preservedMap.set(key, {
+              value: el.value,
+              checked: el.checked,
+              selectedIndex: el.selectedIndex,
+              scrollTop: el.scrollTop,
+              innerHTML: el.innerHTML,
+              focused: document.activeElement === el
+            });
+          });
+
+          curRoot.innerHTML = newRoot.innerHTML;
+          document.title = doc.title;
+
+          var findTarget = function(key) {
+            var candidates = document.querySelectorAll('[data-synapse-preserve], [id], [name]');
+            for (var i = 0; i < candidates.length; i++) {
+              var candidate = candidates[i];
+              var candidateKey =
+                candidate.getAttribute('data-synapse-preserve') || candidate.id || candidate.getAttribute('name');
+              if (candidateKey === key) return candidate;
+            }
+            return null;
+          };
+
+          preservedMap.forEach(function(state, key) {
+            var target = findTarget(key);
+            if (!target) return;
+
+            if (target.value !== undefined && state.value !== undefined) target.value = state.value;
+            if (target.checked !== undefined && state.checked !== undefined) target.checked = state.checked;
+            if (target.selectedIndex !== undefined && state.selectedIndex !== undefined) {
+              target.selectedIndex = state.selectedIndex;
+            }
+            if (state.scrollTop !== undefined) target.scrollTop = state.scrollTop;
+            if (target.value === undefined && state.innerHTML !== undefined) target.innerHTML = state.innerHTML;
+            if (state.focused && typeof target.focus === 'function') target.focus();
+          });
+        };
+
+        if (document.startViewTransition) {
+          await document.startViewTransition(updateDom).finished;
+        } else {
+          updateDom();
+        }
+
         var newPropsScript = doc.querySelector('script[data-synapse-props]');
         if (newPropsScript && newPropsScript.textContent) {
           try {
@@ -167,6 +218,7 @@ export const TURBO_ROUTER_SCRIPT = `(function() {
         }
         if (push) history.pushState({}, '', href);
         window.dispatchEvent(new CustomEvent('synapse:morphed', { detail: { url: href } }));
+        window.__SYNAPSE_URL__ = href;
         var newClientScript = doc.querySelector('script[data-synapse-client]');
         if (newClientScript && newClientScript.src) {
           import(newClientScript.src).then(function(mod) {
@@ -200,28 +252,6 @@ export const TURBO_ROUTER_SCRIPT = `(function() {
   });
 })();`;
 
-export function httpStatusForError(error: unknown): number {
-  const code = typeof error === 'string' ? error : '';
-
-  for (const entry of ERROR_STATUS) {
-    if (entry.pattern.test(code)) {
-      return entry.status;
-    }
-  }
-
-  return 400;
-}
-
-/** Escapes special HTML characters to prevent Reflected/Stored XSS. */
-export function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}
-
 /** Parses Cookie request header safely into key-value pairs. */
 export function parseCookies(header: string | null | undefined): Record<string, string> {
   if (!header) {
@@ -988,6 +1018,7 @@ export class SynapseServer {
             userId: verified.value.userId,
             tenantId: verified.value.tenantId,
             roles: verified.value.roles,
+            permissions: verified.value.permissions,
             token
           })
         : AnonymousSession();
@@ -1337,6 +1368,11 @@ export class SynapseServer {
       return '  <link rel="stylesheet" href="/synapse.css">';
     }
 
+    const compiledCssPath = path.join(this.baseDir, '.synapse', 'client', 'synapse.css');
+    if (fs.existsSync(compiledCssPath)) {
+      return '  <link rel="stylesheet" href="/_synapse/client/synapse.css">';
+    }
+
     const thirdParty = this.thirdPartyOrigins();
 
     if (!thirdParty.enabled) {
@@ -1366,6 +1402,166 @@ export class SynapseServer {
     return elements.join('\n');
   }
 
+  /**
+   * Unified Social & Enterprise OAuth 2.0 Handler (RFC 7636 PKCE + Constant-Time State Verification)
+   */
+  private async handleOAuthRequest(
+    req: Request,
+    providerName: string,
+    isCallback: boolean,
+    url: URL,
+    startedAt: number
+  ): Promise<Response> {
+    const cors = this.corsHeaders(req);
+    const validProviders = ['google', 'github', 'discord'];
+
+    if (!validProviders.includes(providerName)) {
+      this.logRequest(req, url.pathname, 404, startedAt);
+      return Response.json(
+        { ok: false, error: `Provedor OAuth "${providerName}" não suportado. Aceitos: ${validProviders.join(', ')}` },
+        { status: 404, headers: cors ?? undefined }
+      );
+    }
+
+    const redirectUri = `${url.origin}/_synapse/auth/${providerName}/callback`;
+    const clientIdEnv = process.env[`${providerName.toUpperCase()}_CLIENT_ID`] || '';
+    const clientSecretEnv = process.env[`${providerName.toUpperCase()}_CLIENT_SECRET`] || '';
+
+    if (!clientIdEnv) {
+      this.logRequest(req, url.pathname, 500, startedAt);
+      return Response.json(
+        {
+          ok: false,
+          error: `Variável de ambiente ${providerName.toUpperCase()}_CLIENT_ID não configurada no servidor.`
+        },
+        { status: 500, headers: cors ?? undefined }
+      );
+    }
+
+    let config: OAuthProviderConfig;
+    if (providerName === 'google') {
+      config = googleOAuthPreset({ clientId: clientIdEnv, clientSecret: clientSecretEnv, redirectUri });
+    } else if (providerName === 'github') {
+      config = githubOAuthPreset({ clientId: clientIdEnv, clientSecret: clientSecretEnv, redirectUri });
+    } else {
+      config = discordOAuthPreset({ clientId: clientIdEnv, clientSecret: clientSecretEnv, redirectUri });
+    }
+
+    // 1. INICIAR FLUXO: GET /_synapse/auth/:provider
+    if (!isCallback) {
+      const pkce = generatePkceChallenge();
+      const state = generateOAuthState();
+      const authUrl = buildOAuthAuthorizationUrl({
+        config,
+        state,
+        codeChallenge: pkce.codeChallenge
+      });
+
+      const statePayload = JSON.stringify({ state, codeVerifier: pkce.codeVerifier, provider: providerName });
+      const stateCookie = serializeCookie('__synapse_oauth_state', statePayload, {
+        httpOnly: true,
+        secure: !url.hostname.includes('localhost') && !url.hostname.includes('127.0.0.1'),
+        sameSite: 'lax',
+        maxAge: 600,
+        path: '/'
+      });
+
+      this.logRequest(req, url.pathname, 302, startedAt);
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: authUrl,
+          'Set-Cookie': stateCookie,
+          ...(cors ?? {})
+        }
+      });
+    }
+
+    // 2. CALLBACK: GET /_synapse/auth/:provider/callback
+    const code = url.searchParams.get('code');
+    const receivedState = url.searchParams.get('state');
+
+    const cookieHeader = req.headers.get('cookie') || '';
+    const match = cookieHeader.match(/__synapse_oauth_state=([^;]+)/);
+    let cookieStateData: { state: string; codeVerifier: string; provider: string } | null = null;
+
+    if (match) {
+      try {
+        cookieStateData = JSON.parse(decodeURIComponent(match[1]));
+      } catch {}
+    }
+
+    if (!code || !receivedState || !cookieStateData || !verifyOAuthState(cookieStateData.state, receivedState)) {
+      this.logRequest(req, url.pathname, 400, startedAt);
+      return Response.json(
+        { ok: false, error: 'INVALID_OAUTH_STATE', message: 'Parâmetro de estado OAuth inválido ou expirado.' },
+        { status: 400, headers: cors ?? undefined }
+      );
+    }
+
+    const exchangeRes = await exchangeOAuthCode({
+      config,
+      code,
+      codeVerifier: cookieStateData.codeVerifier,
+      timeoutMs: 10_000
+    });
+
+    if (!exchangeRes.ok) {
+      this.logRequest(req, url.pathname, 502, startedAt);
+      return Response.json(
+        { ok: false, error: 'OAUTH_EXCHANGE_FAILED', message: 'Falha ao trocar código de autorização por token.' },
+        { status: 502, headers: cors ?? undefined }
+      );
+    }
+
+    const profileRes = await fetchOAuthUserProfile(
+      providerName as 'google' | 'github' | 'discord',
+      exchangeRes.value.accessToken
+    );
+
+    if (!profileRes.ok) {
+      this.logRequest(req, url.pathname, 502, startedAt);
+      return Response.json(
+        { ok: false, error: 'OAUTH_PROFILE_FAILED', message: 'Falha ao recuperar perfil do usuário no provedor.' },
+        { status: 502, headers: cors ?? undefined }
+      );
+    }
+
+    const profile = profileRes.value;
+    const secret = process.env.SYNAPSE_SESSION_SECRET || 'dev_secret_insecure_change_in_production';
+    const sessionToken = signSessionToken(
+      {
+        userId: `${providerName}:${profile.id}`,
+        roles: ['user'],
+        permissions: ['read', 'write']
+      },
+      secret
+    );
+
+    const sessionCookieHeader = serializeCookie(SESSION_COOKIE, sessionToken, {
+      httpOnly: true,
+      secure: !url.hostname.includes('localhost') && !url.hostname.includes('127.0.0.1'),
+      sameSite: 'lax',
+      maxAge: 86400,
+      path: '/'
+    });
+    const clearStateCookie = serializeCookie('__synapse_oauth_state', '', {
+      httpOnly: true,
+      maxAge: 0,
+      path: '/'
+    });
+
+    this.logRequest(req, url.pathname, 302, startedAt);
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: '/',
+        'Set-Cookie': `${sessionCookieHeader}, ${clearStateCookie}`,
+        ...(cors ?? {})
+      }
+    });
+  }
+
   /**
    * Renders the slice SSR component tree and packages the complete HTML shell
    */
@@ -1373,7 +1569,8 @@ export class SynapseServer {
     slice: DiscoveredSlice,
     req: Request,
     url: URL,
-    matchedLocale?: string
+    matchedLocale?: string,
+    routeParams: Record<string, string> = {}
   ): Promise<{
     html: string;
     dataProps: Record<string, unknown>;
@@ -1383,9 +1580,11 @@ export class SynapseServer {
   }> {
     const session = await this.requestSession(req);
     const actionCtx = this.createActionContext(slice.key, session);
-    const params = Object.fromEntries(url.searchParams.entries());
+    const searchParams = Object.fromEntries(url.searchParams.entries());
+    const params = { ...searchParams, ...routeParams };
     const dataProps: Record<string, unknown> = {
       ...params,
+      __synapse_params: routeParams,
       ...(matchedLocale ? { locale: matchedLocale } : {})
     };
     let loaderError: string | null = null;
@@ -1449,7 +1648,12 @@ export class SynapseServer {
         const treeWithLayout = this.layoutComponent
           ? React.createElement(this.layoutComponent, { session, url: url.toString() }, treeWithDomainLayout)
           : treeWithDomainLayout;
-        const rootEl = React.createElement(SynapseProvider, { props: dataProps, session }, treeWithLayout);
+        const treeWithToast = React.createElement(ToastProvider, null, treeWithLayout);
+        const rootEl = React.createElement(
+          SynapseProvider,
+          { props: dataProps, session, url: url.toString() },
+          treeWithToast
+        );
         contentHtml = renderToString(rootEl);
       } catch (e: any) {
         hasError = true;
@@ -1474,7 +1678,9 @@ export class SynapseServer {
       clientUrl,
       meta,
       matchedLocale || 'pt-BR',
-      hasCustomLayout
+      hasCustomLayout,
+      routeParams,
+      url.toString()
     );
 
     return { html, dataProps, meta, hasError, error: renderError || undefined };
@@ -1491,7 +1697,9 @@ export class SynapseServer {
     clientUrl: string | null,
     meta?: SliceMetadata,
     locale = 'pt-BR',
-    hasLayout = false
+    hasLayout = false,
+    routeParams: Record<string, string> = {},
+    currentUrl = '/'
   ): string {
     const safeTitle = escapeHtml(title);
     const safeSliceName = escapeHtml(sliceName);
@@ -1559,7 +1767,7 @@ ${importMapScript}
   <div id="synapse-root" class="min-h-full flex-1 flex flex-col">${contentHtml}</div>
 
   <script data-synapse-props id="__SYNAPSE_PROPS_DATA__" type="application/json">${propsJson}</script>
-  <script>globalThis.__SYNAPSE_PROPS__ = JSON.parse(document.getElementById('__SYNAPSE_PROPS_DATA__').textContent || '{}');</script>
+  <script>globalThis.__SYNAPSE_PROPS__ = JSON.parse((document.querySelector('script[data-synapse-props][id="__SYNAPSE_PROPS_DATA__"]') || {}).textContent || '{}'); globalThis.__SYNAPSE_ROUTE_PARAMS__ = ${JSON.stringify(routeParams)}; globalThis.__SYNAPSE_URL__ = ${JSON.stringify(currentUrl)};</script>
   ${clientUrl ? `<script data-synapse-client type="module" src="${clientUrl}"></script>` : '<!-- sem componente hidratavel -->'}
 
   <script type="module" src="/_synapse/turbo-router.js"></script>
@@ -1616,7 +1824,7 @@ ${importMapScript}
 
     <!-- Props de hidratacao e a entrada de cliente gerada -->
     <script data-synapse-props id="__SYNAPSE_PROPS_DATA__" type="application/json">${propsJson}</script>
-    <script>globalThis.__SYNAPSE_PROPS__ = JSON.parse(document.getElementById('__SYNAPSE_PROPS_DATA__').textContent || '{}');</script>
+    <script>globalThis.__SYNAPSE_PROPS__ = JSON.parse((document.querySelector('script[data-synapse-props][id="__SYNAPSE_PROPS_DATA__"]') || {}).textContent || '{}'); globalThis.__SYNAPSE_ROUTE_PARAMS__ = ${JSON.stringify(routeParams)}; globalThis.__SYNAPSE_URL__ = ${JSON.stringify(currentUrl)};</script>
     ${clientUrl ? `<script data-synapse-client type="module" src="${clientUrl}"></script>` : '<!-- sem componente hidratavel -->'}
 
     <!-- Turbo Morphing SPA Navigation (<1.5kb, Zero Dependencies) -->
@@ -2043,6 +2251,17 @@ ${this.renderStylesheets()}
             });
           }
 
+          // Unified Social & Enterprise OAuth 2.0 Dispatcher: /_synapse/auth/:provider and /_synapse/auth/:provider/callback
+          if (pathname.startsWith('/_synapse/auth/')) {
+            const authPath = pathname.slice('/_synapse/auth/'.length);
+            const isCallback = authPath.endsWith('/callback');
+            const providerName = isCallback
+              ? authPath.slice(0, -'/callback'.length).toLowerCase()
+              : authPath.toLowerCase();
+
+            return await this.handleOAuthRequest(req, providerName, isCallback, url, startedAt);
+          }
+
           // 3. RPC Actions Dispatcher (POST /_synapse/rpc/:sliceName)
           if (pathname.startsWith('/_synapse/rpc/')) {
             const cors = this.corsHeaders(req);
@@ -2533,22 +2752,29 @@ ${this.renderStylesheets()}
           if (pathname.startsWith('/_synapse/client/')) {
             const bundleFilename = path.basename(pathname);
             const bundleFile = path.join(this.baseDir, '.synapse/client', bundleFilename);
-            if (!fs.existsSync(bundleFile) && bundleFilename === VENDOR_BUNDLE_NAME) {
+            if (bundleFilename === VENDOR_BUNDLE_NAME) {
               await buildVendorBundle(this.baseDir, this.config.compiler?.vendorPackages);
             }
+            if (!fs.existsSync(bundleFile) && bundleFilename === 'synapse.css') {
+              await buildCssBundle(this.baseDir);
+            }
             if (!fs.existsSync(bundleFile)) {
               this.logRequest(req, pathname, 404, startedAt);
               return new Response('Client bundle not found', { status: 404 });
             }
             this.logRequest(req, pathname, 200, startedAt, undefined, 'static');
+            const contentType = bundleFilename.endsWith('.css')
+              ? 'text/css; charset=utf-8'
+              : 'application/javascript; charset=utf-8';
             return new Response(Bun.file(bundleFile), {
-              headers: { 'Content-Type': 'application/javascript; charset=utf-8' }
+              headers: { 'Content-Type': contentType }
             });
           }
 
-          // 5. UI Route Dispatcher (GET /:domain/:sliceName with optional i18n locale prefix)
+          // 5. UI Route Dispatcher (GET /:domain/:sliceName with optional i18n locale prefix or dynamic path segments)
           let resolvedSlice: DiscoveredSlice | undefined;
           let matchedLocale: string | undefined;
+          const routeParams: Record<string, string> = {};
 
           for (const slice of this.slices.values()) {
             if (pathname === slice.routePath) {
@@ -2559,14 +2785,30 @@ ${this.renderStylesheets()}
 
           if (!resolvedSlice && !pathname.startsWith('/_synapse/')) {
             const localeMatch = pathname.match(I18N_LOCALE_REGEX);
+            const strippedPath = localeMatch ? pathname.replace(I18N_LOCALE_REGEX, '/') : pathname;
             if (localeMatch) {
-              const strippedPath = pathname.replace(I18N_LOCALE_REGEX, '/');
-              for (const slice of this.slices.values()) {
-                if (strippedPath === slice.routePath) {
-                  resolvedSlice = slice;
-                  matchedLocale = localeMatch[1];
-                  break;
+              matchedLocale = localeMatch[1];
+            }
+
+            for (const slice of this.slices.values()) {
+              if (strippedPath === slice.routePath) {
+                resolvedSlice = slice;
+                break;
+              }
+              // Suporte a segmentos dinâmicos de rota: /:domain/:sliceName/:param...
+              if (strippedPath.startsWith(`${slice.routePath}/`)) {
+                resolvedSlice = slice;
+                const remainingSegments = strippedPath
+                  .slice(slice.routePath.length + 1)
+                  .split('/')
+                  .filter(Boolean);
+                if (remainingSegments.length > 0) {
+                  routeParams.id = remainingSegments[0];
+                  for (let i = 0; i < remainingSegments.length; i++) {
+                    routeParams[`param${i + 1}`] = remainingSegments[i];
+                  }
                 }
+                break;
               }
             }
           }
@@ -2611,7 +2853,7 @@ ${this.renderStylesheets()}
                     this.revalidatingKeys.add(cacheKey);
                     (async () => {
                       try {
-                        const fresh = await this.renderSliceHtml(slice, req, url, matchedLocale);
+                        const fresh = await this.renderSliceHtml(slice, req, url, matchedLocale, routeParams);
                         if (!fresh.hasError) {
                           const ttl = cacheConfig.ttlSeconds;
                           const swr = cacheConfig.staleWhileRevalidateSeconds ?? 0;
@@ -2643,7 +2885,7 @@ ${this.renderStylesheets()}
               }
             }
 
-            const { html, hasError } = await this.renderSliceHtml(slice, req, url, matchedLocale);
+            const { html, hasError } = await this.renderSliceHtml(slice, req, url, matchedLocale, routeParams);
 
             if (hasError) {
               this.logRequest(req, pathname, 500, startedAt, session, 'ssr');

package/templates/starter/package.json

@@ -20,7 +20,7 @@
     "start": "synapse start"
   },
   "dependencies": {
-    "@ismaelsoilet/synapsejs": "^1.1.1",
+    "@ismaelsoilet/synapsejs": "^1.11.1",
     "@sinclair/typebox": "^0.34.40",
     "fast-check": "^3.23.2",
     "react": "^19.0.0",
@@ -30,6 +30,6 @@
     "@types/bun": "^1.4.2",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "typescript": "^5.8.2"
+    "typescript": "~5.9.3"
   }
 }