Animated the container and added revalidation of credentials on app reopen

src/components/AnimatedContainer/AnimatedContainer.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import { MotiView } from "moti";
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function AnimatedContainer(props: props) {
+  return (
+    <MotiView
+      style={styles.container}
+      from={{ opacity: 0, backgroundColor: colors.orange_1 }}
+      animate={{ opacity: 1, backgroundColor: colors.blue_2 }}
+      transition={{ type: "timing", duration: 300 }}
+    >
+      {props.children}
+    </MotiView>
+  );
+}

src/components/Api/Api.tsx

@@ -21,8 +21,28 @@ const instance = axios.create({
 
 // App APIs
 
-// User APIs
+// Token Handling
+export async function getAccessToken() {
+  const accessToken = await AsyncStorage.getItem("access_token");
+  return accessToken;
+}
 
+export async function getRefreshToken() {
+  const refreshToken = await AsyncStorage.getItem("refresh_token");
+  return refreshToken;
+}
+
+export async function setAccessToken(access: string) {
+  await AsyncStorage.setItem("access_token", access);
+  return true;
+}
+
+export async function setRefreshToken(refresh: string) {
+  await AsyncStorage.setItem("refresh_token", refresh);
+  return true;
+}
+
+// User APIs
 export function UserRegister(register: RegistrationParams) {
   console.log(JSON.stringify(register));
   return instance
@@ -39,15 +59,14 @@ export function UserLogin(user: LoginParams) {
   return instance
     .post("/api/v1/accounts/jwt/create/", user)
     .then(async (response) => {
-      console.log(response.data.access, response.data.refresh);
-      AsyncStorage.setItem(
-        "access_token",
-        JSON.stringify(response.data.access)
-      );
-      AsyncStorage.setItem(
-        "refresh_token",
-        JSON.stringify(response.data.refresh)
+      console.log(
+        "Access Token:",
+        response.data.access,
+        "\nRefresh Token:",
+        response.data.refresh
       );
+      setAccessToken(response.data.access);
+      setRefreshToken(response.data.refresh);
       return [
         true,
         JSON.stringify(response.data.access),
@@ -60,28 +79,41 @@ export function UserLogin(user: LoginParams) {
     });
 }
 
-export function TokenRefresh(token: string) {
+export async function TokenRefresh() {
+  const refresh = await getRefreshToken();
+  // console.log("Refresh token", refresh);
   return instance
-    .post("/api/v1/accounts/jwt/refresh/", token)
+    .post("/api/v1/accounts/jwt/refresh/", {
+      refresh: refresh,
+    })
     .then(async (response) => {
-      AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
-      return true;
+      setAccessToken(response.data.access);
+      /*console.log(
+        "Token refresh success! New Access Token",
+        response.data.access
+      );*/
+      return [true, getAccessToken()];
     })
     .catch((error) => {
-      console.log("Login Failed: " + error);
-      return false;
+      console.log("Refresh Failed: " + JSON.stringify(error.response.data));
+      return [false, error.response.data];
     });
 }
 export async function UserInfo() {
-  const token = JSON.parse((await AsyncStorage.getItem("token")) || "{}");
+  const accessToken = await getAccessToken();
   return instance
     .get("/api/v1/accounts/users/me/", {
       headers: {
-        Authorization: "Token " + token,
+        Authorization: `Bearer ${accessToken}`,
       },
     })
     .then((response) => {
+      console.log(JSON.stringify(response.data));
       return response.data;
+    })
+    .catch((error) => {
+      console.log("User Info Error", error.response.data);
+      return [false, error.response.data];
     });
 }
 

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -11,6 +11,7 @@ import HomeIcon from "../../icons/HomeIcon/HomeIcon";
 import LoginIcon from "../../icons/LoginIcon/LoginIcon";
 import SignupIcon from "../../icons/SignupIcon/SignupIcon";
 import DrawerButton from "../Button/DrawerButton";
+import AddIcon from "../../icons/AddIcon/AddIcon";
 
 export default function CustomDrawerContent(props: {}) {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -52,6 +53,15 @@ export default function CustomDrawerContent(props: {}) {
         <SignupIcon size={32} />
         <Text style={styles.text_white_medium}>Register</Text>
       </DrawerButton>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Revalidation");
+        }}
+      >
+        <AddIcon size={32} />
+        <Text style={styles.text_white_medium}>Revalidation</Text>
+      </DrawerButton>
     </DrawerContentScrollView>
   );
 }

src/routes/Home/Home.tsx

@@ -7,13 +7,16 @@ import Button from "../../components/Button/Button";
 import { UserLogin } from "../../components/Api/Api";
 import { colors } from "../../styles";
 import axios from "axios";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function Home() {
   const creds = useSelector((state: RootState) => state.auth.creds);
   return (
     <View style={styles.background}>
-      <Text style={styles.text_white_large}>Template Homepage</Text>
-      <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
+      <AnimatedContainer>
+        <Text style={styles.text_white_large}>Template Homepage</Text>
+        <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
+      </AnimatedContainer>
     </View>
   );
 }

src/routes/Login/Login.tsx

@@ -17,6 +17,7 @@ import { useNavigation } from "@react-navigation/native";
 import { RootDrawerParamList } from "../../interfaces/Interfaces";
 import { UserLogin } from "../../components/Api/Api";
 import { ParseLoginError } from "../../components/ParseError/ParseError";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function Login() {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -28,7 +29,7 @@ export default function Login() {
   });
   return (
     <View style={styles.background}>
-      <View style={styles.container}>
+      <AnimatedContainer>
         <View
           style={{
             paddingVertical: 4,
@@ -80,12 +81,12 @@ export default function Login() {
             }).then((result) => {
               if (result[0]) {
                 setUser({ ...user, username: "", password: "", error: "" });
-                console.log(
+                /*console.log(
                   "Access Token:",
                   result[1],
                   "\nRefresh Token:",
                   result[2]
-                );
+                );*/
                 dispatch(
                   setToken({
                     access_token: result[1],
@@ -111,7 +112,7 @@ export default function Login() {
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
-      </View>
+      </AnimatedContainer>
     </View>
   );
 }

src/routes/Register/Register.tsx

@@ -17,6 +17,7 @@ import SignupIcon from "../../icons/SignupIcon/SignupIcon";
 import { UserRegister } from "../../components/Api/Api";
 import IsNumber from "../../components/IsNumber/IsNumber";
 import ParseError from "../../components/ParseError/ParseError";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function Register() {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -33,7 +34,7 @@ export default function Register() {
   });
   return (
     <View style={styles.background}>
-      <View style={styles.container}>
+      <AnimatedContainer>
         <View
           style={{
             paddingVertical: 4,
@@ -167,7 +168,7 @@ export default function Register() {
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
-      </View>
+      </AnimatedContainer>
     </View>
   );
 }

src/routes/Revalidation/Revalidation.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import styles from "../../styles";
+import { View, Text, ActivityIndicator } from "react-native";
+import Button from "../../components/Button/Button";
+import { TokenRefresh, UserInfo, UserLogin } from "../../components/Api/Api";
+import axios from "axios";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../features/redux/Store/Store";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import { MotiView } from "moti";
+import { colors } from "../../styles";
+import { useEffect, useState } from "react";
+import { useNavigation } from "@react-navigation/native";
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import { setUser } from "../../features/redux/slices/AuthSlice/AuthSlice";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+
+export default function Revalidation() {
+  const dispatch = useDispatch();
+  const navigation = useNavigation<RootDrawerParamList>();
+  const creds = useSelector((state: RootState) => state.auth.creds);
+  console.log(JSON.stringify(creds));
+  const [state, setState] = useState("Checking for existing session");
+  useEffect(() => {
+    setState("Previous session found");
+    TokenRefresh().then(async (response) => {
+      if (response[0]) {
+        await dispatch(setUser(await UserInfo()));
+        setTimeout(() => {
+          navigation.navigate("Home");
+        }, 700);
+      } else {
+        setState("Session expired");
+        setTimeout(() => {
+          navigation.navigate("Login");
+        }, 700);
+      }
+    });
+  }, []);
+
+  return (
+    <View style={styles.background}>
+      <AnimatedContainer>
+        <View style={{ paddingVertical: 8 }} />
+        <ActivityIndicator size={96} color={colors.blue_1} />
+        <Text style={styles.text_white_medium}>{state}</Text>
+      </AnimatedContainer>
+    </View>
+  );
+}