A minimal React application demonstrating the Rehive SDK v4 authentication features.
- User Authentication: Login and logout functionality
- Session Management: Automatic session handling and persistence
- User Details: Display authenticated user information
- Error Handling: Display authentication errors
- React Integration: Using AuthProvider and useAuth hook
- Storage Options: Configurable storage adapters
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser:
- Navigate to
http://localhost:5173 - Enter your Rehive credentials to test the authentication flow
- Navigate to
The demo is configured to use:
- API Base URL:
https://api.rehive.com(update inApp.tsxfor your environment) - Storage:
memory(data is not persisted between browser sessions) - Cross-tab sync: Disabled for simplicity
import { AuthProvider, useAuth } from 'rehive/react'
function App() {
return (
<AuthProvider
config={{
baseUrl: 'https://api.rehive.com',
storage: 'memory',
enableCrossTabSync: false,
}}
>
<LoginForm />
</AuthProvider>
)
}
function LoginForm() {
const { authUser, authLoading, authError, login, logout } = useAuth()
const handleLogin = async (credentials) => {
await login({
user: credentials.email,
password: credentials.password,
company: credentials.company,
})
}
// ... rest of component
}import { createAuth } from 'rehive/auth'
import { createUserApi } from 'rehive/user'
const auth = createAuth({ baseUrl: 'https://api.rehive.com', storage: 'memory' })
const user = createUserApi({ auth })
await auth.login({ user: '[email protected]', password: 'pass', company: 'myco' })
const profile = await user.userRetrieve()// In-memory (not persisted)
storage: 'memory'
// localStorage (browser, persisted)
storage: 'local'
// React Native AsyncStorage
import { AsyncStorageAdapter } from 'rehive'
import AsyncStorage from '@react-native-async-storage/async-storage'
storage: new AsyncStorageAdapter(AsyncStorage)npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
demo/
├── src/
│ ├── App.tsx # Main app component with SDK integration
│ ├── App.css # Styling
│ ├── main.tsx # React app entry point
│ └── vite-env.d.ts # Vite type definitions
├── package.json # Dependencies and scripts
└── README.md # This file