import React, { useState, useEffect } from 'react'; import { account } from './lib/appwrite'; import { Models, ID } from 'appwrite'; import MainApp from './MainApp'; const App: React.FC = () => { const [loggedInUser, setLoggedInUser] = useState | null>(null); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [name, setName] = useState(''); useEffect(() => { const checkUserSession = async () => { try { const user = await account.get(); setLoggedInUser(user); } catch { setLoggedInUser(null); } }; checkUserSession(); }, []); const login = async () => { try { await account.createEmailPasswordSession(email, password); const user = await account.get(); setLoggedInUser(user); alert('Logged in successfully!'); } catch (error: any) { alert(`Login failed: ${error.message}`); } }; const register = async () => { try { await account.create(ID.unique(), email, password, name); await login(); alert('Registered and logged in successfully!'); } catch (error: any) { alert(`Registration failed: ${error.message}`); } }; const logout = async () => { try { await account.deleteSession('current'); setLoggedInUser(null); alert('Logged out successfully!'); } catch (error: any) { alert(`Logout failed: ${error.message}`); } }; if (loggedInUser) { console.log(loggedInUser.name, loggedInUser.email); } return (

Appwrite React Authentication

{loggedInUser ? ( <> ) : (

Not logged in

)}

setEmail(e.target.value)} style={{ padding: "8px" }} /> setPassword(e.target.value)} style={{ padding: "8px" }} /> setName(e.target.value)} style={{ padding: "8px" }} />

); }; export default App;