@striae-org/striae 3.2.2 → 4.0.0

package/app/routes/auth/login.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { Link, useSearchParams } from 'react-router';
+import { useState, useEffect, useRef } from 'react';
+import { Link, useSearchParams, type MetaFunction } from 'react-router';
 import { auth } from '~/services/firebase';
 import {
     signInWithEmailAndPassword, 
@@ -18,6 +18,7 @@ import { EmailActionHandler } from '~/routes/auth/emailActionHandler';
 import { handleAuthError } from '~/services/firebase/errors';
 import { MFAVerification } from '~/components/auth/mfa-verification';
 import { MFAEnrollment } from '~/components/auth/mfa-enrollment';
+import { Toast } from '~/components/toast/toast';
 import { Icon } from '~/components/icon/icon';
 import styles from './login.module.css';
 import { Striae } from '~/routes/striae/striae';
@@ -28,23 +29,123 @@ import { evaluatePasswordPolicy } from '~/utils/password-policy';
 import { buildActionCodeSettings } from '~/utils/auth-action-settings';
 import { userHasMFA } from '~/utils/mfa';
 
-export const meta = () => {
-  const titleText = 'Striae | Welcome to Striae';
-  const description = 'Login to your Striae account to access your projects and data';
+const APP_CANONICAL_ORIGIN = 'https://app.striae.org';
+const SOCIAL_IMAGE_PATH = '/social-image.png';
+const SOCIAL_IMAGE_ALT = 'Striae forensic annotation and comparison workspace';
+const LOGIN_PATH_ALIASES = new Set(['/auth', '/auth/', '/auth/login', '/auth/login/']);
+
+type AuthMetaContent = {
+  title: string;
+  description: string;
+  robots: string;
+};
+
+const getCanonicalPath = (pathname: string): string => {
+  if (!pathname || LOGIN_PATH_ALIASES.has(pathname)) {
+    return '/';
+  }
+
+  return pathname.startsWith('/') ? pathname : `/${pathname}`;
+};
+
+const getAuthMetaContent = (mode: string | null, hasActionCode: boolean): AuthMetaContent => {
+  if (!mode && !hasActionCode) {
+    return {
+      title: 'Striae | Secure Login for Firearms Examiners',
+      description: 'Sign in to Striae to access your forensic annotation workspace, case files, and comparison tools.',
+      robots: 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1',
+    };
+  }
+
+  if (mode === 'resetPassword') {
+    return {
+      title: 'Striae | Reset Your Password',
+      description: 'Use this secure page to reset your Striae account password and restore access to your workspace.',
+      robots: 'noindex,nofollow,noarchive',
+    };
+  }
+
+  if (mode === 'verifyEmail') {
+    return {
+      title: 'Striae | Verify Your Email Address',
+      description: 'Confirm your email address to complete Striae account activation and continue securely.',
+      robots: 'noindex,nofollow,noarchive',
+    };
+  }
+
+  if (mode === 'recoverEmail') {
+    return {
+      title: 'Striae | Recover Email Access',
+      description: 'Complete your Striae account email recovery steps securely.',
+      robots: 'noindex,nofollow,noarchive',
+    };
+  }
+
+  return {
+    title: 'Striae | Account Action',
+    description: 'Complete your Striae account action securely.',
+    robots: 'noindex,nofollow,noarchive',
+  };
+};
+
+export const meta: MetaFunction = ({ location }) => {
+  const searchParams = new URLSearchParams(location.search);
+  const mode = searchParams.get('mode');
+  const hasActionCode = Boolean(searchParams.get('oobCode'));
+
+  const canonicalPath = getCanonicalPath(location.pathname);
+  const canonicalHref = `${APP_CANONICAL_ORIGIN}${canonicalPath}`;
+  const socialImageHref = `${APP_CANONICAL_ORIGIN}${SOCIAL_IMAGE_PATH}`;
+  const { title, description, robots } = getAuthMetaContent(mode, hasActionCode);
 
   return [
-    { title: titleText },
+    { title },
     { name: 'description', content: description },
+    { name: 'robots', content: robots },
+    { property: 'og:site_name', content: 'Striae' },
+    { property: 'og:type', content: 'website' },
+    { property: 'og:url', content: canonicalHref },
+    { property: 'og:title', content: title },
+    { property: 'og:description', content: description },
+    { property: 'og:image', content: socialImageHref },
+    { property: 'og:image:secure_url', content: socialImageHref },
+    { property: 'og:image:alt', content: SOCIAL_IMAGE_ALT },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:title', content: title },
+    { name: 'twitter:description', content: description },
+    { name: 'twitter:image', content: socialImageHref },
+    { name: 'twitter:image:alt', content: SOCIAL_IMAGE_ALT },
+    { tagName: 'link', rel: 'canonical', href: canonicalHref },
   ];
 };
 
 const SUPPORTED_EMAIL_ACTION_MODES = new Set(['resetPassword', 'verifyEmail', 'recoverEmail']);
 
+const getUserFirstName = (user: User): string => {
+  const displayName = user.displayName?.trim();
+  if (displayName) {
+    const [firstName] = displayName.split(/\s+/);
+    if (firstName) {
+      return firstName;
+    }
+  }
+
+  const emailPrefix = user.email?.split('@')[0]?.trim();
+  if (emailPrefix) {
+    return emailPrefix;
+  }
+
+  return 'User';
+};
+
 export const Login = () => {
   const [searchParams] = useSearchParams();
+  const shouldShowWelcomeToastRef = useRef(false);
 
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
+  const [welcomeToastMessage, setWelcomeToastMessage] = useState('');
+  const [isWelcomeToastVisible, setIsWelcomeToastVisible] = useState(false);
   const [isLogin, setIsLogin] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isCheckingUser, setIsCheckingUser] = useState(false);
@@ -113,11 +214,9 @@ export const Login = () => {
   };  
 
   // Check if user exists in the USER_DB using centralized function
-  const checkUserExists = async (uid: string): Promise<boolean> => {
+  const checkUserExists = async (currentUser: User): Promise<boolean> => {
     try {
-      // Create a minimal user object for the centralized function
-      const tempUser = { uid } as User;
-      const userData = await getUserData(tempUser);
+      const userData = await getUserData(currentUser);
       
       return userData !== null;
     } catch (error) {
@@ -156,7 +255,7 @@ export const Login = () => {
       // Check if user exists in the USER_DB
       setIsCheckingUser(true);
       try {
-        const userExists = await checkUserExists(currentUser.uid);
+        const userExists = await checkUserExists(currentUser);
         setIsCheckingUser(false);
         
         if (!userExists) {
@@ -180,6 +279,12 @@ export const Login = () => {
       
       console.log("User signed in:", currentUser.email);
       setShowMfaEnrollment(false);
+
+      if (shouldShowWelcomeToastRef.current) {
+        setWelcomeToastMessage(`Welcome to Striae, ${getUserFirstName(currentUser)}!`);
+        setIsWelcomeToastVisible(true);
+        shouldShowWelcomeToastRef.current = false;
+      }
       
       // Log successful login audit
       try {
@@ -198,6 +303,8 @@ export const Login = () => {
       setUser(null);
       setShowMfaEnrollment(false);
       setIsCheckingUser(false);
+      setIsWelcomeToastVisible(false);
+      shouldShowWelcomeToastRef.current = false;
     }
   });
 
@@ -339,6 +446,7 @@ export const Login = () => {
       // Don't sign out - let user stay logged in but unverified to see verification screen
     } else {
       // Login
+      shouldShowWelcomeToastRef.current = true;
       try {
         await signInWithEmailAndPassword(auth, email, password);
       } catch (loginError: unknown) {
@@ -356,10 +464,12 @@ export const Login = () => {
           setIsLoading(false);
           return;
         }
+        shouldShowWelcomeToastRef.current = false;
         throw loginError; // Re-throw non-MFA errors
       }
     }
   } catch (err) {
+    shouldShowWelcomeToastRef.current = false;
     const { message } = handleAuthError(err);
     setError(message);
     
@@ -408,6 +518,8 @@ export const Login = () => {
       setShowMfaEnrollment(false);
       setShowMfaVerification(false);
       setMfaResolver(null);
+      setIsWelcomeToastVisible(false);
+      shouldShowWelcomeToastRef.current = false;
     } catch (err) {
       console.error('Sign out error:', err);
     }
@@ -648,6 +760,15 @@ export const Login = () => {
           mandatory={true}
         />
       )}
+
+      {!shouldHandleEmailAction && (
+        <Toast
+          message={welcomeToastMessage}
+          type="success"
+          isVisible={isWelcomeToastVisible}
+          onClose={() => setIsWelcomeToastVisible(false)}
+        />
+      )}
       
     </>
   );

package/app/routes/auth/route.ts

@@ -1,7 +1,8 @@
-import { redirect } from 'react-router';
+import { redirect, type LoaderFunctionArgs } from 'react-router';
 
-export const loader = async () => {
-	throw redirect('/');
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const requestUrl = new URL(request.url);
+	throw redirect(`/${requestUrl.search}`);
 };
 
 export { Login as default, meta } from './login';

package/app/routes/striae/striae.tsx

@@ -7,11 +7,10 @@ import { Toast } from '~/components/toast/toast';
 import { getImageUrl } from '~/components/actions/image-manage';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
 import { generatePDF } from '~/components/actions/generate-pdf';
-import { getUserApiKey } from '~/utils/auth';
+import { fetchUserApi } from '~/utils/user-api-client';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/annotation-timestamp';
 import { type AnnotationData, type FileData } from '~/types';
 import { checkCaseIsReadOnly } from '~/components/actions/case-manage';
-import paths from '~/config/config.json';
 import styles from './striae.module.css';
 
 interface StriaePage {
@@ -76,11 +75,8 @@ export const Striae = ({ user }: StriaePage) => {
   useEffect(() => {
     const fetchUserCompany = async () => {
       try {
-        const apiKey = await getUserApiKey();
-        const response = await fetch(`${paths.user_worker_url}/${user.uid}`, {
-          headers: {
-            'X-Custom-Auth-Key': apiKey
-          }
+        const response = await fetchUserApi(user, `/${encodeURIComponent(user.uid)}`, {
+          method: 'GET'
         });
         
         if (response.ok) {
@@ -96,7 +92,7 @@ export const Striae = ({ user }: StriaePage) => {
     if (user?.uid) {
       fetchUserCompany();
     }
-  }, [user?.uid]);
+  }, [user]);
 
   const handleCaseChange = (caseNumber: string) => {
     setCurrentCase(caseNumber);

package/app/services/audit/audit-api-client.ts

@@ -0,0 +1,40 @@
+import type { User } from 'firebase/auth';
+import { auth } from '~/services/firebase';
+
+const AUDIT_API_BASE = '/api/audit';
+
+function normalizePath(path: string): string {
+  if (!path) {
+    return '/';
+  }
+
+  return path.startsWith('/') ? path : `/${path}`;
+}
+
+export async function fetchAuditApi(path: string, init: RequestInit = {}): Promise<Response> {
+  const normalizedPath = normalizePath(path);
+  const currentUserWithOptionalToken = auth.currentUser as User & { getIdToken?: () => Promise<string> };
+
+  if (!currentUserWithOptionalToken || typeof currentUserWithOptionalToken.getIdToken !== 'function') {
+    throw new Error('Unable to authenticate audit request: missing Firebase token provider');
+  }
+
+  let idToken: string;
+  try {
+    idToken = await currentUserWithOptionalToken.getIdToken();
+  } catch {
+    throw new Error('Unable to authenticate audit request: failed to retrieve Firebase token');
+  }
+
+  if (!idToken) {
+    throw new Error('Unable to authenticate audit request: empty Firebase token');
+  }
+
+  const headers = new Headers(init.headers);
+  headers.set('Authorization', `Bearer ${idToken}`);
+
+  return fetch(`${AUDIT_API_BASE}${normalizedPath}`, {
+    ...init,
+    headers
+  });
+}

package/app/services/audit/audit-worker-client.ts

@@ -1,8 +1,5 @@
-import paths from '~/config/config.json';
 import { type ValidationAuditEntry } from '~/types';
-import { getDataApiKey } from '~/utils/auth';
-
-const AUDIT_WORKER_URL = paths.audit_worker_url;
+import { fetchAuditApi } from './audit-api-client';
 
 interface FetchAuditEntriesParams {
   userId: string;
@@ -35,22 +32,23 @@ export type PersistAuditEntryResult =
 export async function fetchAuditEntriesForUser(
   params: FetchAuditEntriesParams
 ): Promise<ValidationAuditEntry[] | null> {
-  const apiKey = await getDataApiKey();
-  const url = new URL(`${AUDIT_WORKER_URL}/audit/`);
-  url.searchParams.set('userId', params.userId);
+  const searchParams = new URLSearchParams();
+  searchParams.set('userId', params.userId);
 
   if (params.startDate) {
-    url.searchParams.set('startDate', params.startDate);
+    searchParams.set('startDate', params.startDate);
   }
 
   if (params.endDate) {
-    url.searchParams.set('endDate', params.endDate);
+    searchParams.set('endDate', params.endDate);
   }
 
-  const response = await fetch(url.toString(), {
+  const requestPath = `/audit/?${searchParams.toString()}`;
+
+  const response = await fetchAuditApi(requestPath, {
     method: 'GET',
     headers: {
-      'X-Custom-Auth-Key': apiKey
+      'Accept': 'application/json'
     }
   });
 
@@ -65,15 +63,14 @@ export async function fetchAuditEntriesForUser(
 export async function persistAuditEntryForUser(
   entry: ValidationAuditEntry
 ): Promise<PersistAuditEntryResult> {
-  const apiKey = await getDataApiKey();
-  const url = new URL(`${AUDIT_WORKER_URL}/audit/`);
-  url.searchParams.set('userId', entry.userId);
+  const searchParams = new URLSearchParams();
+  searchParams.set('userId', entry.userId);
+  const requestPath = `/audit/?${searchParams.toString()}`;
 
-  const response = await fetch(url.toString(), {
+  const response = await fetchAuditApi(requestPath, {
     method: 'POST',
     headers: {
-      'Content-Type': 'application/json',
-      'X-Custom-Auth-Key': apiKey
+      'Content-Type': 'application/json'
     },
     body: JSON.stringify(entry)
   });

package/app/styles/root.module.css

@@ -1,47 +1,4 @@
 @layer layout {
-
-  .container {
-    width: 100%;
-    position: relative;
-    transition: opacity 0.8s var(--bezierFastoutSlowin);    
-
-    &[data-loading='true'] {
-      opacity: 0;
-    }
-  }
-
-  .skip {
-    isolation: isolate;
-    color: var(--background);
-    z-index: var(--zIndex4);
-
-    &:focus {
-      padding: var(--spaceS) var(--spaceM);
-      position: fixed;
-      top: var(--spaceM);
-      left: var(--spaceM);
-      text-decoration: none;
-      font-weight: var(--fontWeightMedium);
-      line-height: 1;
-      box-shadow: 0 0 0 4px var(--background), 0 0 0 8px var(--text);
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: var(--primary);
-      clip-path: polygon(
-        0 0,
-        100% 0,
-        100% calc(100% - 8px),
-        calc(100% - 8px) 100%,
-        0 100%
-      );
-      z-index: -1;
-    }
-  }
-
   .errorContainer {
     display: flex;
     flex-direction: column;
@@ -69,68 +26,24 @@
   }
 
   .errorLink {
-    color: var(--primary);
-    text-decoration: none;
-    font-size: var(--fontSizeBodyL);
-    font-weight: var(--fontWeightMedium);
-    padding: var(--spaceM) var(--spaceL);
-    border-radius: var(--radiusS);
-    transition: all var(--durationS) var(--bezierFastoutSlowin);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    transition:
+      background-color var(--durationS) var(--bezierFastoutSlowin),
+      border-color var(--durationS) var(--bezierFastoutSlowin),
+      color var(--durationS) var(--bezierFastoutSlowin);
   }
 
   .errorLink:hover {
-    background: color-mix(in lab, var(--primary) 10%, transparent);
-    color: color-mix(in lab, var(--primary) 85%, var(--black));
-  }
-
-  .returnToTop {
-    position: fixed;
-    right: var(--space2XL);
-    bottom: var(--spaceM);
-    width: 50px;
-    height: 50px;
-    border: none;
-    background: transparent;
-    color: color-mix(in lab, var(--white) 60%, var(--textLight));
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--zIndex4);
-    cursor: pointer;
-    transition: all var(--durationS) var(--bezierFastoutSlowin);
-  }
-
-  .returnToTop:hover {
-    color: var(--primary);
-  }
-
-  .returnToTopIcon {
-    transform: rotate(-90deg);
-    color: color-mix(in lab, var(--white) 60%, var(--textLight));
-    filter: drop-shadow(0 0 1px color-mix(in lab, var(--black) 45%, transparent))
-      drop-shadow(0 0 1px color-mix(in lab, var(--white) 45%, transparent));
-    transition: color var(--durationS) var(--bezierFastoutSlowin);
-  }
-
-  .returnToTop:hover .returnToTopIcon {
-    color: var(--primary);
-  }
-
-  /* Global enhanced button hover effects */
-  :global(button:not([data-no-enhance]):hover:not(:disabled)) {
-    transform: translateY(-1px);
-    transition: all var(--durationS) var(--bezierFastoutSlowin);
-  }
-
-  :global(button[class*="Button"]:hover:not(:disabled)) {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 6px color-mix(in lab, currentColor 20%, transparent);
-    transition: all var(--durationS) var(--bezierFastoutSlowin);
+    background-color: color-mix(in lab, var(--primary) 82%, var(--black));
+    border-color: color-mix(in lab, var(--primary) 58%, var(--black));
+    color: var(--white);
+    text-decoration: none;
   }
 
-  /* Ensure disabled buttons don't get transforms */
-  :global(button:disabled) {
-    transform: none !important;
+  .errorLink:focus-visible {
+    outline: 3px solid color-mix(in lab, var(--white) 65%, var(--primary));
+    outline-offset: 3px;
   }
 
   @media (max-width: 768px) {
@@ -142,5 +55,4 @@
       font-size: var(--fontSizeBodyL);
     }
   }
-
 }

package/app/tailwind.css

@@ -39,6 +39,10 @@
     touch-action: manipulation;
   }
 
+  :where(button:hover:not(:disabled)) {
+    transform: translateY(-1px);
+  }
+
   :where(svg, img, picture, video, iframe, canvas) {
     display: block;
   }
@@ -73,10 +77,13 @@
     font-family: var(--fontStack);
     font-weight: var(--fontWeightRegular);
     color: var(--textBody);
-    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.95)),
+    background:
+      linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.95)),
       url("/assets/striae.jpg") center/cover no-repeat fixed;
     background-blend-mode: normal;
-    transition: background var(--durationM) ease, opacity var(--durationM) ease;
+    transition:
+      background var(--durationM) ease,
+      opacity var(--durationM) ease;
     opacity: 1;
   }
 

package/app/utils/SHA256.ts

@@ -120,7 +120,8 @@ export function createManifestSigningPayload(
  * Verify manifest signature using configured public key(s).
  */
 export async function verifyForensicManifestSignature(
-  manifest: Partial<SignedForensicManifest>
+  manifest: Partial<SignedForensicManifest>,
+  verificationPublicKeyPem?: string
 ): Promise<ManifestSignatureVerificationResult> {
   if (!manifest.signature) {
     return {
@@ -158,6 +159,9 @@ export async function verifyForensicManifestSignature(
       noVerificationKeyPrefix: 'No verification key configured for key ID',
       invalidPublicKeyError: 'Manifest signature verification failed: invalid public key',
       verificationFailedError: 'Manifest signature verification failed'
+    },
+    {
+      verificationPublicKeyPem
     }
   );
 }

package/app/utils/auth.ts

@@ -1,38 +1,11 @@
 import paths from '~/config/config.json';
 
-const KEYS_URL = paths.keys_url;
-const KEYS_AUTH = paths.keys_auth;
-
-type KeyType = 'USER_DB_AUTH' | 'R2_KEY_SECRET' | 'IMAGES_API_TOKEN' | 'ACCOUNT_HASH' | 'PDF_WORKER_AUTH';
-
-async function getApiKey(keyType: KeyType): Promise<string> {
-  const keyResponse = await fetch(`${KEYS_URL}/${keyType}`, {
-    headers: {
-      'X-Custom-Auth-Key': KEYS_AUTH
-    }
-  });
-  if (!keyResponse.ok) {
-    throw new Error(`Failed to retrieve ${keyType}`);
-  }
-  return keyResponse.text();
-}
-
-export async function getUserApiKey(): Promise<string> {
-  return getApiKey('USER_DB_AUTH');
-}
-
-export async function getDataApiKey(): Promise<string> {
-  return getApiKey('R2_KEY_SECRET');
-}
-
-export async function getImageApiKey(): Promise<string> {
-  return getApiKey('IMAGES_API_TOKEN');
-}
+const ACCOUNT_HASH = typeof paths.account_hash === 'string' ? paths.account_hash.trim() : '';
 
 export async function getAccountHash(): Promise<string> {
-  return getApiKey('ACCOUNT_HASH');
-}
+  if (!ACCOUNT_HASH) {
+    throw new Error('ACCOUNT_HASH is not configured in app/config/config.json');
+  }
 
-export async function getPdfApiKey(): Promise<string> {
-  return getApiKey('PDF_WORKER_AUTH');
+  return ACCOUNT_HASH;
 }

package/app/utils/confirmation-signature.ts

@@ -148,7 +148,8 @@ export function createConfirmationSigningPayload(
 }
 
 export async function verifyConfirmationSignature(
-  confirmationData: Partial<ConfirmationImportData>
+  confirmationData: Partial<ConfirmationImportData>,
+  verificationPublicKeyPem?: string
 ): Promise<ManifestSignatureVerificationResult> {
   const signature = confirmationData.metadata?.signature as ForensicManifestSignature | undefined;
   const signatureVersion = confirmationData.metadata?.signatureVersion;
@@ -188,6 +189,9 @@ export async function verifyConfirmationSignature(
       noVerificationKeyPrefix: 'No verification key configured for key ID',
       invalidPublicKeyError: 'Confirmation signature verification failed: invalid public key',
       verificationFailedError: 'Confirmation signature verification failed'
+    },
+    {
+      verificationPublicKeyPem
     }
   );
 }

package/app/utils/data-api-client.ts

@@ -0,0 +1,43 @@
+import type { User } from 'firebase/auth';
+
+const DATA_API_BASE = '/api/data';
+
+function normalizePath(path: string): string {
+  if (!path) {
+    return '/';
+  }
+
+  return path.startsWith('/') ? path : `/${path}`;
+}
+
+export async function fetchDataApi(
+  user: User,
+  path: string,
+  init: RequestInit = {}
+): Promise<Response> {
+  const normalizedPath = normalizePath(path);
+  const userWithOptionalToken = user as User & { getIdToken?: () => Promise<string> };
+
+  if (typeof userWithOptionalToken.getIdToken !== 'function') {
+    throw new Error('Unable to authenticate request: missing Firebase token provider');
+  }
+
+  let idToken: string;
+  try {
+    idToken = await userWithOptionalToken.getIdToken();
+  } catch {
+    throw new Error('Unable to authenticate request: failed to retrieve Firebase token');
+  }
+
+  if (!idToken) {
+    throw new Error('Unable to authenticate request: empty Firebase token');
+  }
+
+  const headers = new Headers(init.headers);
+  headers.set('Authorization', `Bearer ${idToken}`);
+
+  return fetch(`${DATA_API_BASE}${normalizedPath}`, {
+    ...init,
+    headers
+  });
+}