Get TinyCloud running in your browser app and store your first piece of data.
Prerequisites
Before you begin, make sure you have:
- Node.js 18+ installed
- A modern browser (Chrome, Firefox, Safari, Edge)
- A wallet extension like MetaMask installed in your browser
TinyCloud uses Sign-In with Ethereum (SIWE) for authentication. Your wallet signs a message to prove ownership of your address - no transaction or gas fees required.
Installation
Install the TinyCloud Web SDK:
npm install @tinycloudlabs/web-sdk
Create a new TinyCloud instance in your application.
Quick
import { TinyCloudWeb } from '@tinycloudlabs/web-sdk';
const tc = new TinyCloudWeb({
notifications: { popups: true },
persistence: { autoResumeSession: true }
});
Explained
import { TinyCloudWeb } from '@tinycloudlabs/web-sdk';
// Create a TinyCloud instance with configuration
const tc = new TinyCloudWeb({
// Show popup notifications for important events
notifications: { popups: true },
// Automatically restore previous sessions on page reload
persistence: { autoResumeSession: true }
});
Authenticate the user by connecting their wallet and signing a message.
Quick
const session = await tc.signIn();
console.log('Signed in as:', session.address);
Explained
// signIn() triggers the wallet connection flow:
// 1. Prompts user to connect their wallet (e.g., MetaMask)
// 2. Requests signature on a SIWE message
// 3. Establishes an authenticated session
const session = await tc.signIn();
// The session contains the user's Ethereum address
console.log('Signed in as:', session.address);
With autoResumeSession: true, returning users skip the sign-in prompt if their session is still valid.
Save data to your user’s personal space.
Quick
await tc.storage.put('profile', {
name: 'Alice',
joined: new Date().toISOString()
});
console.log('Data saved!');
Explained
// Store a JSON object under the key 'profile'
// Data is encrypted and stored in the user's space
await tc.storage.put('profile', {
name: 'Alice',
joined: new Date().toISOString()
});
console.log('Data saved!');
// Data is now securely stored and only accessible
// by this user (or those they delegate access to)
Read the data back from storage.
Quick
const profile = await tc.storage.get('profile');
console.log('Retrieved:', profile);
Explained
// Retrieve the data stored under 'profile'
const profile = await tc.storage.get('profile');
// Returns the original object: { name: 'Alice', joined: '...' }
console.log('Retrieved:', profile);
Complete Example
Here is the full working code you can copy into your project:
import { TinyCloudWeb } from '@tinycloudlabs/web-sdk';
async function main() {
// Initialize
const tc = new TinyCloudWeb({
notifications: { popups: true },
persistence: { autoResumeSession: true }
});
// Sign in
const session = await tc.signIn();
console.log('Signed in as:', session.address);
// Store data
await tc.storage.put('profile', {
name: 'Alice',
joined: new Date().toISOString()
});
console.log('Data saved!');
// Retrieve data
const profile = await tc.storage.get('profile');
console.log('Retrieved:', profile);
}
main().catch(console.error);
Expected Output
When you run the code successfully, you should see:
Signed in as: 0x1234...abcd
Data saved!
Retrieved: { name: 'Alice', joined: '2024-01-15T10:30:00.000Z' }
The wallet popup will appear twice during first sign-in: once to connect, and once to sign the authentication message.
Next Steps
Now that you have the basics working, explore these guides:
