react_native_typescript_auth_login_logout_quickstart.ts

1import React, { useState } from 'react';
2import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
3import { AuthProvider, useAuth } from 'react-native-ts-authentication';
4
5const AuthScreen = () => {
6  const [email, setEmail] = useState<string>('');
7  const [password, setPassword] = useState<string>('');
8  const { login, logout, user, isAuthenticated } = useAuth();
9
10  const handleLogin = async () => {
11    try {
12      await login(email, password);
13      console.log('User logged in successfully');
14    } catch (error) {
15      console.error('Login failed', error);
16    }
17  };
18
19  if (isAuthenticated) {
20    return (
21      <View style={styles.container}>
22        <Text>Welcome, {user?.email}!</Text>
23        <Button title="Logout" onClick={logout} />
24      </View>
25    );
26  }
27
28  return (
29    <View style={styles.container}>
30      <TextInput
31        placeholder="Email"
32        value={email}
33        onChangeText={setEmail}
34        style={styles.input}
35      />
36      <TextInput
37        placeholder="Password"
38        value={password}
39        secureTextEntry
40        onChangeText={setPassword}
41        style={styles.input}
42      />
43      <Button title="Login" onPress={handleLogin} />
44    </View>
45  );
46};
47
48export default function App() {
49  return (
50    <AuthProvider>
51      <AuthScreen />
52    </AuthProvider>
53  );
54}
55
56const styles = StyleSheet.create({
57  container: {
58    flex: 1,
59    justifyContent: 'center',
60    padding: 20,
61  },
62  input: {
63    height: 40,
64    borderColor: 'gray',
65    borderWidth: 1,
66    marginBottom: 10,
67    paddingHorizontal: 8,
68  },
69});