Improve live activity remote controls

Author: coder13

.gitignore

@@ -27,3 +27,4 @@ yarn-error.log*
 storybook-static
 
 .cache
+.netlify

netlify/functions/notify-comp-token.js

@@ -13,6 +13,20 @@ const PUSH_SCOPE = 'assignment_notifications';
 const REMOTE_TOKEN_TTL_SECONDS = 12 * 60 * 60;
 const PUSH_TOKEN_TTL_SECONDS = 10 * 60;
 
+const getCompetitionManagers = (competition) => {
+  const data = competition?.competition || competition;
+  return [...(data?.organizers || []), ...(data?.delegates || [])];
+};
+
+const isListedCompetitionManager = (competition, userId) =>
+  getCompetitionManagers(competition).some((user) => Number(user?.id) === Number(userId));
+
+const getManagedCompetitionIds = (competitions, userId) =>
+  competitions
+    .filter((competition) => isListedCompetitionManager(competition, userId))
+    .map((competition) => competition.id)
+    .filter(Boolean);
+
 const signJwt = (claims, secret) => {
   const encodedHeader = base64Url(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
   const encodedPayload = base64Url(JSON.stringify(claims));
@@ -58,6 +72,7 @@ exports.handler = async (event) => {
   }
 
   const { accessToken, competitionId, scope } = body;
+  const tokenScope = scope === REMOTE_SCOPE ? REMOTE_SCOPE : PUSH_SCOPE;
   if (!accessToken) {
     return {
       statusCode: 400,
@@ -67,7 +82,9 @@ exports.handler = async (event) => {
   }
 
   const wcaOrigin = process.env.WCA_ORIGIN || 'https://www.worldcubeassociation.org';
-  const meResponse = await fetch(`${wcaOrigin}/api/v0/me`, {
+  const meParams =
+    tokenScope === REMOTE_SCOPE ? '?upcoming_competitions=true&ongoing_competitions=true' : '';
+  const meResponse = await fetch(`${wcaOrigin}/api/v0/me${meParams}`, {
     headers: {
       Authorization: `Bearer ${accessToken}`,
     },
@@ -81,7 +98,7 @@ exports.handler = async (event) => {
     };
   }
 
-  const { me } = await meResponse.json();
+  const { me, ongoing_competitions = [], upcoming_competitions = [] } = await meResponse.json();
   if (!me?.id) {
     return {
       statusCode: 401,
@@ -90,7 +107,6 @@ exports.handler = async (event) => {
     };
   }
 
-  const tokenScope = scope === REMOTE_SCOPE ? REMOTE_SCOPE : PUSH_SCOPE;
   const tokenTtlSeconds =
     tokenScope === REMOTE_SCOPE ? REMOTE_TOKEN_TTL_SECONDS : PUSH_TOKEN_TTL_SECONDS;
   if (tokenScope === REMOTE_SCOPE && !competitionId) {
@@ -101,11 +117,50 @@ exports.handler = async (event) => {
     };
   }
 
+  let remoteCompetitionIds = [];
+
+  if (tokenScope === REMOTE_SCOPE) {
+    const competitionResponse = await fetch(`${wcaOrigin}/api/v0/competitions/${competitionId}`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!competitionResponse.ok) {
+      return {
+        statusCode: competitionResponse.status === 404 ? 404 : 502,
+        headers,
+        body: JSON.stringify({ message: 'Unable to verify competition remote access' }),
+      };
+    }
+
+    const competition = await competitionResponse.json();
+    if (!isListedCompetitionManager(competition, me.id)) {
+      return {
+        statusCode: 403,
+        headers,
+        body: JSON.stringify({
+          message:
+            'Only listed competition delegates and organizers can use Live Activities Remote',
+        }),
+      };
+    }
+
+    // Remote tokens are scoped to competitions the WCA API says this user manages. The
+    // NotifyComp API must reject remote mutations for competition IDs outside this claim.
+    remoteCompetitionIds = [
+      ...new Set([
+        competitionId,
+        ...getManagedCompetitionIds([...ongoing_competitions, ...upcoming_competitions], me.id),
+      ]),
+    ];
+  }
+
   const now = Math.floor(Date.now() / 1000);
   const token = signJwt(
     {
       aud: process.env.COMPETITION_GROUPS_JWT_AUDIENCE || 'notifycomp',
-      competitionIds: tokenScope === REMOTE_SCOPE ? [competitionId] : undefined,
+      competitionIds: tokenScope === REMOTE_SCOPE ? remoteCompetitionIds : undefined,
       exp: now + tokenTtlSeconds,
       iat: now,
       iss: process.env.COMPETITION_GROUPS_JWT_ISSUER || 'competitiongroups.com',

src/App.tsx

@@ -31,12 +31,14 @@ import CompetitionStats from './pages/Competition/Stats';
 import CompetitionStreamSchedule from './pages/Competition/StreamSchedule';
 import CompetitionSumOfRanks from './pages/Competition/SumOfRanks';
 import Home from './pages/Home';
+import LiveActivitiesAbout from './pages/LiveActivities/About';
 import Settings from './pages/Settings';
 import Support from './pages/Support';
 import Test from './pages/Test';
 import UserLogin from './pages/UserLogin';
 import { AppProvider } from './providers/AppProvider';
 import { AuthProvider, useAuth } from './providers/AuthProvider';
+import { ConfirmProvider } from './providers/ConfirmProvider';
 import { NotifyCompRemoteAuthProvider } from './providers/NotifyCompRemoteAuthProvider';
 import { QueryProvider } from './providers/QueryProvider/QueryProvider';
 import { UserSettingsProvider } from './providers/UserSettingsProvider';
@@ -129,6 +131,7 @@ const Navigation = () => {
         </Route>
         <Route path="/users/:userId" element={<UserLogin />} />
         <Route path="about" element={<About />} />
+        <Route path="live-activities" element={<LiveActivitiesAbout />} />
         <Route path="settings" element={<Settings />} />
         <Route path="support" element={<Support />} />
       </Route>
@@ -144,11 +147,13 @@ const App = () => (
       <QueryProvider>
         <ApolloProvider client={client}>
           <BrowserRouter>
-            <AuthProvider>
-              <NotifyCompRemoteAuthProvider>
-                <Navigation />
-              </NotifyCompRemoteAuthProvider>
-            </AuthProvider>
+            <ConfirmProvider>
+              <AuthProvider>
+                <NotifyCompRemoteAuthProvider>
+                  <Navigation />
+                </NotifyCompRemoteAuthProvider>
+              </AuthProvider>
+            </ConfirmProvider>
           </BrowserRouter>
         </ApolloProvider>
       </QueryProvider>

src/apolloClient.ts

@@ -4,6 +4,7 @@ import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
 import { getMainDefinition } from '@apollo/client/utilities';
 import { createClient } from 'graphql-ws';
 import { getNotifyCompRemoteToken } from './lib/notifyCompRemoteAuth';
+import { setNotifyCompWebSocketStatus } from './lib/notifyCompWebSocketStatus';
 import { NOTIFYCOMP_GRAPHQL_ORIGIN, NOTIFYCOMP_WS_ORIGIN } from './lib/remoteConfig';
 
 const httpLink = createHttpLink({
@@ -13,6 +14,24 @@ const httpLink = createHttpLink({
 const wsLink = new GraphQLWsLink(
   createClient({
     url: NOTIFYCOMP_WS_ORIGIN,
+    on: {
+      connecting: () => {
+        setNotifyCompWebSocketStatus({ status: 'connecting' });
+      },
+      connected: () => {
+        setNotifyCompWebSocketStatus({ status: 'connected' });
+      },
+      closed: () => {
+        setNotifyCompWebSocketStatus({ status: 'disconnected' });
+      },
+      error: () => {
+        setNotifyCompWebSocketStatus({
+          status: 'disconnected',
+          message:
+            'Unable to connect to NotifyComp live updates. Activity changes may not update automatically.',
+        });
+      },
+    },
   }),
 );
 

src/components/NotifyCompConnectionStatus/NotifyCompConnectionStatus.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import { NoteBox } from '@/components/Notebox';
+import { useNotifyCompWebSocketStatus } from '@/hooks/useNotifyCompWebSocketStatus';
+
+interface NotifyCompConnectionStatusProps {
+  className?: string;
+  compact?: boolean;
+}
+
+const statusText = {
+  connecting: 'Connecting to NotifyComp live updates...',
+  disconnected:
+    'Not connected to NotifyComp live updates. Activity changes may not update automatically.',
+  idle: '',
+  connected: '',
+};
+
+export function NotifyCompConnectionStatus({
+  className,
+  compact = false,
+}: NotifyCompConnectionStatusProps) {
+  const { message, status } = useNotifyCompWebSocketStatus();
+
+  if (status === 'idle' || status === 'connected') {
+    return null;
+  }
+
+  const text = message || statusText[status];
+  const toneClassName =
+    status === 'connecting' ? 'bg-yellow-400 dark:bg-yellow-300' : 'bg-red-500 dark:bg-red-400';
+
+  if (compact) {
+    return (
+      <div
+        className={classNames(
+          'flex items-center justify-center gap-1 text-xs font-medium text-muted',
+          className,
+        )}
+        title={text}>
+        <span className={classNames('h-2 w-2 rounded-full', toneClassName)} aria-hidden="true" />
+        <span>{status === 'connecting' ? 'Connecting live updates' : 'Live updates offline'}</span>
+      </div>
+    );
+  }
+
+  return <NoteBox className={className} prefix="Live updates" text={text} />;
+}

src/components/NotifyCompConnectionStatus/index.ts

@@ -0,0 +1 @@
+export * from './NotifyCompConnectionStatus';