a good enough implementation using the device security system.

app.json

@@ -23,6 +23,14 @@
 		},
 		"web": {
 			"favicon": "./assets/favicon.png"
+		},
+		"plugins": [
+			[
+				"expo-local-authentication",
+				{
+					"faceIDPermission": "Allow B-Easy to use Face ID."
 				}
+			]
+		]
 	}
 }

src/components/BalanceContainer.tsx

 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
 import { images } from "@styles/Commons";
+import * as LocalAuthentication from "expo-local-authentication";
 import { useState } from "react";
 import { Image, TouchableOpacity } from "react-native";
 
@@ -9,6 +10,18 @@ type Props = { balance: number; label: string };
 const BalanceContainer = ({ label, balance }: Props) => {
 	const [showBalance, setShowBalance] = useState(false);
 
+	const handleLocalAuthentication = async () => {
+		console.log("handleLocalAuthentication :: start");
+		if (showBalance) {
+			return setShowBalance(false);
+		}
+		const result = await LocalAuthentication.authenticateAsync();
+		if (result.success) {
+			setShowBalance(true);
+		}
+		console.log("handleLocalAuthentication :: end", result);
+	};
+
 	return (
 		<Box
 			position={"relative"}
@@ -31,7 +44,7 @@ const BalanceContainer = ({ label, balance }: Props) => {
 			</Box>
 
 			<Box alignItems={"center"} gap={"s"}>
-				<TouchableOpacity onPress={() => setShowBalance(!showBalance)}>
+				<TouchableOpacity onPress={handleLocalAuthentication}>
 					<Box height={50} alignItems={"center"} justifyContent={"center"}>
 						{showBalance ? (
 							<Text fontSize={30} variant={"black"}>