feat: use zustand manage credentials globally

This commit is contained in:
Astrian Zheng 2025-06-30 16:09:49 +10:00
parent dde32df979
commit d063c69172
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
7 changed files with 85 additions and 11 deletions

View File

@ -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" />

8
app/feed_list.tsx Normal file
View File

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

View File

@ -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", {
auth: {
username,
password
}
})
console.log(res.status)
const res = await verify(username, password)
if (!res) return
// Navigate to feed list on successful login
router.push('/feed_list')
} catch(e) {
console.log("error on verifing your credentials")
console.log(e)

32
package-lock.json generated
View File

@ -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
}
}
}
}
}

View File

@ -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",

3
store/index.ts Normal file
View File

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

32
store/useAuthStore.ts Normal file
View File

@ -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
}
}
}))