Mansi/AuthenticationSdk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented offline authentication functionality with PIN setup and login.

Browse Source
This commit is contained in:
mansi-dev
2026-01-12 22:57:37 +05:30
parent e7ff64d3ab
commit 1723d072aa
2 changed files with 213 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
App.tsx
View File

@@ -1,165 +1,165 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
SafeAreaView, SafeAreaView,
} from 'react-native'; } from 'react-native';
import Ionicons from '@react-native-vector-icons/ionicons'; import Ionicons from '@react-native-vector-icons/ionicons';
const PIN_LENGTH = 4; const PIN_LENGTH = 4;
const App: React.FC = () => { const App: React.FC = () => {
const [pin, setPin] = useState(''); const [pin, setPin] = useState('');
const handlePress = (value: string) => { const handlePress = (value: string) => {
if (pin.length < PIN_LENGTH) { if (pin.length < PIN_LENGTH) {
setPin(pin + value); setPin(pin + value);
} }
}; };
const handleDelete = () => { const handleDelete = () => {
setPin(pin.slice(0, -1)); setPin(pin.slice(0, -1));
}; };
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<Text style={styles.title}>Verify Identity</Text> <Text style={styles.title}>Verify Identity</Text>
<Text style={styles.subtitle}> <Text style={styles.subtitle}>
Use PIN, Fingerprint or Face ID Use PIN, Fingerprint or Face ID
</Text> </Text>
{/* PIN DOTS */} {/* PIN DOTS */}
<View style={styles.pinRow}> <View style={styles.pinRow}>
{Array.from({ length: PIN_LENGTH }).map((_, i) => ( {Array.from({ length: PIN_LENGTH }).map((_, i) => (
<View <View
key={i} key={i}
style={[ style={[
styles.pinDot, styles.pinDot,
pin.length > i && styles.pinDotFilled, pin.length > i && styles.pinDotFilled,
]} ]}
/> />
))} ))}
</View> </View>
{/* BIOMETRIC OPTIONS */} {/* BIOMETRIC OPTIONS */}
<View style={styles.bioRow}> <View style={styles.bioRow}>
<TouchableOpacity style={styles.bioBtn}> <TouchableOpacity style={styles.bioBtn}>
<Ionicons name="finger-print" size={36} color="#2563EB" /> <Ionicons name="finger-print" size={36} color="#2563EB" />
<Text style={styles.bioText}>Fingerprint</Text> <Text style={styles.bioText}>Fingerprint</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.bioBtn}> <TouchableOpacity style={styles.bioBtn}>
<Ionicons name="happy-outline" size={36} color="#2563EB" /> <Ionicons name="happy-outline" size={36} color="#2563EB" />
<Text style={styles.bioText}>Face ID</Text> <Text style={styles.bioText}>Face ID</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{/* KEYPAD */} {/* KEYPAD */}
<View style={styles.keypad}> <View style={styles.keypad}>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'del'].map((item, index) => { {[1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'del'].map((item, index) => {
if (item === '') { if (item === '') {
return <View key={index} style={styles.key} />; return <View key={index} style={styles.key} />;
} }
if (item === 'del') { if (item === 'del') {
return ( return (
<TouchableOpacity <TouchableOpacity
key={index} key={index}
style={styles.key} style={styles.key}
onPress={handleDelete} onPress={handleDelete}
> >
<Ionicons <Ionicons
name="backspace-outline" name="backspace-outline"
size={26} size={26}
color="#333" color="#333"
/> />
</TouchableOpacity> </TouchableOpacity>
); );
} }
return ( return (
<TouchableOpacity <TouchableOpacity
key={index} key={index}
style={styles.key} style={styles.key}
onPress={() => handlePress(item.toString())} onPress={() => handlePress(item.toString())}
> >
<Text style={styles.keyText}>{item}</Text> <Text style={styles.keyText}>{item}</Text>
</TouchableOpacity> </TouchableOpacity>
); );
})} })}
</View> </View>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#F8FAFF', backgroundColor: '#F8FAFF',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 20, paddingHorizontal: 20,
}, },
title: { title: {
fontSize: 24, fontSize: 24,
fontWeight: '700', fontWeight: '700',
marginTop: 40, marginTop: 40,
color: '#111827', color: '#111827',
}, },
subtitle: { subtitle: {
fontSize: 14, fontSize: 14,
color: '#6B7280', color: '#6B7280',
marginTop: 6, marginTop: 6,
}, },
pinRow: { pinRow: {
flexDirection: 'row', flexDirection: 'row',
marginVertical: 28, marginVertical: 28,
}, },
pinDot: { pinDot: {
width: 14, width: 14,
height: 14, height: 14,
borderRadius: 7, borderRadius: 7,
borderWidth: 1.5, borderWidth: 1.5,
borderColor: '#2563EB', borderColor: '#2563EB',
marginHorizontal: 8, marginHorizontal: 8,
}, },
pinDotFilled: { pinDotFilled: {
backgroundColor: '#2563EB', backgroundColor: '#2563EB',
}, },
bioRow: { bioRow: {
flexDirection: 'row', flexDirection: 'row',
marginBottom: 30, marginBottom: 30,
}, },
bioBtn: { bioBtn: {
alignItems: 'center', alignItems: 'center',
marginHorizontal: 30, marginHorizontal: 30,
}, },
bioText: { bioText: {
marginTop: 6, marginTop: 6,
fontSize: 12, fontSize: 12,
color: '#374151', color: '#374151',
}, },
keypad: { keypad: {
width: '80%', width: '80%',
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'center', justifyContent: 'center',
}, },
key: { key: {
width: '33%', width: '33%',
height: 70, height: 70,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
keyText: { keyText: {
fontSize: 26, fontSize: 26,
fontWeight: '500', fontWeight: '500',
color: '#111827', color: '#111827',
}, },
}); });

