Extend login session on activity. fixes #244

Author: Avasam

api/api_wrappers.py

@@ -1,6 +1,7 @@
+from datetime import datetime, timedelta
 from functools import wraps
-
 from flask import current_app, jsonify, request
+import json
 import jwt
 
 from models.core_models import Player
@@ -34,6 +35,29 @@ def _verify(*args, **kwargs):
         player = Player.query.filter_by(user_id=data["sub"]).first()
         if not player:
             raise RuntimeError("User not found")
-        return f(player, *args, **kwargs)
+
+        response = f(player, *args, **kwargs)
+
+        # Extend the expiration date of the JWT since the user is active
+        # Newly generated token needs to be sent back to frontent
+        if not isinstance(response, tuple):
+            return response
+
+        extended_token = jwt.encode({
+            "sub": data["sub"],
+            "iat": data["iat"],
+            "exp": datetime.utcnow() + timedelta(days=1)},
+            current_app.config["SECRET_KEY"])
+        try:
+            response_content = json.loads(response[0])
+        except json.JSONDecodeError:
+            response_content = {"message": response[0]}
+
+        return (
+            json.dumps({
+                **response_content,
+                "token": extended_token,
+            }),
+            response[1])
 
     return _verify

global-scoreboard/src/Components/App.tsx

@@ -12,8 +12,8 @@ import type { ServerConfigs } from 'src/Models/Configs'
 import Configs from 'src/Models/Configs'
 import type Player from 'src/Models/Player'
 
