[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, 21 insertions, 3 deletions

diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 5c569ec3..c0dc14b7 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useState} from 'react';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {
@@ -17,6 +17,8 @@ import {OnboardingStackParams} from '../../routes/onboarding';
 import {AuthContext} from '../../routes/authentication';
 import {Background, TaggInput, SubmitButton} from '../../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../../constants';
+import AsyncStorage from '@react-native-community/async-storage';
+import {UserType} from '../../types';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
@@ -34,6 +36,12 @@ interface LoginProps {
 const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   // ref for focusing on input fields
   const inputRef = useRef();
+
+  const NO_USER: UserType = {
+    userId: '',
+    username: '',
+  };
+
   // login form state
   const [form, setForm] = React.useState({
     username: '',
@@ -41,10 +49,11 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
     isValidUser: false,
     isValidPassword: false,
     attemptedSubmit: false,
+    token: '',
   });
   // determines if user is logged in
   const {login} = React.useContext(AuthContext);
-
+  const [user, setUser] = useState<UserType>(NO_USER);
   /**
    * Updates the state of username. Also verifies the input of the username field by ensuring proper length and appropriate characters.
    */
@@ -101,6 +110,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   /**
            * Handler for the Let's Start button or the Go button on the keyboard.
             Makes a POST request to the Django login API and presents Alerts based on the status codes that the backend returns.
+           * Stores token received in the response, into client's AsynStorage
            */
   const handleLogin = async () => {
     if (!form.attemptedSubmit) {
@@ -122,8 +132,16 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
 
         let statusCode = response.status;
         let data = await response.json();
+
         if (statusCode === 200) {
-          login(data.UserID, username);
+          //Stores token received in the response into client's AsynStorage
+          try {
+            await AsyncStorage.setItem('token', data.token);
+            login(data.UserID, username);
+          } catch (err) {
+            setUser(NO_USER);
+            Alert.alert('Auth token storage failed', 'Please login again!');
+          }
         } else if (statusCode === 401) {
           Alert.alert(
             'Login failed 😔',