Switch to JSON webtoken login format

App.tsx

@@ -10,6 +10,7 @@ import DrawerScreenSettings from "./src/components/DrawerSettings/DrawerScreenSe
 import Home from "./src/routes/Home/Home";
 import Login from "./src/routes/Login/Login";
 import Register from "./src/routes/Register/Register";
+import Onboarding from "./src/routes/Onboarding/Onboarding";
 
 const Drawer = createDrawerNavigator();
 
@@ -25,6 +26,7 @@ export default function App() {
           <Drawer.Screen name="Home" component={Home} />
           <Drawer.Screen name="Login" component={Login} />
           <Drawer.Screen name="Register" component={Register} />
+          <Drawer.Screen name="Onboarding" component={Onboarding} />
         </Drawer.Navigator>
       </NavigationContainer>
     </Provider>

src/components/Api/Api.tsx

@@ -37,19 +37,41 @@ export function UserRegister(register: RegistrationParams) {
 
 export function UserLogin(user: LoginParams) {
   return instance
-    .post("/api/v1/accounts/token/login/", user)
+    .post("/api/v1/accounts/jwt/create/", user)
     .then(async (response) => {
-      AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      console.log(response.data.access, response.data.refresh);
-      return [true, JSON.stringify(response.data.auth_token)];
+      AsyncStorage.setItem(
+        "access_token",
+        JSON.stringify(response.data.access)
+      );
+      AsyncStorage.setItem(
+        "refresh_token",
+        JSON.stringify(response.data.refresh)
+      );
+      return [
+        true,
+        JSON.stringify(response.data.access),
+        JSON.stringify(response.data.refresh),
+      ];
     })
     .catch((error) => {
-      console.log(
+      console.log("Login Failed:" + error.response.data);
-        "Login Failed: " + error.response.status + " " + error.response.data
-      );
       return [false, error.response.data];
     });
 }
 
+export function TokenRefresh(token: string) {
+  return instance
+    .post("/api/v1/accounts/jwt/refresh/", token)
+    .then(async (response) => {
+      AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      return true;
+    })
+    .catch((error) => {
+      console.log("Login Failed: " + error);
+      return false;
+    });
+}
 export async function UserInfo() {
   const token = JSON.parse((await AsyncStorage.getItem("token")) || "{}");
   return instance

src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Text, Pressable, GestureResponderEvent } from "react-native";
+import { Pressable, GestureResponderEvent } from "react-native";
 import styles from "../../styles";
 
 export interface props {

src/components/ParseError/ParseError.tsx

@@ -1,18 +1,24 @@
 export default function ParseError(text: string) {
-  return text
+  if (text) {
-    .replaceAll(/[{}()"]/g, " ")
+    return text
-    .replaceAll(/,/g, "\n")
+      .replaceAll(/[{}()"]/g, " ")
-    .replaceAll("[", "")
+      .replaceAll(/,/g, "\n")
-    .replaceAll("]", "")
+      .replaceAll("[", "")
-    .replaceAll(".", "");
+      .replaceAll("]", "")
+      .replaceAll(".", "");
+  }
+  return "";
 }
 
 export function ParseLoginError(text: string) {
-  return text
+  if (text) {
-    .replaceAll(/[{}()"]/g, " ")
+    return text
-    .replaceAll(/,/g, "\n")
+      .replaceAll(/[{}()"]/g, " ")
-    .replaceAll("[", "")
+      .replaceAll(/,/g, "\n")
-    .replaceAll("]", "")
+      .replaceAll("[", "")
-    .replaceAll(".", "")
+      .replaceAll("]", "")
-    .replaceAll("non_field_errors", "");
+      .replaceAll(".", "")
+      .replaceAll("non_field_errors", "");
+  }
+  return "";
 }

src/features/redux/slices/AuthSlice/AuthSlice.tsx

@@ -8,12 +8,14 @@ export const AuthSlice = createSlice({
       uid: "",
       username: "",
       full_name: "",
-      token: "",
+      refresh_token: "",
+      access_token: "",
     },
   },
   reducers: {
     setToken: (state, action) => {
-      state.creds.token = action.payload;
+      state.creds.access_token = action.payload.access_token;
+      state.creds.refresh_token = action.payload.refresh_token;
     },
     setUser: (state, action) => {
       state.creds = {
@@ -21,7 +23,8 @@ export const AuthSlice = createSlice({
         uid: action.payload.uid,
         username: action.payload.username,
         full_name: action.payload.full_name,
-        token: action.payload.token,
+        access_token: action.payload.access_token,
+        refresh_token: action.payload.refresh_token,
       };
     },
     clear: (state) => {
@@ -30,7 +33,8 @@ export const AuthSlice = createSlice({
         uid: "",
         username: "",
         full_name: "",
-        token: "",
+        refresh_token: "",
+        access_token: "",
       };
     },
   },

src/routes/Home/Home.tsx

@@ -3,6 +3,10 @@ import styles from "../../styles";
 import { View, Text } from "react-native";
 import { useSelector } from "react-redux";
 import { RootState } from "../../features/redux/Store/Store";
+import Button from "../../components/Button/Button";
+import { UserLogin } from "../../components/Api/Api";
+import { colors } from "../../styles";
+import axios from "axios";
 
 export default function Home() {
   const creds = useSelector((state: RootState) => state.auth.creds);
@@ -10,7 +14,6 @@ export default function Home() {
     <View style={styles.background}>
       <Text style={styles.text_white_large}>Template Homepage</Text>
       <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
-      <Text style={styles.text_white_tiny}>Token: {creds.token}</Text>
     </View>
   );
 }

src/routes/Login/Login.tsx

@@ -7,8 +7,7 @@ import {
   NativeSyntheticEvent,
   TextInputChangeEventData,
 } from "react-native";
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
-import { RootState } from "../../features/redux/Store/Store";
 import { setToken } from "../../features/redux/slices/AuthSlice/AuthSlice";
 import { colors } from "../../styles";
 import { useState } from "react";
@@ -22,7 +21,6 @@ import { ParseLoginError } from "../../components/ParseError/ParseError";
 export default function Login() {
   const navigation = useNavigation<RootDrawerParamList>();
   const dispatch = useDispatch();
-  const creds = useSelector((state: RootState) => state.auth.creds);
   const [user, setUser] = useState({
     username: "",
     password: "",
@@ -82,9 +80,19 @@ export default function Login() {
             }).then((result) => {
               if (result[0]) {
                 setUser({ ...user, username: "", password: "", error: "" });
-                console.log("Token:", result[1]);
+                console.log(
-                dispatch(setToken(result[1]));
+                  "Access Token:",
-                navigation.navigate("Home");
+                  result[1],
+                  "\nRefresh Token:",
+                  result[2]
+                );
+                dispatch(
+                  setToken({
+                    access_token: result[1],
+                    refresh_token: result[2],
+                  })
+                );
+                navigation.navigate("Onboarding");
               } else {
                 setUser({
                   ...user,

src/routes/Onboarding/Onboarding.tsx

@@ -1,109 +1,16 @@
 import * as React from "react";
 import styles from "../../styles";
-import {
+import { View, Text } from "react-native";
-  View,
-  Text,
-  TextInput,
-  NativeSyntheticEvent,
-  TextInputChangeEventData,
-} from "react-native";
-import { useSelector, useDispatch } from "react-redux";
-import { RootState } from "../../features/redux/Store/Store";
-import {
-  setUser,
-  clear,
-} from "../../features/redux/slices/AuthSlice/AuthSlice";
-import { colors } from "../../styles";
-import { useState } from "react";
-import LoginIcon from "../../icons/LoginIcon/LoginIcon";
-import Button from "../../components/Button/Button";
 import { useNavigation } from "@react-navigation/native";
 import { RootDrawerParamList } from "../../interfaces/Interfaces";
-import { UserLogin } from "../../components/Api/Api";
-import { ParseLoginError } from "../../components/ParseError/ParseError";
-
 export default function Onboarding() {
   const navigation = useNavigation<RootDrawerParamList>();
   // const dispatch = useDispatch();
   // const creds = useSelector((state: RootState) => state.auth.creds);
-  const [user, setUser] = useState({
-    username: "",
-    password: "",
-    error: "",
-  });
   return (
     <View style={styles.background}>
       <View style={styles.container}>
-        <View
+        <Text style={styles.text_white_medium}>Template Onboarding Page</Text>
-          style={{
-            paddingVertical: 4,
-            marginBottom: 16,
-            borderRadius: 4,
-            width: "90%",
-            backgroundColor: colors.blue_1,
-          }}
-        />
-        <View style={styles.flex_row}>
-          <LoginIcon size={32} />
-          <Text style={styles.text_white_large}>Student Login</Text>
-        </View>
-
-        <View style={{ paddingVertical: 8 }} />
-        <TextInput
-          style={styles.text_input}
-          placeholder="Username"
-          placeholderTextColor="white"
-          autoCapitalize="none"
-          value={user.username}
-          onChange={(
-            e: NativeSyntheticEvent<TextInputChangeEventData>
-          ): void => {
-            setUser({ ...user, username: e.nativeEvent.text });
-          }}
-        />
-        <View style={{ paddingVertical: 4 }} />
-        <TextInput
-          style={styles.text_input}
-          placeholder="Password"
-          placeholderTextColor="white"
-          secureTextEntry={true}
-          value={user.password}
-          onChange={(
-            e: NativeSyntheticEvent<TextInputChangeEventData>
-          ): void => {
-            setUser({ ...user, password: e.nativeEvent.text });
-          }}
-        />
-        <View style={{ paddingVertical: 2 }} />
-        <Text style={styles.text_white_small}>{user.error}</Text>
-        <View style={{ paddingVertical: 4 }} />
-        <Button
-          onPress={async () => {
-            await UserLogin({
-              username: user.username,
-              password: user.password,
-            }).then((result) => {
-              if (result[0]) {
-                setUser({ ...user, username: "", password: "", error: "" });
-                navigation.navigate("Home");
-              } else {
-                setUser({
-                  ...user,
-                  error: ParseLoginError(JSON.stringify(result[1])),
-                });
-              }
-            });
-          }}
-          color={colors.blue_3}
-        >
-          <Text style={styles.text_white_small}>Login</Text>
-        </Button>
-        <Button
-          onPress={() => navigation.navigate("Register")}
-          color={colors.blue_3}
-        >
-          <Text style={styles.text_white_small}>Register</Text>
-        </Button>
       </View>
     </View>
   );