Overview
ClipSync uses session-based synchronization to enable real-time clipboard sharing across multiple devices. Each session is identified by a unique 5-character alphanumeric code that devices use to join and sync clipboard content.
How Sessions Work
Sessions are the core mechanism for connecting devices in ClipSync:
- Each session has a unique 5-character code (e.g.,
A3B7K)
- Multiple devices can join the same session using the code
- All devices in a session see real-time updates when content is added
- Sessions persist in the Supabase database until explicitly deleted
Creating a New Session
When you first send clipboard content without joining an existing session, ClipSync automatically creates a new session for you.
Session Code Generation
The session code is generated using a random combination of uppercase letters (A-Z) and numbers (0-9):
src/service/doc.service.js
export const createSession = async (setSessionCode) => {
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let newCode = "";
for (let i = 0; i < 5; i++) {
newCode += characters.charAt(Math.floor(Math.random() * characters.length));
}
await supabase.from("sessions").insert([{ code: newCode }]);
setSessionCode(newCode);
localStorage.setItem("sessionCode", newCode);
};
Automatic Session Creation
From App.jsx:167-177, when you send content without an active session:
const updateClipboard = async () => {
if (!clipboard && !fileUrl) return toast.error("Please enter some text to update clipboard");
if (clipboard.length > 15000) return toast.error("Clipboard content is too long. Please keep it under 15000 characters.");
let firstTime = false;
if (!sessionCode) {
await createSession(setSessionCode);
firstTime = true;
}
const code = localStorage.getItem("sessionCode");
// ...
};
Joining an Existing Session
To sync with devices already in a session, you need to enter the session code.
Join Process
- Enter the 5-character session code in the input field
- Click the “Join” button
- ClipSync validates the code exists in the database
- If valid, your device joins and retrieves the clipboard history
const joinSession = async () => {
if (!inputCode.trim()) return toast.error("Please enter a session code");
// Check if session exists
const { data: sessionData, error: sessionError } = await supabase
.from("sessions")
.select("*")
.eq("code", inputCode.toUpperCase());
if (sessionData.length == 0 || sessionError) {
toast.error("This session code does not exist. Please enter a valid code.");
return;
}
setSessionCode(inputCode.toUpperCase());
localStorage.setItem("sessionCode", inputCode.toUpperCase());
const { data, error } = await supabase
.from("clipboard")
.select("*")
.eq("session_code", inputCode.toUpperCase())
.order("created_at", { ascending: false });
if (error) {
toast.error("An error occurred while fetching clipboard history");
return;
}
toast.success(`Joined session ${inputCode.toUpperCase()} successfully!`);
setInputCode("");
setClipboard("");
if (!error) setHistory(data);
};
Session codes are case-insensitive and automatically converted to uppercase for consistency.
Leaving a Session
You can leave a session at any time by clicking the logout icon next to the session code.
From App.jsx:484-494:
<button
aria-label="Leave Session"
className="text-red-500 ml-4 active:text-red-700 active:scale-95"
onClick={() => {
const ans = confirm("Are you sure you want to leave the session?");
if (!ans) return;
setSessionCode("");
localStorage.removeItem("sessionCode");
sessionStorage.removeItem("clipboard");
setHistory([]);
}}>
<LogOut size={17} />
</button>
Leaving a session clears your local clipboard history and session data. The session and its data remain in the database for other connected devices.
Session Persistence
ClipSync uses localStorage to remember your session across browser sessions:
Auto-Reconnect on Page Load
From App.jsx:64-85:
useEffect(() => {
const storedSession = localStorage.getItem("sessionCode");
if (storedSession) {
setSessionCode(storedSession);
(async () => {
const { data, error } = await supabase
.from("clipboard")
.select("*")
.eq("session_code", storedSession.toUpperCase())
.order("created_at", { ascending: false });
if (error) {
toast.error("An error occurred while fetching clipboard history");
return;
}
setHistory(data);
})();
}
console.clear();
}, []);
Storage Keys
localStorage.sessionCode: Stores the current session code for persistencesessionStorage.clipboard: Temporarily stores clipboard input (cleared on tab close)
If you return to ClipSync in the same browser, you’ll automatically rejoin your last session.
Session Sharing
To connect multiple devices:
- Create or join a session on your first device
- Note the 5-character session code displayed at the top
- On other devices, enter this code and click “Join”
- All devices can now send and receive clipboard content in real-time
Use the share button in the top-right corner to quickly share the session URL with other devices.