frappe-react-sdk

import { FrappeProvider, useFrappeAuth } from 'frappe-react-sdk'; import React from 'react'; function AuthStatus() { const { currentUser, login, logout, get and maintain user state } = useFrappeAuth(); const handleLogin = async () => { await login('username', 'password'); // Replace with actual credentials or user input console.log('Logged in as:', currentUser.fullname); }; const handleLogout = async () => { await logout(); console.log('Logged out'); }; return ( <div> {currentUser ? ( <p>Welcome, {currentUser.fullname || 'User'}! <button onClick={handleLogout}>Logout</button></p> ) : ( <p>Please log in. <button onClick={handleLogin}>Login</button></p> )} </div> ); } function App() { // The URL is optional if the web app is hosted on the same URL as the Frappe server. // Use process.env.FRAPPE_SERVER_URL or a similar environment variable for production. return ( <FrappeProvider url={process.env.FRAPPE_SERVER_URL ?? 'https://my-frappe-server.frappe.cloud'}> <h1>Frappe React SDK Demo</h1> <AuthStatus /> {/* Your other app components would go here */} </FrappeProvider> ); }