181
src/screen/Home.tsx
View File

@@ -2,138 +2,105 @@ import React, { useEffect, useState } from 'react';
import { import {
View, View,
Text, Text,
TextInput,
Button,
Alert,
StyleSheet, StyleSheet,
FlatList,
TouchableOpacity,
Image,
SafeAreaView,
ActivityIndicator,
} from 'react-native'; } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
interface Item { const PIN_KEY = 'USER_PIN';
id: string;
title: string;
subtitle: string;
image: string;
}
const DATA: Item[] = [ const App: React.FC = () => {
{ const [pin, setPin] = useState<string>('');
id: '1', const [savedPin, setSavedPin] = useState<string | null>(null);
title: 'Food Delivery', const [loggedIn, setLoggedIn] = useState<boolean>(false);
subtitle: 'Fast & fresh food',
image: 'https://via.placeholder.com/150',
},
{
id: '2',
title: 'Groceries',
subtitle: 'Daily essentials',
image: 'https://via.placeholder.com/150',
},
{
id: '3',
title: 'Medicines',
subtitle: 'Health care items',
image: 'https://via.placeholder.com/150',
},
];
const Home: React.FC = () => {
const [loading, setLoading] = useState<boolean>(true);
const [list, setList] = useState<Item[]>([]);
useEffect(() => { useEffect(() => {
// Simulate API call loadPin();
setTimeout(() => {
setList(DATA);
setLoading(false);
}, 1000);
}, []); }, []);
const renderItem = ({ item }: { item: Item }) => ( const loadPin = async (): Promise<void> => {
<TouchableOpacity style={styles.card} activeOpacity={0.8}> const storedPin = await AsyncStorage.getItem(PIN_KEY);
<Image source={{ uri: item.image }} style={styles.image} /> setSavedPin(storedPin);
<View style={styles.textContainer}> };
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.subtitle}>{item.subtitle}</Text>
</View>
</TouchableOpacity>
);
if (loading) { const setUserPin = async (): Promise<void> => {
if (pin.length !== 4) {
Alert.alert('PIN must be 4 digits');
return;
}
await AsyncStorage.setItem(PIN_KEY, pin);
setSavedPin(pin);
setPin('');
Alert.alert('PIN set successfully');
};
const loginWithPin = (): void => {
if (pin === savedPin) {
setLoggedIn(true);
setPin('');
} else {
Alert.alert('Incorrect PIN');
}
};
const logout = (): void => {
setLoggedIn(false);
};
if (loggedIn) {
return ( return (
<View style={styles.loader}> <View style={styles.container}>
<ActivityIndicator size="large" color="#000" /> <Text style={styles.title}>Hi Dude!</Text>
<Button title="Logout" onPress={logout} />
</View> </View>
); );
} }
return ( return (
<SafeAreaView style={styles.container}> <View style={styles.container}>
<Text style={styles.header}>Home</Text> <Text style={styles.title}>
{savedPin ? 'Enter PIN' : 'Set PIN'}
</Text>
<FlatList <TextInput
data={list} style={styles.input}
keyExtractor={(item) => item.id} keyboardType="numeric"
renderItem={renderItem} secureTextEntry
contentContainerStyle={styles.list} maxLength={4}
showsVerticalScrollIndicator={false} value={pin}
onChangeText={setPin}
placeholder="Enter 4-digit PIN"
/> />
</SafeAreaView>
<Button
title={savedPin ? 'Login' : 'Save PIN'}
onPress={savedPin ? loginWithPin : setUserPin}
/>
</View>
); );
}; };
export default Home; export default App;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#F5F5F5', justifyContent: 'center',
}, padding: 20,
header: {
fontSize: 22,
fontWeight: '700',
margin: 16,
color: '#111',
},
list: {
paddingHorizontal: 16,
paddingBottom: 20,
},
card: {
flexDirection: 'row',
backgroundColor: '#FFF',
borderRadius: 12,
marginBottom: 12,
padding: 12,
alignItems: 'center',
shadowColor: '#000',
shadowOpacity: 0.1,
shadowRadius: 6,
elevation: 3,
},
image: {
width: 60,
height: 60,
borderRadius: 10,
marginRight: 12,
},
textContainer: {
flex: 1,
}, },
title: { title: {
fontSize: 16, fontSize: 22,
fontWeight: '600', marginBottom: 20,
color: '#000', textAlign: 'center',
}, },
subtitle: { input: {
fontSize: 13, borderWidth: 1,
color: '#666', padding: 12,
marginTop: 4, marginBottom: 20,
borderRadius: 5,
fontSize: 18,
textAlign: 'center',
}, },
loader: { });
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});