Add token refresh & integrate w/ UseFetch

Add token refresh logic to AuthContext, and integrate valid access token handling with useFetch. This change allows us to stop passing access tokens throughout the app

Key changes:
- `AuthContext` now exposes `getValidAccessToken()` which auto-refreshes expired tokens, updates context state, and prevents concurrent refreshes via a ref.
- Added `src/utils/authToken.ts` with `isValidToken`, `getAccessTokenExpirationDate`, and `getUpdatedAuthFromRefreshResponse` helpers.
- Added `getRefreshToken()` in `src/services/authService.ts` to call Spotify's token endpoint and added `SpotifyRefreshResponse` type (`src/types/SpotifyAuth.ts`).
- `useFetch` now retrieves a valid access token via `useAuth` and passes it to fetch functions; `fetchFn` signature changed to `(accessToken, signal)`.
  - Updated `useFetchSpotify` hooks (`useFetchPlaylists`, `useFetchTracks`) and components (Playlists, PlaylistTracks, CompareTracks) to correspond with these changes

This change centralizes token handling, prevents duplicate refresh requests, and simplifies component usage.

Author: aaronskiba

src/components/CompareTracks.tsx

@@ -1,7 +1,6 @@
 import {useMemo} from 'react';
 import {SpotifyPlaylist, SpotifyTrack} from '../types/SpotifyPlaylist';
 import Tracks from './Tracks';
-import {useAuth} from '../contexts/AuthContext';
 import {View, StyleSheet} from 'react-native';
 import {getSharedTracks} from '../utils/trackUtils';
 import PlaylistHeader from './headers/PlaylistHeader';
