docs: update example

Author: Tschucki

example/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "expo": "~49.0.7",
+    "expo-secure-store": "~12.3.1",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

example/src/App.tsx

@@ -1,24 +1,135 @@
 import * as React from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { AuthProvider, useAuth } from 'react-native-laravel-sanctum';
 
-import { StyleSheet, View } from 'react-native';
+function Login() {
+  const { login, updateUser, setUserIsAuthenticated } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = async () => {
+    const tokenObtained = await login(email, password, 'Test-Device');
+    if (tokenObtained) {
+      const user = await updateUser();
+      if (user !== null && user.id) {
+        setUserIsAuthenticated(true);
+      }
+    }
+  };
 
-export default function App() {
   return (
-    <View>
-      <View style={styles.container} />
+    <View style={styles.view}>
+      <Text style={styles.caption}>You are not logged in.</Text>
+      <TextInput
+        style={styles.textInput}
+        onChangeText={(text) => setEmail(text)}
+        value={email}
+        placeholder="Email"
+      />
+      <TextInput
+        style={styles.textInput}
+        onChangeText={(text) => setPassword(text)}
+        value={password}
+        secureTextEntry
+        placeholder="Password"
+      />
+      <Pressable style={styles.button} onPress={handleLogin}>
+        <Text style={styles.buttonText}>Login</Text>
+      </Pressable>
     </View>
   );
 }
 
+function Logout() {
+  const { logout, setUserIsAuthenticated, updateUser, currentUser } = useAuth();
+
+  const handleLogout = async () => {
+    const isLoggedOut = await logout();
+    if (isLoggedOut) {
+      setUserIsAuthenticated(false);
+      await updateUser();
+    }
+  };
+
+  return (
+    <View style={styles.view}>
+      {currentUser && (
+        <Text style={styles.caption}>
+          You are logged in as {currentUser.name}
+        </Text>
+      )}
+      <Pressable style={styles.button} onPress={handleLogout}>
+        <Text style={styles.buttonText}>Logout</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function Example() {
+  const { isAuthenticated } = useAuth();
+  return (
+    <View style={styles.view}>{isAuthenticated ? <Logout /> : <Login />}</View>
+  );
+}
+
+export default function App() {
+  const config = {
+    loginUrl: 'http://127.0.0.1:8000/api/sanctum/token',
+    logoutUrl: 'http://127.0.0.1:8000/api/logout',
+    userUrl: 'http://127.0.0.1:8000/api/user',
+  };
+
+  return (
+    <AuthProvider config={config}>
+      <View style={styles.container}>
+        <Example />
+        <StatusBar style="auto" />
+      </View>
+    </AuthProvider>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '#fff',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+  button: {
+    backgroundColor: '#f59e0b',
+    padding: 12,
+    minWidth: '80%',
+    borderRadius: 5,
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontWeight: '800',
+    letterSpacing: 0.5,
+    lineHeight: 20,
+    color: '#fff',
+  },
+  textInput: {
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 1,
+    minWidth: '80%',
+    padding: 10,
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  caption: {
+    marginBottom: 10,
+    fontWeight: '800',
+    letterSpacing: 0.5,
+    lineHeight: 20,
+    color: '#000',
+    textAlign: 'center',
+  },
+  view: {
+    padding: 15,
+    alignItems: 'center',
   },
 });

example/yarn.lock

@@ -3995,6 +3995,11 @@ expo-pwa@0.0.127:
     commander "2.20.0"
     update-check "1.5.3"
 
+expo-secure-store@~12.3.1:
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-12.3.1.tgz#7e5ba94f6e7374f132108c9feb5cc811568f3db6"
+  integrity sha512-XLIgWDiIuiR0c+AA4NCWWibAMHCZUyRcy+lQBU49U6rvG+xmd3YrBJfQjfqAPyLroEqnLPGTWUX57GyRsfDOQw==
+
 expo-status-bar@~1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.6.0.tgz#e79ffdb9a84d2e0ec9a0dc7392d9ab364fefa9cf"