Merge pull request #170 from StackOverflowIsBetterThanAnyAI/163-implement-new-auth-system

implement new auth system to remove unnecessary auth calls which flooded the network

Author: StackOverflowIsBetterThanAnyAI

src/components/streamFeed/StreamProfilePicture.tsx

@@ -96,7 +96,9 @@ const StreamProfilePicture: FC<StreamProfilePictureProps> = ({
                 const data = await getProfilePicture(user_id || '')
                 if (!data) {
                     throw new Error()
-                } else setImageUrl(data)
+                } else {
+                    setImageUrl(data)
+                }
             } catch (error: any) {}
         }
         fetchImageUrl()

src/helper/getProfilePicture.tsx

@@ -1,14 +1,26 @@
 import axios from 'axios'
 import { AuthorizationProps } from '../types/AuthorizationProps'
+import { getItemFromStorage } from './getItemFromStorage'
 import { getTwitchAuthorization } from './getTwitchAuthorization'
 
 export const getProfilePicture = async (
     user_id: string
 ): Promise<string | undefined> => {
+    const parsedData = getItemFromStorage()
     const authorizationObject: AuthorizationProps =
-        await getTwitchAuthorization()
+        parsedData.access_token &&
+        parsedData.expires_in &&
+        parsedData.token_type
+            ? {
+                  access_token: parsedData.access_token,
+                  expires_in: parsedData.expires_in,
+                  token_type: parsedData.token_type,
+              }
+            : await getTwitchAuthorization()
     let { access_token, token_type } = authorizationObject
-    if (!access_token || !token_type) return undefined
+    if (!access_token || !token_type) {
+        return undefined
+    }
 
     token_type =
         token_type.substring(0, 1).toUpperCase() +
@@ -30,11 +42,29 @@ export const getProfilePicture = async (
 
         return response.data.imageUrl
     } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 401) {
+            console.warn('Token expired, refreshing...')
+
+            const retryAuth: AuthorizationProps = await getTwitchAuthorization()
+            if (retryAuth.access_token) {
+                const retryResponse = await axios.post(
+                    'https://twitch-backend.vercel.app/api/profile-picture',
+                    {
+                        access_token: retryAuth.access_token,
+                        token_type: retryAuth.token_type,
+                        user_id,
+                    }
+                )
+                return retryResponse.data.imageUrl
+            }
+        }
+
         console.error(
             'The following error occurred while fetching a user profile picture for the user:',
             user_id,
             error
         )
+
         return undefined
     }
 }

src/helper/getStreams.tsx

@@ -1,15 +1,27 @@
 import axios from 'axios'
 import { AuthorizationProps } from '../types/AuthorizationProps'
+import { StreamProps } from '../types/StreamProps'
+import { getItemFromStorage } from './getItemFromStorage'
 import { getTwitchAuthorization } from './getTwitchAuthorization'
-import type { StreamProps } from '../types/StreamProps'
 
 export const getStreams = async (
     url: string
 ): Promise<StreamProps | undefined | { error: 'login' }> => {
+    const parsedData = getItemFromStorage()
     const authorizationObject: AuthorizationProps =
-        await getTwitchAuthorization()
+        parsedData.access_token &&
+        parsedData.expires_in &&
+        parsedData.token_type
+            ? {
+                  access_token: parsedData.access_token,
+                  expires_in: parsedData.expires_in,
+                  token_type: parsedData.token_type,
+              }
+            : await getTwitchAuthorization()
     let { access_token, token_type } = authorizationObject
-    if (!access_token || !token_type) return { error: 'login' }
+    if (!access_token || !token_type) {
+        return { error: 'login' }
+    }
 
     token_type =
         token_type.substring(0, 1).toUpperCase() +
@@ -36,6 +48,23 @@ export const getStreams = async (
 
         return response.data
     } catch (error: any) {
+        if (axios.isAxiosError(error) && error.response?.status === 401) {
+            console.warn('Token expired, refreshing...')
+
+            const retryAuth: AuthorizationProps = await getTwitchAuthorization()
+            if (retryAuth.access_token) {
+                const retryResponse = await axios.post(
+                    'https://twitch-backend.vercel.app/api/streams',
+                    {
+                        access_token: retryAuth.access_token,
+                        token_type: retryAuth.token_type,
+                        url,
+                    }
+                )
+                return retryResponse.data
+            }
+        }
+
         console.error(
             'The following error occured while fetching the current Livestreams:',
             error

src/helper/getTwitchAuthorization.tsx

@@ -1,6 +1,7 @@
 import axios from 'axios'
 
 import { AuthorizationProps } from '../types/AuthorizationProps'
+import { setItemInStorage } from './setItemInStorage'
 
 export const getTwitchAuthorization = async (): Promise<AuthorizationProps> => {
     try {
@@ -9,6 +10,11 @@ export const getTwitchAuthorization = async (): Promise<AuthorizationProps> => {
         )
         if (response.status !== 200 || typeof response.data !== 'object')
             throw new Error(`${response.status}`)
+
+        setItemInStorage('access_token', response.data.access_token)
+        setItemInStorage('expires_in', response.data.expires_in)
+        setItemInStorage('token_type', response.data.token_type)
+
         return response.data
     } catch (error: any) {
         console.error(

src/helper/getUser.tsx

@@ -32,7 +32,7 @@ export const getUser = async (): Promise<UserProps | null> => {
             }
         )
 
-        if (response.status !== 200 || typeof response !== 'object')
+        if (response.status !== 200 || typeof response.data !== 'object')
             throw new Error(`${response.status}`)
 
         user = response.data