[TMA 68] Frontend Token Security (#43)

* frontend tma-68 token security

* removed: try catch while storing token to async, unnecessary console.log

* login/registration exception handling and relocation

* Modified promises, applied fetch restriction

1 files changed, 52 insertions, 14 deletions

diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
index 589cb051..e5956eb2 100644
--- a/src/routes/authentication/AuthProvider.tsx
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -14,6 +14,7 @@ import {
   COVER_PHOTO_ENDPOINT,
   GET_IG_POSTS_ENDPOINT,
 } from '../../constants';
+import {Alert} from 'react-native';
 
 interface AuthContextProps {
   user: UserType;
@@ -57,16 +58,18 @@ const AuthProvider: React.FC = ({children}) => {
   const [recentSearches, setRecentSearches] = useState<
     Array<ProfilePreviewType>
   >([]);
-
   const {userId} = user;
   useEffect(() => {
     if (!userId) {
       return;
     }
-    const loadProfileInfo = async () => {
+    const loadProfileInfo = async (token: string) => {
       try {
         const response = await fetch(PROFILE_INFO_ENDPOINT + `${userId}/`, {
           method: 'GET',
+          headers: {
+            Authorization: 'Token ' + token,
+          },
         });
         const status = response.status;
         if (status === 200) {
@@ -75,15 +78,20 @@ const AuthProvider: React.FC = ({children}) => {
           setProfile({name, biography, website});
         }
       } catch (error) {
-        console.log(error);
+        Alert.alert(
+          'Something went wrong! 😭',
+          "Would you believe me if I told you that I don't know what happened?",
+        );
       }
     };
-    const loadAvatar = async () => {
+    const loadAvatar = async (token: string) => {
       try {
         const response = await RNFetchBlob.config({
           fileCache: true,
           appendExt: 'jpg',
-        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${userId}/`);
+        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${userId}/`, {
+          Authorization: 'Token ' + token,
+        });
         const status = response.info().status;
         if (status === 200) {
           setAvatar(response.path());
@@ -94,12 +102,14 @@ const AuthProvider: React.FC = ({children}) => {
         console.log(error);
       }
     };
-    const loadCover = async () => {
+    const loadCover = async (token: string) => {
       try {
         let response = await RNFetchBlob.config({
           fileCache: true,
           appendExt: 'jpg',
-        }).fetch('GET', COVER_PHOTO_ENDPOINT + `${userId}/`);
+        }).fetch('GET', COVER_PHOTO_ENDPOINT + `${userId}/`, {
+          Authorization: 'Token ' + token,
+        });
         const status = response.info().status;
         if (status === 200) {
           setCover(response.path());
@@ -110,10 +120,13 @@ const AuthProvider: React.FC = ({children}) => {
         console.log(error);
       }
     };
-    const loadInstaPosts = async () => {
+    const loadInstaPosts = async (token: string) => {
       try {
         const response = await fetch(GET_IG_POSTS_ENDPOINT + `${userId}/`, {
           method: 'GET',
+          headers: {
+            Authorization: 'Token ' + token,
+          },
         });
         const status = response.status;
         if (status === 200) {
@@ -124,6 +137,10 @@ const AuthProvider: React.FC = ({children}) => {
         }
       } catch (error) {
         console.log(error);
+        Alert.alert(
+          'Something went wrong! 😭',
+          "Would you believe me if I told you that I don't know what happened?",
+        );
       }
     };
     const loadRecentlySearchedUsers = async () => {
@@ -136,11 +153,24 @@ const AuthProvider: React.FC = ({children}) => {
         console.log(e);
       }
     };
-    loadProfileInfo();
-    loadAvatar();
-    loadCover();
-    loadInstaPosts();
-    loadRecentlySearchedUsers();
+
+    const loadData = async () => {
+      try {
+        const token = await AsyncStorage.getItem('token');
+        if (!token) {
+          setUser(NO_USER);
+          return;
+        }
+        loadProfileInfo(token);
+        loadAvatar(token);
+        loadCover(token);
+        loadInstaPosts(token);
+        loadRecentlySearchedUsers();
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    loadData();
   }, [userId]);
 
   return (
@@ -155,7 +185,15 @@ const AuthProvider: React.FC = ({children}) => {
           setUser({...user, userId: id, username});
         },
         logout: () => {
-          setUser(NO_USER);
+          try {
+            new Promise(() => {
+              AsyncStorage.removeItem('token');
+            }).then(() => {
+              setUser(NO_USER);
+            });
+          } catch (err) {
+            console.log(err);
+          }
         },
         recentSearches,
       }}>