@@ -18,18 +17,17 @@ export default function TracksComparison({
   selectedPlaylists,
 }: SpotifyTracksComparisonProps) {
   const [leftPlaylist, rightPlaylist] = selectedPlaylists;
-  const {accessToken} = useAuth();
 
   const {
     data: leftTracks,
     error: leftError,
     isLoading: leftIsLoading,
-  } = useFetchTracks(leftPlaylist.id, accessToken);
+  } = useFetchTracks(leftPlaylist.id);
   const {
     data: rightTracks,
     error: rightError,
     isLoading: rightIsLoading,
-  } = useFetchTracks(rightPlaylist.id, accessToken);
+  } = useFetchTracks(rightPlaylist.id);
 
   const sharedTracks = useMemo(() => {
     if (!leftTracks || !rightTracks) return null;

src/components/PlaylistTracks.tsx

@@ -1,5 +1,4 @@
 import {SpotifyPlaylist} from '../types/SpotifyPlaylist';
-import {useAuth} from '../contexts/AuthContext';
 import Tracks from './Tracks';
 import {View, StyleSheet} from 'react-native';
 import PlaylistHeader from './headers/PlaylistHeader';
@@ -12,12 +11,7 @@ type PlaylistTracksProps = {
 };
 
 export default function PlaylistTracks({spotifyPlaylist}: PlaylistTracksProps) {
-  const {accessToken} = useAuth();
-  const {
-    data: tracks,
-    error,
-    isLoading,
-  } = useFetchTracks(spotifyPlaylist.id, accessToken);
+  const {data: tracks, error, isLoading} = useFetchTracks(spotifyPlaylist.id);
 
   return (
     <View style={styles.column}>

src/components/Playlists.tsx

@@ -2,7 +2,6 @@ import {SpotifyPlaylist} from '../types/SpotifyPlaylist';
 import {SpotifyPlaylistActions} from '../types/SpotifyPlaylistProps';
 import Playlist from './Playlist';
 import Header from './headers/Header';
-import {useAuth} from '../contexts/AuthContext';
 import {FlatList} from 'react-native';
 import ErrorMessage from './ErrorMessage';
 import {useFetchPlaylists} from '../hooks/useFetchSpotify';
@@ -17,8 +16,7 @@ export default function Playlists({
   updateSelectedPlaylists,
   focusPlaylist,
 }: SpotifyPlaylistsProps) {
-  const {accessToken} = useAuth();
-  const {data: playlists, error, isLoading} = useFetchPlaylists(accessToken);
+  const {data: playlists, error, isLoading} = useFetchPlaylists();
 
   return (
     <>

src/contexts/AuthContext.tsx

@@ -1,14 +1,14 @@
-import {createContext, useContext, useState, ReactNode} from 'react';
-import {SpotifyAuth} from '../types/SpotifyAuth';
-import {handleSpotifyAuth} from '../services/authService';
-
-// For addressing edge cases
-// - (i.e. when a request fires right at token expiry time)
-const ACCESS_TOKEN_EXPIRY_BUFFER = 15_000; // 15-sec
+import {createContext, useContext, useState, useRef, ReactNode} from 'react';
+import {SpotifyAuth, SpotifyRefreshResponse} from '../types/SpotifyAuth';
+import {handleSpotifyAuth, getRefreshToken} from '../services/authService';
+import {
+  isValidToken,
+  getUpdatedAuthFromRefreshResponse,
+} from '../utils/authToken';
 
 interface AuthContextType {
-  accessToken: string | null;
   isAuthenticated: boolean;
+  getValidAccessToken: () => Promise<string | null>;
   login: () => Promise<void>;
   logout: () => void;
 }
@@ -17,15 +17,39 @@ interface AuthProviderProps {
   children: ReactNode;
 }
 
-const isExpiredToken = (auth: SpotifyAuth): boolean => {
-  const expiry = new Date(auth.accessTokenExpirationDate).getTime();
-  return !expiry || expiry < Date.now() + ACCESS_TOKEN_EXPIRY_BUFFER;
-};
-
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({children}: AuthProviderProps) => {
   const [auth, setAuth] = useState<SpotifyAuth | null>(null);
+  const refreshTokenPromiseRef = useRef<Promise<string | null> | null>(null);
+
+  const handleTokenRefresh = async (authSnapshot: SpotifyAuth) => {
+    try {
+      const response: SpotifyRefreshResponse = await getRefreshToken(
+        authSnapshot,
+      );
+      const updatedAuth = getUpdatedAuthFromRefreshResponse(
+        authSnapshot,
+        response,
+      );
+      setAuth(updatedAuth);
+      return updatedAuth.accessToken;
+    } finally {
+      refreshTokenPromiseRef.current = null;
+    }
+  };
+
+  const getValidAccessToken = async () => {
+    if (!auth) return null;
+    if (isValidToken(auth)) return auth.accessToken;
+    // If a refresh is already in progress, return the same promise
+    // (Prevents concurrent requests from triggering multiple getRefreshToken() calls)
+    if (refreshTokenPromiseRef.current) return refreshTokenPromiseRef.current;
+    // Initiate a refresh and store the promise for other callers to await
+    // (After it's completion, handleTokenRefresh clears the ref)
+    refreshTokenPromiseRef.current = handleTokenRefresh(auth);
+    return refreshTokenPromiseRef.current;
+  };
 
   const login = async () => {
     try {
@@ -39,11 +63,12 @@ export const AuthProvider = ({children}: AuthProviderProps) => {
 
   const logout = () => setAuth(null);
 
-  const accessToken = !auth || isExpiredToken(auth) ? null : auth.accessToken;
-  const isAuthenticated = !!accessToken;
+  // "authenticated" is having (or being able to obtain) a valid access token
+  const isAuthenticated = !!auth && (!!auth.refreshToken || isValidToken(auth));
 
   return (
-    <AuthContext.Provider value={{accessToken, isAuthenticated, login, logout}}>
+    <AuthContext.Provider
+      value={{isAuthenticated, getValidAccessToken, login, logout}}>
       {children}
     </AuthContext.Provider>
   );

src/hooks/useFetch.ts

@@ -1,4 +1,5 @@
 import {useState, useEffect} from 'react';
+import {useAuth} from '../contexts/AuthContext';
 
 type FetchState<T> = {
   data: T | null;
@@ -7,14 +8,15 @@ type FetchState<T> = {
 };
 
 export function useFetch<T>(
-  fetchFn: (signal: AbortSignal) => Promise<T>,
+  fetchFn: (accessToken: string, signal: AbortSignal) => Promise<T>,
   deps: any[] = [],
 ) {
   const [fetchState, setFetchState] = useState<FetchState<T>>({
     data: null,
     error: null,
     isLoading: false,
   });
+  const {isAuthenticated, getValidAccessToken} = useAuth();
 
   useEffect(() => {
     const controller = new AbortController();
@@ -23,20 +25,30 @@ export function useFetch<T>(
     const handleFetch = async () => {
       setFetchState({data: null, error: null, isLoading: true});
       try {
-        const data = await fetchFn(signal);
+        const accessToken = await getValidAccessToken();
+        if (!accessToken) {
+          setFetchState({data: null, error: null, isLoading: false});
+          return;
+        }
+        const data = await fetchFn(accessToken, signal);
         setFetchState({data, error: null, isLoading: false});
       } catch (error: any) {
         if (signal.aborted) return;
         setFetchState({data: null, error, isLoading: false});
       }
     };
 
+    if (!isAuthenticated) {
+      setFetchState({data: null, error: null, isLoading: false});
+      return () => controller.abort();
+    }
+
     handleFetch();
 
     return () => {
       controller.abort();
     };
-  }, deps);
+  }, [isAuthenticated, ...deps]);
 
   return fetchState;
 }

src/hooks/useFetchSpotify.ts

@@ -3,23 +3,16 @@ import {getPlaylistTracks} from '../services/trackService';
 import {SpotifyPlaylist, SpotifyTrack} from '../types/SpotifyPlaylist';
 import {useFetch} from './useFetch';
 
-export const useFetchPlaylists = (accessToken: string | null) => {
+export const useFetchPlaylists = () => {
   return useFetch<SpotifyPlaylist[] | null>(
-    signal =>
-      accessToken ? getPlaylists(accessToken, signal) : Promise.resolve(null),
-    [accessToken],
+    (accessToken, signal) => getPlaylists(accessToken, signal),
+    [],
   );
 };
 
-export const useFetchTracks = (
-  playlistId: string,
-  accessToken: string | null,
-) => {
+export const useFetchTracks = (playlistId: string) => {
   return useFetch<SpotifyTrack[] | null>(
-    signal =>
-      accessToken
-        ? getPlaylistTracks(playlistId, accessToken, signal)
-        : Promise.resolve(null),
-    [accessToken, playlistId],
+    (accessToken, signal) => getPlaylistTracks(playlistId, accessToken, signal),
+    [playlistId],
   );
 };

src/services/authService.ts

@@ -2,6 +2,29 @@ import {authorize} from 'react-native-app-auth';
 import spotifyAuthConfig from '../config/spotifyAuthConfig';
 import {SpotifyAuth} from '../types/SpotifyAuth';
 
+const REFRESH_TOKEN_URL = 'https://accounts.spotify.com/api/token';
+
+// https://developer.spotify.com/documentation/web-api/tutorials/refreshing-tokens
+export const getRefreshToken = async (auth: SpotifyAuth) => {
+  const response = await fetch(REFRESH_TOKEN_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: new URLSearchParams({
+      grant_type: 'refresh_token',
+      refresh_token: auth.refreshToken,
+      client_id: spotifyAuthConfig.clientId,
+    }).toString(),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Spotify token refresh failed: ${response.status}`);
+  }
+
+  return response.json();
+};
+
 export const handleSpotifyAuth = async (): Promise<SpotifyAuth> => {
   try {
     const spotifyAuthData = await authorize(spotifyAuthConfig);

src/types/SpotifyAuth.ts

@@ -8,3 +8,12 @@ export type SpotifyAuth = {
   tokenAdditionalParameters?: Record<string, any>;
   tokenType: string;
 };
+
+// https://developer.spotify.com/documentation/web-api/tutorials/refreshing-tokens
+export type SpotifyRefreshResponse = {
+  access_token: string;
+  token_type: string;
+  expires_in: number;
+  refresh_token?: string;
+  scope: string;
+};

src/utils/authToken.ts

@@ -0,0 +1,29 @@
+import {SpotifyAuth, SpotifyRefreshResponse} from '../types/SpotifyAuth';
+
+// For addressing edge cases
+// - (i.e. when a request fires right at token expiry time)
+const ACCESS_TOKEN_EXPIRY_BUFFER = 15_000; // 15-sec
+
+export const isValidToken = (auth: SpotifyAuth): boolean => {
+  const expiry = new Date(auth.accessTokenExpirationDate).getTime();
+  return !!expiry && expiry > Date.now() + ACCESS_TOKEN_EXPIRY_BUFFER;
+};
+
+export const getAccessTokenExpirationDate = (expires_in: number) => {
+  return new Date(Date.now() + expires_in * 1000).toISOString();
+};
+
+// https://developer.spotify.com/documentation/web-api/tutorials/refreshing-tokens
+export const getUpdatedAuthFromRefreshResponse = (
+  auth: SpotifyAuth,
+  response: SpotifyRefreshResponse,
+) => {
+  return {
+    ...auth,
+    accessToken: response.access_token,
+    refreshToken: response.refresh_token ?? auth.refreshToken,
+    accessTokenExpirationDate: getAccessTokenExpirationDate(
+      response.expires_in,
+    ),
+  };
+};