feat: use zustand manage credentials globally

app/_layout.tsx

@@ -21,6 +21,7 @@ export default function RootLayout() {
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="login" options={{ title: "Login" }} />
+				<Stack.Screen name="feed_list" options={{title: "Feed List"}} />
         <Stack.Screen name="+not-found" />
       </Stack>
       <StatusBar style="auto" />

app/feed_list.tsx

@@ -0,0 +1,8 @@
+import { View } from 'react-native'
+
+export default function FeedListView() {
+  return (
+    <View>
+    </View>
+  )
+}

app/login.tsx

@@ -1,21 +1,20 @@
 import { TextInput, View, StyleSheet, Button } from 'react-native'
 import { useState } from 'react'
-import axios from 'axios'
+import { useRouter } from 'expo-router'
+import { useAuthStore } from '../store'
 
 export default function LoginView() {
 	const [username, setUsername] = useState('')
 	const [password, setPassword] = useState('')
+	const router = useRouter()
+	const { verify } = useAuthStore()	
 
 	async function login() {
-		console.log(username, password)
 		try {
-			const res = await axios.get("https://api.feedbin.com/v2/authentication.json", {
+			const res = await verify(username, password)
-				auth: {
+			if (!res) return
-					username,
+			// Navigate to feed list on successful login
-					password
+			router.push('/feed_list')
-				}
-			})
-			console.log(res.status)
 		} catch(e) {
 			console.log("error on verifing your credentials")
 			console.log(e)

package-lock.json

@@ -34,7 +34,8 @@
         "react-native-safe-area-context": "5.4.0",
         "react-native-screens": "~4.11.1",
         "react-native-web": "~0.20.0",
-        "react-native-webview": "13.13.5"
+        "react-native-webview": "13.13.5",
+        "zustand": "^5.0.6"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -12938,6 +12939,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.6.tgz",
+      "integrity": "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -37,7 +37,8 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
     "react-native-web": "~0.20.0",
-    "react-native-webview": "13.13.5"
+    "react-native-webview": "13.13.5",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

store/index.ts

@@ -0,0 +1,3 @@
+import useAuthStore from './useAuthStore'
+
+export { useAuthStore }

store/useAuthStore.ts

@@ -0,0 +1,32 @@
+import { create } from 'zustand'
+import axios from 'axios'
+
+type AuthState = {
+	credential?: {
+		username: string,
+		password: string
+	};
+	verify: (username: string, password: string) => Promise<boolean>
+}
+
+export default create<AuthState>(set => ({
+	verify: async (username: string, password: string): Promise<boolean> => {
+		try {
+			const res = await axios.get("https://api.feedbin.com/v2/authentication.json", {
+				auth: { username, password }
+			})
+
+			console.log("verifying")
+
+			if (res.status > 299) return false
+
+			set({
+				credential: { username, password }
+			})
+			return true
+		} catch(e) {
+			console.log(e)
+			return false
+		}
+	}
+}))