System Architecture

App (QueryClientProvider, AuthProvider)
├── BrowserRouter
│   ├── Auth Pages (Login, Callback)
│   ├── MainLayout
│   │   ├── AppSidebar (Navigation)
│   │   ├── Dashboard
│   │   ├── MyApplications
│   │   ├── MyDevices
│   │   ├── Sessions
│   │   └── Admin Routes
│   │       ├── Users
│   │       ├── Groups
│   │       ├── Resources
│   │       └── Settings
│   └── Special Routes (Enrollment, NotFound)

const AuthContext = createContext<AuthContextType>({
  user: null,              // Supabase user object
  session: null,           // Active session with JWT
  profile: null,           // User profile with organization
  roles: [],               // Local role assignments
  zitadelIdentity: null,   // Zitadel groups and user ID
  loading: false,
  signOut: async () => {},
  hasRole: (role) => false,
  hasZitadelGroup: (group) => false,
});

-- Example: Users can only see resources in their organization
CREATE POLICY "Users see own org resources"
  ON resources FOR SELECT
  USING (
    organization_id IN (
      SELECT organization_id FROM profiles
      WHERE id = auth.uid()
    )
  );

// Token exchange action
case 'sso-callback':
  // 1. Exchange authorization code for tokens
  const tokenResponse = await fetch(tokenEndpoint, {
    method: 'POST',
    body: new URLSearchParams({
      grant_type: 'authorization_code',
      code: authCode,
      code_verifier: codeVerifier,
      client_id: clientId,
      redirect_uri: redirectUri,
    }),
  });

  // 2. Fetch user information
  const userinfoResponse = await fetch(userinfoEndpoint, {
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  // 3. Get user's Zitadel groups
  const groups = userInfo['urn:zitadel:iam:user:resourceowner:grants'] || [];

  // 4. Create/update user in Supabase
  const { data: authUser, error } = await supabase.auth.admin.createUser({
    email: userInfo.email,
    email_confirm: true,
    user_metadata: { full_name: userInfo.name },
  });

  // 5. Link Zitadel identity
  await supabase.from('user_zitadel_identities').upsert({
    user_id: authUser.id,
    zitadel_user_id: userInfo.sub,
    zitadel_groups: groups,
  });

  // 6. Sync groups to local groups (if enabled)
  if (config.sync_groups) {
    await syncZitadelGroups(authUser.id, groups);
  }

Internet
    │
    ├─── Netbird Management Server (manager.kappa4.com)
    │    └─── Coordination, ACLs, Device Registry
    │
    └─── Mesh Network (100.64.0.0/10)
         ├─── Portal Server (100.64.0.10)
         ├─── User Device 1 (100.64.0.25)
         ├─── User Device 2 (100.64.0.26)
         └─── Resource Server (100.64.0.50)

async function syncZitadelGroups(userId: string, zitadelGroups: string[]) {
  // 1. Fetch group mappings
  const { data: mappings } = await supabase
    .from('zitadel_group_mappings')
    .select('zitadel_group, local_group_id')
    .in('zitadel_group', zitadelGroups);

  // 2. Map Zitadel groups to local groups
  const localGroupIds = mappings.map(m => m.local_group_id);

  // 3. Remove user from old groups
  await supabase
    .from('user_groups')
    .delete()
    .eq('user_id', userId);

  // 4. Add user to new groups
  await supabase
    .from('user_groups')
    .insert(localGroupIds.map(groupId => ({
      user_id: userId,
      group_id: groupId,
    })));

  // 5. Update last sync timestamp
  await supabase
    .from('user_zitadel_identities')
    .update({ last_synced: new Date().toISOString() })
    .eq('user_id', userId);
}

# Local development with hot reload
npm run dev

# Environment variables (.env)
VITE_SUPABASE_URL="https://your-project.supabase.co"
VITE_SUPABASE_PUBLISHABLE_KEY="your-anon-key"
VITE_ZITADEL_ISSUER_URL="https://manager.kappa4.com"
VITE_ZITADEL_CLIENT_ID="your-client-id"
VITE_ZITADEL_REDIRECT_URI="http://localhost:8080/auth/callback"
VITE_NETWORK_MODE="development"