-const getCurrentUser = () => apiGet('users/current').then<{ user: Player | undefined }>(response => response.json())
-const getConfigs = () => apiGet('configs').then<ServerConfigs>(response => response.json())
+const getCurrentUser = () => apiGet<{ user: Player | undefined }>('users/current')
+const getConfigs = () => apiGet<ServerConfigs>('configs')
 
 const logout = (setCurrentUser: (user: null) => void) => {
   setCurrentUser(null)

global-scoreboard/src/Components/Dashboard/Dashboard.tsx

@@ -20,9 +20,8 @@ type DashboardProps = {
 
 const MOBILE_SIZE = 767
 
-const getFriends = () => apiGet('players/current/friends').then<Player[]>(response => response.json())
-const getAllPlayers = () => apiGet('players')
-  .then<Player[]>(response => response.json())
+const getFriends = () => apiGet<Player[]>('players/current/friends')
+const getAllPlayers = () => apiGet<Player[]>('players')
   .then(players =>
     players.map(player => ({
       ...player,
@@ -128,8 +127,7 @@ const Dashboard = (props: DashboardProps) => {
       return
     }
     setUpdateStartTime(Date.now())
-    apiPost(`players/${runnerNameOrId}/update`)
-      .then<UpdateRunnerResult>(response => response.json())
+    apiPost<UpdateRunnerResult>(`players/${runnerNameOrId}/update`)
       .then(playerResult => {
         playerResult.lastUpdate = new Date(playerResult.lastUpdate)
         return playerResult

global-scoreboard/src/Components/Dashboard/TableElements/PlayerScoreCell.tsx

@@ -19,12 +19,11 @@ const PlayerScoreCell = (props: PlayerScoreCellProps) => {
   const handleClose = () => setShow(false)
   const handleShow = () =>
     props.player.scoreDetails === undefined
-      ? apiGet(`players/${props.player.userId}/score-details`)
-        .then(response =>
-          response.json().then((scoreDetails: RunResult[][]) => {
-            props.player.scoreDetails = scoreDetails
-            setShow(true)
-          }))
+      ? apiGet<RunResult[][]>(`players/${props.player.userId}/score-details`)
+        .then(scoreDetails => {
+          props.player.scoreDetails = scoreDetails
+          setShow(true)
+        })
       : setShow(true)
 
   // Date is last known update date for a user with details

global-scoreboard/src/Components/GameSearch/GameCategorySearchBar.tsx

@@ -38,8 +38,7 @@ const GameCategorySearchBar = (props: GameCategorySearchProps) => {
     (searchText: string) =>
       !searchText
         ? props.onClear?.()
-        : apiGet('https://www.speedrun.com/api/v1/games', { name: searchText, max: MAX_PAGINATION }, false)
-          .then<DataArray<SpeedruncomGame>>(response => response.json())
+        : apiGet<DataArray<SpeedruncomGame>>('https://www.speedrun.com/api/v1/games', { name: searchText, max: MAX_PAGINATION }, false)
           .then(response => response.data)
           .then<IdToNameMap>(games => Object.fromEntries(games.map(game => [game.id, game.names.international])))
           .then(games => {

global-scoreboard/src/Components/GameSearch/ScoreDropCalculator.tsx

@@ -31,33 +31,30 @@ const filterSubCatVariables = (variables: SpeedruncomRun['data']['values'], subC
 }
 
 const getRunDetails = (runId: string) =>
-  apiGet(
+  apiGet<SpeedruncomRun>(
     `https://www.speedrun.com/api/v1/runs/${runId}`,
     {},
     false
   )
-    .then<SpeedruncomRun>(response => response.json())
     .then(response => response.data)
 
 const getGameSubCategories = (gameId: string) =>
-  apiGet(
+  apiGet<DataArray<SpeedruncomVariable>>(
     `https://www.speedrun.com/api/v1/games/${gameId}/variables`,
     {},
     false
   )
-    .then<DataArray<SpeedruncomVariable>>(response => response.json())
     .then(response => response
       .data
       .filter(variable => variable['is-subcategory'])
       .map(variable => variable.id))
 
 const getLeaderboardRuns = (gameId: string, categoryId: string, subCategories: SpeedruncomRun['data']['values']) =>
-  apiGet(
+  apiGet<SpeedruncomLeaderboard>(
     `https://www.speedrun.com/api/v1/leaderboards/${gameId}/category/${categoryId}`,
     { 'video-only': true, ...addVarToValuesKeys(subCategories) },
     false
   )
-    .then<SpeedruncomLeaderboard>(response => response.json())
     .then(response => response.data.runs.map(run => run.run))
 
 const ScoreDropCalculator = () => {

global-scoreboard/src/Components/NavBar/LoginModal.tsx

@@ -30,13 +30,8 @@ const LoginModal = (props: LoginModalProps) => {
     }
     setLoading(true)
     setLoginErrorMessage('')
-    apiPost('login', { speedruncomApiKey: speedruncomApiKeyInput })
-      .then(response => response.json())
-      .then((response: { token: string, user: Player }) => {
-        if (!response.token) return
-        localStorage.setItem('jwtToken', response.token)
-        props.onLogin(response.user)
-      })
+    apiPost<{ user: Player }>('login', { speedruncomApiKey: speedruncomApiKeyInput })
+      .then(response => props.onLogin(response.user))
       .catch((error: Response) => {
         if (error.status === StatusCodes.UNAUTHORIZED) {
           void error.json()

global-scoreboard/src/Models/GameSearch.ts

@@ -29,31 +29,35 @@ export type PlatformSelectOption = {
 }
 
 export const getAllGameValues = () =>
-  apiGet('game-values')
-    .then<GameValue[]>(response => response.json())
+  apiGet<GameValue[]>('game-values')
     .then<GameValueRow[]>(gameValues => gameValues.map(gameValue => ({
       ...gameValue,
       wrPointsPerSecond: gameValue.wrPoints / gameValue.wrTime,
       meanPointsPerSecond: gameValue.wrPoints / gameValue.meanTime,
     })))
 
-export const getAllPlatforms = () => apiGet('https://www.speedrun.com/api/v1/platforms', { max: MAX_PAGINATION }, false)
-  .then<{ data: PlatformDto[] }>(response => response.json())
-  .then<PlatformDto[]>(response => response.data)
-  .then<IdToNameMap>(platforms => Object.fromEntries(platforms.map(platform => [platform.id, platform.name])))
+export const getAllPlatforms = () =>
+  apiGet<{ data: PlatformDto[] }>(
+    'https://www.speedrun.com/api/v1/platforms',
+    { max: MAX_PAGINATION },
+    false
+  )
+    .then<PlatformDto[]>(response => response.data)
+    .then<IdToNameMap>(platforms => Object.fromEntries(platforms.map(platform => [platform.id, platform.name])))
 
 const requestsStartedForRun = new Map<string, boolean>()
 
 export const fetchValueNamesForRun = async (runId: string) => {
   if (requestsStartedForRun.get(runId)) return
   requestsStartedForRun.set(runId, true)
-  return apiGet(`https://www.speedrun.com/api/v1/runs/${runId}?embed=game,category`, undefined, false)
-    .then<EmbeddedSpeedruncomRun>(response => response.json())
+  return apiGet<EmbeddedSpeedruncomRun>(
+    `https://www.speedrun.com/api/v1/runs/${runId}?embed=game,category`,
+    undefined,
+    false
+  )
     .then<[IdToNameMap, IdToNameMap]>(response => [
       { [response.data.game.data.id]: response.data.game.data.names.international },
       { [response.data.category.data.id]: response.data.category.data.name },
     ])
-    .catch(() => {
-      requestsStartedForRun.delete(runId)
-    })
+    .catch(() => requestsStartedForRun.delete(runId))
 }

global-scoreboard/src/fetchers/api.ts

@@ -18,7 +18,7 @@ const makeUrl = (location: string, queryParams?: QueryParams) => {
     : targetUrl
 }
 
-const apiFetch = (method: RequestInit['method'], url: string, body?: RequestInit['body'], customHeaders = true) =>
+const apiFetch = <R>(method: RequestInit['method'], url: string, body?: RequestInit['body'], customHeaders = true) =>
   fetch(url, {
     method,
     headers: customHeaders
@@ -33,15 +33,25 @@ const apiFetch = (method: RequestInit['method'], url: string, body?: RequestInit
     .then(response => response.status >= FIRST_HTTP_CODE && response.status <= LAST_HTTP_CODE
       ? Promise.reject(response)
       : response)
+    .then<R & { token?: string }>(response => response.json())
+    .then(response => {
+      // If a token is sent back as part of any response, set it.
+      // This could be a first login, or a login session extension.
+      if (response.token) {
+        localStorage.setItem('jwtToken', response.token)
+      }
+
+      return response as R
+    })
 
-export const apiGet = (location: string, queryParams?: QueryParams, customHeaders = true) =>
-  apiFetch('GET', makeUrl(location, queryParams), undefined, customHeaders)
+export const apiGet = <R>(location: string, queryParams?: QueryParams, customHeaders = true) =>
+  apiFetch<R>('GET', makeUrl(location, queryParams), undefined, customHeaders)
 
-export const apiPost = (location: string, body?: Record<string, unknown>) =>
-  apiFetch('POST', makeUrl(location), JSON.stringify(body))
+export const apiPost = <R>(location: string, body?: Record<string, unknown>) =>
+  apiFetch<R>('POST', makeUrl(location), JSON.stringify(body))
 
-export const apiPut = (location: string, body?: Record<string, unknown>) =>
-  apiFetch('PUT', makeUrl(location), JSON.stringify(body))
+export const apiPut = <R>(location: string, body?: Record<string, unknown>) =>
+  apiFetch<R>('PUT', makeUrl(location), JSON.stringify(body))
 
-export const apiDelete = (location: string) =>
-  apiFetch('DELETE', makeUrl(location))
+export const apiDelete = <R>(location: string) =>
+  apiFetch<R>('DELETE', makeUrl(location))

tournament-scheduler/src/Components/App.tsx

@@ -25,7 +25,7 @@ if (embedded) {
   (darkTheme.components?.MuiCssBaseline?.styleOverrides as unknown as StylesOverrides).body.background = 'transparent'
 }
 
-const getCurrentUser = () => apiGet('users/current').then(response => response.json())
+const getCurrentUser = () => apiGet<{ user: User | undefined }>('users/current')
 
 const logout = (setCurrentUser: (user: null) => void) => {
   setCurrentUser(null)
@@ -50,7 +50,7 @@ const App = () => {
 
   useEffect(() => {
     getCurrentUser()
-      .then((response: { user: User | undefined }) => response.user)
+      .then(response => response.user)
       .then(setCurrentUser)
       .catch((error: Response) => {
         if (error.status === StatusCodes.UNAUTHORIZED) {

tournament-scheduler/src/Components/LoginForm/LoginForm.tsx

@@ -11,13 +11,8 @@ type loginFormProps = {
 }
 
 const login = (speedruncomApiKey: string, onLoginCallback: (currentUser: User) => void) =>
-  apiPost('login', { speedruncomApiKey })
-    .then(response => response.json())
-    .then((response: { token: string, user: User }) => {
-      if (!response.token) return
-      localStorage.setItem('jwtToken', response.token)
-      onLoginCallback(response.user)
-    })
+  apiPost<{ user: User }>('login', { speedruncomApiKey })
+    .then(response => onLoginCallback(response.user))
     .catch(console.error)
 
 const LoginForm = (props: loginFormProps) => {

tournament-scheduler/src/Components/ScheduleManagement/ScheduleManagement.tsx

@@ -14,14 +14,11 @@ import type User from 'src/Models/User'
 import { arrayMove } from 'src/utils/objectUtils'
 
 const getSchedules = () =>
-  apiGet('schedules')
-    .then(response =>
-      response.json().then((scheduleDtos: ScheduleDto[] | undefined) =>
-        scheduleDtos?.map(scheduleDto => new Schedule(scheduleDto)) ?? []))
+  apiGet<ScheduleDto[] | undefined>('schedules')
+    .then(scheduleDtos => scheduleDtos?.map(scheduleDto => new Schedule(scheduleDto)) ?? [])
 
 const postSchedules = (schedule: ScheduleDto) =>
-  apiPost('schedules', schedule)
-    .then<number>(response => response.json())
+  apiPost<number>('schedules', schedule)
 
 const putSchedule = (schedule: ScheduleDto) =>
   apiPut(`schedules/${schedule.id}`, schedule)
@@ -36,14 +33,11 @@ const putScheduleOrder = (scheduleOrderDtos: ScheduleOrderDto[]) =>
   apiPut('schedules/order', scheduleOrderDtos)
 
 const getGroups = () =>
-  apiGet('schedule_groups')
-    .then(response =>
-      response.json().then((scheduleGroupDtos: ScheduleGroupDto[] | undefined) =>
-        scheduleGroupDtos?.map(scheduleGroupDto => new ScheduleGroup(scheduleGroupDto)) ?? []))
+  apiGet<ScheduleGroupDto[] | undefined>('schedule_groups')
+    .then(scheduleGroupDtos => scheduleGroupDtos?.map(scheduleGroupDto => new ScheduleGroup(scheduleGroupDto)) ?? [])
 
 const postGroups = (scheduleGroup: ScheduleGroupDto) =>
-  apiPost('schedule_groups', scheduleGroup)
-    .then<number>(response => response.json())
+  apiPost<number>('schedule_groups', scheduleGroup)
 
 const putGroup = (scheduleGroup: ScheduleGroupDto) =>
   apiPut(`schedule_groups/${scheduleGroup.id}`, scheduleGroup)

tournament-scheduler/src/Components/ScheduleRegistration.tsx

@@ -26,12 +26,11 @@ const entriesLeftText = (timeSlot: TimeSlot) => {
 }
 
 const getSchedule = (id: number, registrationKey: string) =>
-  apiGet(`schedules/${id}`, { registrationKey })
-    .then(response => response.json().then((scheduleDto: ScheduleDto) => new Schedule(scheduleDto)))
+  apiGet<ScheduleDto>(`schedules/${id}`, { registrationKey })
+    .then(scheduleDto => new Schedule(scheduleDto))
 
 const postRegistration = (timeSlotId: number, participants: string[], registrationKey: string) =>
   apiPost(`time-slots/${timeSlotId}/registrations`, { participants, registrationKey })
-    .then(response => response.json())
 
 const ScheduleRegistration = () => {
   const [scheduleState, setScheduleState] = useState<Schedule | null | undefined>()

tournament-scheduler/src/Components/ScheduleViewer/ScheduleGroupViewer.tsx

@@ -9,12 +9,10 @@ import type { ScheduleDto, ScheduleGroupDto } from 'src/Models/Schedule'
 import { Schedule } from 'src/Models/Schedule'
 
 const getSchedules = (id: number) =>
-  apiGet(`schedule_groups/${id}/schedules`)
-    .then<ScheduleDto[]>(response => response.json())
+  apiGet<ScheduleDto[]>(`schedule_groups/${id}/schedules`)
 
 const getGroup = (id: number) =>
-  apiGet(`schedule_groups/${id}`)
-    .then<ScheduleGroupDto>(response => response.json())
+  apiGet<ScheduleGroupDto>(`schedule_groups/${id}`)
 
 const ScheduleGroupViewer = () => {
   const [schedules, setSchedules] = useState<ScheduleDto[]>([])

tournament-scheduler/src/Components/ScheduleViewer/ScheduleViewer.tsx

@@ -25,13 +25,12 @@ type ScheduleViewerProps = {
 }
 
 const getSchedule = (id: number) =>
-  apiGet(`schedules/${id}`)
-    .then(response =>
-      response.json().then((scheduleDto: ScheduleDto) => {
-        const newSchedule = new Schedule(scheduleDto)
-        newSchedule.timeSlots.sort(TimeSlot.compareFn)
-        return newSchedule
-      }))
+  apiGet<ScheduleDto>(`schedules/${id}`)
+    .then(scheduleDto => {
+      const newSchedule = new Schedule(scheduleDto)
+      newSchedule.timeSlots.sort(TimeSlot.compareFn)
+      return newSchedule
+    })
 
 export const TimeZoneMessage = <Typography>All dates and times are given in your local timezone.</Typography>