regirstation works but shared links broken

public/src/App.tsx

@@ -1,13 +1,17 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { Login } from './components/auth/Login';
+import { Register } from './components/auth/Register';
 import { ProtectedRoute } from './components/auth/ProtectedRoute';
 import { Dashboard } from './pages/Dashboard';
+import { SharedMap } from './pages/SharedMap';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/login" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/shared/:token" element={<SharedMap />} />
         <Route
           path="/"
           element={

public/src/components/auth/Login.tsx

@@ -1,5 +1,5 @@
 import { useState, FormEvent } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { useAuthStore } from '../../stores/authStore';
 
 export function Login() {
@@ -71,6 +71,13 @@ export function Login() {
           >
             {isLoading ? 'Logging in...' : 'Login'}
           </button>
+
+          <div className="text-center mt-4">
+            <span className="text-gray-600">Don't have an account? </span>
+            <Link to="/register" className="text-blue-600 hover:text-blue-700 font-medium">
+              Register
+            </Link>
+          </div>
         </form>
       </div>
     </div>

public/src/components/auth/Register.tsx

@@ -0,0 +1,133 @@
+import { useState, FormEvent } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuthStore } from '../../stores/authStore';
+
+export function Register() {
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const { register, isLoading, error, clearError } = useAuthStore();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    clearError();
+
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 6) {
+      alert('Password must be at least 6 characters');
+      return;
+    }
+
+    try {
+      await register(username, email, password);
+      navigate('/');
+    } catch (err) {
+      // Error is handled by the store
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+        <h1 className="text-2xl font-bold mb-2 text-center text-gray-800">
+          Create Account
+        </h1>
+        <p className="text-center text-gray-600 mb-6">
+          Join ISP Wiremap
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+              Username
+            </label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              minLength={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={6}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <div>
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+              Confirm Password
+            </label>
+            <input
+              id="confirmPassword"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              minLength={6}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              disabled={isLoading}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isLoading ? 'Creating account...' : 'Register'}
+          </button>
+
+          <div className="text-center mt-4">
+            <span className="text-gray-600">Already have an account? </span>
+            <Link to="/login" className="text-blue-600 hover:text-blue-700 font-medium">
+              Login
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

public/src/components/map/MapView.tsx

@@ -5,6 +5,8 @@ import { Toolbar } from './Toolbar';
 import { LayerSwitcher } from './LayerSwitcher';
 import { DrawingHandler } from './DrawingHandler';
 import { MapItemsLayer } from './MapItemsLayer';
+import { ShareDialog } from './ShareDialog';
+import { useMapWebSocket } from '../../hooks/useMapWebSocket';
 
 interface MapViewProps {
   mapId: string | null;
@@ -50,12 +52,33 @@ function MapController() {
 export function MapView({ mapId }: MapViewProps) {
   const [activeLayer, setActiveLayer] = useState<MapLayer>('osm');
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [showShareDialog, setShowShareDialog] = useState(false);
 
   const handleItemCreated = () => {
     // Trigger refresh of map items
     setRefreshTrigger((prev) => prev + 1);
   };
 
+  // WebSocket connection for real-time updates
+  const { isConnected, permission } = useMapWebSocket({
+    mapId: mapId || '',
+    onItemCreated: (item) => {
+      console.log('Real-time item created:', item);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onItemUpdated: (item) => {
+      console.log('Real-time item updated:', item);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onItemDeleted: (itemId) => {
+      console.log('Real-time item deleted:', itemId);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onConnected: (data) => {
+      console.log('WebSocket connected to map:', data);
+    },
+  });
+
   if (!mapId) {
     return (
       <div className="flex-1 flex items-center justify-center bg-gray-100">
@@ -73,7 +96,7 @@ export function MapView({ mapId }: MapViewProps) {
     <>
       {/* Toolbar for drawing tools */}
       <div style={{ position: 'fixed', left: '220px', top: '70px', zIndex: 9999 }}>
-        <Toolbar mapId={mapId} />
+        <Toolbar mapId={mapId} onShare={() => setShowShareDialog(true)} />
       </div>
 
       {/* Layer switcher */}
@@ -108,6 +131,14 @@ export function MapView({ mapId }: MapViewProps) {
           <MapItemsLayer mapId={mapId} refreshTrigger={refreshTrigger} />
         </MapContainer>
       </div>
+
+      {/* Share dialog */}
+      {showShareDialog && (
+        <ShareDialog
+          mapId={mapId}
+          onClose={() => setShowShareDialog(false)}
+        />
+      )}
     </>
   );
 }

public/src/components/map/ShareDialog.tsx

@@ -0,0 +1,286 @@
+import { useState, useEffect } from 'react';
+import { mapShareService, type MapShare, type MapShareLink } from '../../services/mapShareService';
+
+interface ShareDialogProps {
+  mapId: string;
+  onClose: () => void;
+}
+
+export function ShareDialog({ mapId, onClose }: ShareDialogProps) {
+  const [activeTab, setActiveTab] = useState<'users' | 'links'>('users');
+  const [userShares, setUserShares] = useState<MapShare[]>([]);
+  const [shareLinks, setShareLinks] = useState<MapShareLink[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // User share form
+  const [newUserId, setNewUserId] = useState('');
+  const [newUserPermission, setNewUserPermission] = useState<'read' | 'edit'>('read');
+
+  // Link form
+  const [newLinkPermission, setNewLinkPermission] = useState<'read' | 'edit'>('read');
+
+  useEffect(() => {
+    loadShares();
+    loadLinks();
+  }, [mapId]);
+
+  const loadShares = async () => {
+    try {
+      const shares = await mapShareService.getUserShares(mapId);
+      setUserShares(shares);
+    } catch (error) {
+      console.error('Failed to load shares:', error);
+    }
+  };
+
+  const loadLinks = async () => {
+    try {
+      const links = await mapShareService.getShareLinks(mapId);
+      setShareLinks(links);
+    } catch (error) {
+      console.error('Failed to load share links:', error);
+    }
+  };
+
+  const handleShareWithUser = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newUserId.trim()) return;
+
+    setLoading(true);
+    try {
+      await mapShareService.shareWithUser(mapId, {
+        user_id: newUserId,
+        permission: newUserPermission,
+      });
+      setNewUserId('');
+      await loadShares();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to share map');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateLink = async () => {
+    setLoading(true);
+    try {
+      await mapShareService.createShareLink(mapId, {
+        permission: newLinkPermission,
+      });
+      await loadLinks();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to create share link');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRevokeShare = async (shareId: string) => {
+    if (!confirm('Are you sure you want to revoke this share?')) return;
+
+    try {
+      await mapShareService.revokeShare(mapId, shareId);
+      await loadShares();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to revoke share');
+    }
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!confirm('Are you sure you want to delete this share link?')) return;
+
+    try {
+      await mapShareService.deleteShareLink(mapId, linkId);
+      await loadLinks();
+    } catch (error: any) {
+      alert(error.response?.data?.detail || 'Failed to delete link');
+    }
+  };
+
+  const copyLinkToClipboard = (token: string) => {
+    const url = `${window.location.origin}/shared/${token}`;
+    navigator.clipboard.writeText(url);
+    alert('Link copied to clipboard!');
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style={{ zIndex: 10001 }}>
+      <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+          <h2 className="text-xl font-bold text-gray-800">Share Map</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 text-2xl"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-gray-200">
+          <button
+            onClick={() => setActiveTab('users')}
+            className={`flex-1 px-6 py-3 font-medium ${
+              activeTab === 'users'
+                ? 'border-b-2 border-blue-600 text-blue-600'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
+          >
+            Share with Users
+          </button>
+          <button
+            onClick={() => setActiveTab('links')}
+            className={`flex-1 px-6 py-3 font-medium ${
+              activeTab === 'links'
+                ? 'border-b-2 border-blue-600 text-blue-600'
+                : 'text-gray-600 hover:text-gray-800'
+            }`}
+          >
+            Public Links
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto" style={{ maxHeight: 'calc(80vh - 200px)' }}>
+          {activeTab === 'users' && (
+            <div>
+              {/* Add user form */}
+              <form onSubmit={handleShareWithUser} className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Share with User (by User ID)
+                </label>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={newUserId}
+                    onChange={(e) => setNewUserId(e.target.value)}
+                    placeholder="Enter user ID"
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+                    disabled={loading}
+                  />
+                  <select
+                    value={newUserPermission}
+                    onChange={(e) => setNewUserPermission(e.target.value as 'read' | 'edit')}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                    disabled={loading}
+                  >
+                    <option value="read">Read-only</option>
+                    <option value="edit">Can Edit</option>
+                  </select>
+                  <button
+                    type="submit"
+                    disabled={loading || !newUserId.trim()}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+                  >
+                    Share
+                  </button>
+                </div>
+              </form>
+
+              {/* Existing shares */}
+              <div>
+                <h3 className="font-medium text-gray-700 mb-3">Current Shares</h3>
+                {userShares.length === 0 ? (
+                  <p className="text-gray-500 text-sm">No users have access to this map yet.</p>
+                ) : (
+                  <div className="space-y-2">
+                    {userShares.map((share) => (
+                      <div
+                        key={share.id}
+                        className="flex items-center justify-between p-3 border border-gray-200 rounded-md"
+                      >
+                        <div>
+                          <div className="font-medium text-sm">{share.user_id}</div>
+                          <div className="text-xs text-gray-500">
+                            {share.permission === 'read' ? 'Read-only' : 'Can edit'}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => handleRevokeShare(share.id)}
+                          className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded"
+                        >
+                          Revoke
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'links' && (
+            <div>
+              {/* Create link form */}
+              <div className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Create Public Share Link
+                </label>
+                <div className="flex gap-2">
+                  <select
+                    value={newLinkPermission}
+                    onChange={(e) => setNewLinkPermission(e.target.value as 'read' | 'edit')}
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+                    disabled={loading}
+                  >
+                    <option value="read">Read-only</option>
+                    <option value="edit">Can Edit</option>
+                  </select>
+                  <button
+                    onClick={handleCreateLink}
+                    disabled={loading}
+                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+                  >
+                    Create Link
+                  </button>
+                </div>
+              </div>
+
+              {/* Existing links */}
+              <div>
+                <h3 className="font-medium text-gray-700 mb-3">Active Share Links</h3>
+                {shareLinks.length === 0 ? (
+                  <p className="text-gray-500 text-sm">No public share links created yet.</p>
+                ) : (
+                  <div className="space-y-3">
+                    {shareLinks.map((link) => (
+                      <div
+                        key={link.id}
+                        className="p-3 border border-gray-200 rounded-md"
+                      >
+                        <div className="flex items-start justify-between mb-2">
+                          <div className="flex-1">
+                            <div className="text-xs text-gray-500 mb-1">
+                              {link.permission === 'read' ? 'Read-only' : 'Can edit'} •
+                              Created {new Date(link.created_at).toLocaleDateString()}
+                            </div>
+                            <div className="font-mono text-xs bg-gray-100 p-2 rounded break-all">
+                              {window.location.origin}/shared/{link.token}
+                            </div>
+                          </div>
+                          <button
+                            onClick={() => handleDeleteLink(link.id)}
+                            className="ml-2 text-red-600 hover:bg-red-50 p-1 rounded text-sm"
+                          >
+                            Delete
+                          </button>
+                        </div>
+                        <button
+                          onClick={() => copyLinkToClipboard(link.token)}
+                          className="text-sm text-blue-600 hover:text-blue-700"
+                        >
+                          Copy Link
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

public/src/components/map/Toolbar.tsx

@@ -4,6 +4,7 @@ import { CABLE_COLORS, CABLE_LABELS } from '../../types/mapItem';
 
 interface ToolbarProps {
   mapId: string;
+  onShare: () => void;
 }
 
 interface ToolButton {
@@ -69,11 +70,23 @@ const TOOLS: ToolButton[] = [
   },
 ];
 
-export function Toolbar({ mapId }: ToolbarProps) {
+export function Toolbar({ mapId, onShare }: ToolbarProps) {
   const { activeTool, setActiveTool } = useDrawingStore();
 
   return (
     <div className="bg-white shadow-lg rounded-lg p-2 space-y-1" style={{ minWidth: '150px' }}>
+      {/* Share button */}
+      <button
+        onClick={onShare}
+        className="w-full px-3 py-2 rounded text-left flex items-center gap-2 transition-colors bg-green-100 text-green-700 hover:bg-green-200 font-medium mb-2"
+        title="Share this map"
+      >
+        <span className="text-lg">🔗</span>
+        <span className="text-sm">Share</span>
+      </button>
+
+      <div className="border-t border-gray-200 my-2"></div>
+
       {TOOLS.map((tool) => (
         <button
           key={tool.id}

public/src/hooks/useMapWebSocket.ts

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react';
+import { authService } from '../services/authService';
+
+interface WebSocketMessage {
+  type: 'connected' | 'item_created' | 'item_updated' | 'item_deleted';
+  data: any;
+}
+
+interface UseMapWebSocketOptions {
+  mapId: string;
+  shareToken?: string;
+  onItemCreated?: (item: any) => void;
+  onItemUpdated?: (item: any) => void;
+  onItemDeleted?: (itemId: string) => void;
+  onConnected?: (data: any) => void;
+}
+
+export function useMapWebSocket({
+  mapId,
+  shareToken,
+  onItemCreated,
+  onItemUpdated,
+  onItemDeleted,
+  onConnected,
+}: UseMapWebSocketOptions) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [permission, setPermission] = useState<'read' | 'edit' | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const reconnectAttemptsRef = useRef(0);
+
+  useEffect(() => {
+    const connect = () => {
+      // Get the token for authenticated users
+      const token = authService.getAccessToken();
+
+      // Build WebSocket URL
+      const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsHost = import.meta.env.VITE_API_URL?.replace(/^https?:\/\//, '') || window.location.host;
+      let wsUrl = `${wsProtocol}//${wsHost}/ws/maps/${mapId}`;
+
+      // Add authentication
+      const params = new URLSearchParams();
+      if (token) {
+        params.append('token', token);
+      }
+      if (shareToken) {
+        params.append('share_token', shareToken);
+      }
+
+      if (params.toString()) {
+        wsUrl += `?${params.toString()}`;
+      }
+
+      console.log('Connecting to WebSocket:', wsUrl);
+
+      try {
+        const ws = new WebSocket(wsUrl);
+        wsRef.current = ws;
+
+        ws.onopen = () => {
+          console.log('WebSocket connected');
+          setIsConnected(true);
+          reconnectAttemptsRef.current = 0;
+        };
+
+        ws.onmessage = (event) => {
+          try {
+            const message: WebSocketMessage = JSON.parse(event.data);
+            console.log('WebSocket message received:', message);
+
+            switch (message.type) {
+              case 'connected':
+                setPermission(message.data.permission);
+                onConnected?.(message.data);
+                break;
+
+              case 'item_created':
+                onItemCreated?.(message.data);
+                break;
+
+              case 'item_updated':
+                onItemUpdated?.(message.data);
+                break;
+
+              case 'item_deleted':
+                onItemDeleted?.(message.data.id);
+                break;
+
+              default:
+                console.log('Unknown message type:', message.type);
+            }
+          } catch (error) {
+            console.error('Error parsing WebSocket message:', error);
+          }
+        };
+
+        ws.onerror = (error) => {
+          console.error('WebSocket error:', error);
+        };
+
+        ws.onclose = () => {
+          console.log('WebSocket disconnected');
+          setIsConnected(false);
+          wsRef.current = null;
+
+          // Attempt to reconnect with exponential backoff
+          if (reconnectAttemptsRef.current < 5) {
+            const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000);
+            console.log(`Reconnecting in ${delay}ms...`);
+
+            reconnectTimeoutRef.current = setTimeout(() => {
+              reconnectAttemptsRef.current++;
+              connect();
+            }, delay);
+          }
+        };
+      } catch (error) {
+        console.error('Error creating WebSocket:', error);
+      }
+    };
+
+    connect();
+
+    // Cleanup on unmount
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [mapId, shareToken, onItemCreated, onItemUpdated, onItemDeleted, onConnected]);
+
+  return {
+    isConnected,
+    permission,
+  };
+}

public/src/pages/SharedMap.tsx

@@ -0,0 +1,200 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { MapContainer, TileLayer, useMap } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { LayerSwitcher } from '../components/map/LayerSwitcher';
+import { DrawingHandler } from '../components/map/DrawingHandler';
+import { MapItemsLayer } from '../components/map/MapItemsLayer';
+import { Toolbar } from '../components/map/Toolbar';
+import { useMapWebSocket } from '../hooks/useMapWebSocket';
+import { apiClient } from '../services/api';
+
+type MapLayer = 'osm' | 'google' | 'esri';
+
+const MAP_LAYERS = {
+  osm: {
+    name: 'OpenStreetMap',
+    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    maxZoom: 25,
+  },
+  google: {
+    name: 'Google Satellite',
+    url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+    attribution: '&copy; Google',
+    maxZoom: 25,
+    maxNativeZoom: 22,
+  },
+  esri: {
+    name: 'ESRI Satellite',
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    attribution: 'Tiles &copy; Esri',
+    maxZoom: 25,
+  },
+};
+
+function MapController() {
+  const map = useMap();
+
+  useEffect(() => {
+    setTimeout(() => {
+      map.invalidateSize();
+    }, 100);
+  }, [map]);
+
+  return null;
+}
+
+export function SharedMap() {
+  const { token } = useParams<{ token: string }>();
+  const [activeLayer, setActiveLayer] = useState<MapLayer>('osm');
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [mapData, setMapData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load map data using share token
+  useEffect(() => {
+    const loadMap = async () => {
+      if (!token) return;
+
+      try {
+        // Make an unauthenticated request with share token
+        const response = await apiClient.get(`/api/maps/shared/${token}`);
+        setMapData(response.data);
+        setLoading(false);
+      } catch (err: any) {
+        setError(err.response?.data?.detail || 'Failed to load shared map');
+        setLoading(false);
+      }
+    };
+
+    loadMap();
+  }, [token]);
+
+  const handleItemCreated = () => {
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  // WebSocket connection with share token
+  const { isConnected, permission } = useMapWebSocket({
+    mapId: mapData?.id || '',
+    shareToken: token,
+    onItemCreated: (item) => {
+      console.log('Real-time item created:', item);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onItemUpdated: (item) => {
+      console.log('Real-time item updated:', item);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onItemDeleted: (itemId) => {
+      console.log('Real-time item deleted:', itemId);
+      setRefreshTrigger((prev) => prev + 1);
+    },
+    onConnected: (data) => {
+      console.log('WebSocket connected to shared map:', data);
+    },
+  });
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-100">
+        <div className="text-center">
+          <div className="text-gray-500 text-lg">Loading shared map...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-100">
+        <div className="text-center">
+          <div className="text-red-600 text-lg mb-2">Error</div>
+          <div className="text-gray-600">{error}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!mapData) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-100">
+        <div className="text-center">
+          <div className="text-gray-500 text-lg">Map not found</div>
+        </div>
+      </div>
+    );
+  }
+
+  const layer = MAP_LAYERS[activeLayer];
+  const isReadOnly = permission === 'read';
+
+  return (
+    <div className="flex flex-col h-screen">
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-xl font-bold text-gray-800">{mapData.name}</h1>
+            <p className="text-sm text-gray-500">
+              {isReadOnly ? 'View-only access' : 'Edit access'} • Shared map
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {isConnected && (
+              <div className="flex items-center gap-2 text-sm text-green-600">
+                <div className="w-2 h-2 bg-green-600 rounded-full"></div>
+                Live
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Map */}
+      <div className="flex-1 relative">
+        {/* Toolbar */}
+        {!isReadOnly && (
+          <div style={{ position: 'fixed', left: '20px', top: '90px', zIndex: 9999 }}>
+            <Toolbar mapId={mapData.id} onShare={() => {}} />
+          </div>
+        )}
+
+        {/* Layer switcher */}
+        <div style={{ position: 'fixed', right: '20px', top: '90px', zIndex: 9999 }}>
+          <LayerSwitcher
+            activeLayer={activeLayer}
+            onLayerChange={setActiveLayer}
+            layers={MAP_LAYERS}
+          />
+        </div>
+
+        <MapContainer
+          center={[0, 0]}
+          zoom={2}
+          className="h-full w-full"
+          style={{ background: '#f0f0f0' }}
+        >
+          <MapController />
+          <TileLayer
+            key={activeLayer}
+            url={layer.url}
+            attribution={layer.attribution}
+            maxZoom={layer.maxZoom}
+            maxNativeZoom={layer.maxNativeZoom}
+          />
+
+          {/* Drawing handler for edit access */}
+          {!isReadOnly && (
+            <DrawingHandler mapId={mapData.id} onItemCreated={handleItemCreated} />
+          )}
+
+          {/* Render existing map items */}
+          <MapItemsLayer mapId={mapData.id} refreshTrigger={refreshTrigger} />
+        </MapContainer>
+      </div>
+    </div>
+  );
+}

public/src/services/authService.ts

@@ -1,7 +1,12 @@
 import { apiClient } from './api';
-import type { LoginRequest, TokenResponse, User } from '../types/auth';
+import type { LoginRequest, RegisterRequest, TokenResponse, User, UserWithToken } from '../types/auth';
 
 export const authService = {
+  async register(data: RegisterRequest): Promise<UserWithToken> {
+    const response = await apiClient.post<UserWithToken>('/api/auth/register', data);
+    return response.data;
+  },
+
   async login(credentials: LoginRequest): Promise<TokenResponse> {
     const response = await apiClient.post<TokenResponse>('/api/auth/login', credentials);
     return response.data;

public/src/services/mapShareService.ts

@@ -0,0 +1,75 @@
+import { apiClient } from './api';
+
+export interface MapShare {
+  id: string;
+  map_id: string;
+  user_id: string;
+  permission: 'read' | 'edit';
+  shared_by: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface MapShareLink {
+  id: string;
+  map_id: string;
+  token: string;
+  permission: 'read' | 'edit';
+  is_active: boolean;
+  created_by: string | null;
+  expires_at: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateMapShare {
+  user_id: string;
+  permission: 'read' | 'edit';
+}
+
+export interface CreateShareLink {
+  permission: 'read' | 'edit';
+  expires_at?: string;
+}
+
+export const mapShareService = {
+  // Share with specific user
+  async shareWithUser(mapId: string, data: CreateMapShare): Promise<MapShare> {
+    const response = await apiClient.post<MapShare>(`/api/maps/${mapId}/share/users`, data);
+    return response.data;
+  },
+
+  // Get all user shares for a map
+  async getUserShares(mapId: string): Promise<MapShare[]> {
+    const response = await apiClient.get<MapShare[]>(`/api/maps/${mapId}/share/users`);
+    return response.data;
+  },
+
+  // Update share permission
+  async updateShare(mapId: string, shareId: string, permission: 'read' | 'edit'): Promise<MapShare> {
+    const response = await apiClient.put<MapShare>(`/api/maps/${mapId}/share/users/${shareId}`, { permission });
+    return response.data;
+  },
+
+  // Revoke user share
+  async revokeShare(mapId: string, shareId: string): Promise<void> {
+    await apiClient.delete(`/api/maps/${mapId}/share/users/${shareId}`);
+  },
+
+  // Create public share link
+  async createShareLink(mapId: string, data: CreateShareLink): Promise<MapShareLink> {
+    const response = await apiClient.post<MapShareLink>(`/api/maps/${mapId}/share/links`, data);
+    return response.data;
+  },
+
+  // Get all share links for a map
+  async getShareLinks(mapId: string): Promise<MapShareLink[]> {
+    const response = await apiClient.get<MapShareLink[]>(`/api/maps/${mapId}/share/links`);
+    return response.data;
+  },
+
+  // Delete share link
+  async deleteShareLink(mapId: string, linkId: string): Promise<void> {
+    await apiClient.delete(`/api/maps/${mapId}/share/links/${linkId}`);
+  },
+};

public/src/stores/authStore.ts

@@ -8,6 +8,7 @@ interface AuthState {
   isLoading: boolean;
   error: string | null;
 
+  register: (username: string, email: string, password: string) => Promise<void>;
   login: (username: string, password: string) => Promise<void>;
   logout: () => void;
   loadUser: () => Promise<void>;
@@ -20,6 +21,33 @@ export const useAuthStore = create<AuthState>((set) => ({
   isLoading: false,
   error: null,
 
+  register: async (username, email, password) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await authService.register({ username, email, password });
+      authService.saveTokens({
+        access_token: response.access_token,
+        refresh_token: response.refresh_token,
+        token_type: response.token_type
+      });
+
+      const user: User = {
+        id: response.id,
+        username: response.username,
+        email: response.email,
+        is_admin: response.is_admin,
+        created_at: response.created_at,
+        updated_at: response.updated_at
+      };
+
+      set({ user, isAuthenticated: true, isLoading: false });
+    } catch (error: any) {
+      const message = error.response?.data?.detail || 'Registration failed';
+      set({ error: message, isLoading: false, isAuthenticated: false });
+      throw error;
+    }
+  },
+
   login: async (username, password) => {
     set({ isLoading: true, error: null });
     try {

public/src/types/auth.ts

@@ -12,6 +12,12 @@ export interface LoginRequest {
   password: string;
 }
 
+export interface RegisterRequest {
+  username: string;
+  email: string;
+  password: string;
+}
+
 export interface TokenResponse {
   access_token: string;
   refresh_token: string;