[Update] Complete login

Author: mibrahim2001

Diff for: package-lock.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "1.18.2",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",

Diff for: package.json

@@ -0,0 +1,15 @@
+import { View, Text, ActivityIndicator } from "react-native";
+import React from "react";
+import { lightColors } from "@rneui/base";
+
+const Loader = ({ styles }) => {
+  return (
+    <ActivityIndicator
+      style={styles}
+      size="large"
+      color={lightColors.primary}
+    />
+  );
+};
+
+export default Loader;

Diff for: src/components/Loader.js

@@ -25,7 +25,7 @@ const useAuth = () => {
       const loginUrl = API_BASE_URL + "/login";
       const loginData = { email: email, password: password };
       const user = await axios.post(loginUrl, loginData);
-      console.log("Successfully logged in: ", user);
+      return user.data;
     } catch (error) {
       throw error;
     } finally {

Diff for: src/hooks/useAuth.js

@@ -0,0 +1,42 @@
+import { View, Text } from "react-native";
+import React from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const useStorage = () => {
+  async function setLocalUser(user) {
+    try {
+      await AsyncStorage.setItem("user", JSON.stringify(user));
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async function getLocalUser() {
+    try {
+      const user = JSON.parse(await AsyncStorage.getItem("user"));
+      return user;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async function setAuthToken(authToken) {
+    try {
+      await AsyncStorage.setItem("authToken", authToken);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async function getAuthToken() {
+    try {
+      const authToken = await AsyncStorage.getItem("authToken");
+      return authToken;
+    } catch (error) {
+      throw error;
+    }
+  }
+  return { getAuthToken, setAuthToken, getLocalUser, setLocalUser };
+};
+
+export default useStorage;

Diff for: src/hooks/useStorage.js

@@ -10,10 +10,11 @@ const HomeStackScreen = () => {
     <HomeStack.Navigator
       screenOptions={{
         animation: "slide_from_right",
+        headerShown: false,
       }}
     >
       <HomeStack.Screen
-        name="Home"
+        name="HomeScreen"
         component={HomeScreen}
         options={{ headerShown: false }}
       />

Diff for: src/routes/HomeStack.jsx

@@ -7,11 +7,9 @@ import HomeStackScreen from "./HomeStack";
 const Tab = createBottomTabNavigator();
 const TabNavigation = () => {
   return (
-    <NavigationContainer>
-      <Tab.Navigator>
-        <Tab.Screen name="Home" component={HomeStackScreen} />
-      </Tab.Navigator>
-    </NavigationContainer>
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen name="Home" component={HomeStackScreen} />
+    </Tab.Navigator>
   );
 };
 

Diff for: src/routes/TabNavigation.jsx

@@ -3,10 +3,12 @@ import { useState } from "react";
 import { Button, Input, Text } from "@rneui/themed";
 import { COLORS } from "../../constants";
 import useAuth from "../../hooks/useAuth";
+import useStorage from "../../hooks/useStorage";
 
 const Login = ({ navigation }) => {
   // Variables
   const { login } = useAuth();
+  const { setAuthToken, setLocalUser } = useStorage();
   const [email, setEmail] = useState({ value: null, errorMessage: null });
   const [password, setPassword] = useState({ value: null, errorMessage: null });
 
@@ -15,7 +17,7 @@ const Login = ({ navigation }) => {
     navigation.navigate("Register");
   };
 
-  const handleLoginPress = () => {
+  const handleLoginPress = async () => {
     setEmail({ ...email, errorMessage: null });
     setPassword({ ...password, errorMessage: null });
     if (!email.value) {
@@ -29,9 +31,13 @@ const Login = ({ navigation }) => {
     }
 
     try {
-      login(email.value, password.value);
+      const userData = await login(email.value, password.value);
+      console.log(userData);
+      await setAuthToken(userData.token);
+      await setLocalUser(userData.user);
+      navigation.navigate("TabNavigation");
     } catch (error) {
-      console.error("Error while loggin in: ", error);
+      console.error("Error while logging in: ", error);
     }
   };
 

Diff for: src/screens/auth/LoginScreen.jsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { Button, Input, Text } from "@rneui/themed";
 import { COLORS } from "../../constants";
 import useAuth from "../../hooks/useAuth";
+import Loader from "../../components/Loader";
 
 const Register = ({ navigation }) => {
   // Variables
@@ -152,14 +153,19 @@ const Register = ({ navigation }) => {
           }
           secureTextEntry
         />
-
-        <Button
-          color="primary"
-          title={"Register"}
-          size="lg"
-          containerStyle={{ width: 200, borderRadius: 5, marginTop: 20 }}
-          onPress={handleRegisterPress}
-        />
+        <View style={{ marginTop: 20 }}>
+          {loading ? (
+            <Loader />
+          ) : (
+            <Button
+              color="primary"
+              title={"Register"}
+              size="lg"
+              containerStyle={{ width: 200, borderRadius: 5 }}
+              onPress={handleRegisterPress}
+            />
+          )}
+        </View>
       </View>
       <Text style={{ paddingVertical: 10 }}>
         Already have an account?{" "}

Diff for: src/screens/auth/RegisterScreen.jsx

@@ -2,7 +2,11 @@ import { View, Text } from "react-native";
 import React from "react";
 
 const HomeScreen = () => {
-  return <View></View>;
+  return (
+    <View>
+      <Text>Home</Text>
+    </View>
+  );
 };
 
 export default HomeScreen;