Project-Storacha Console Integration Toolkit - PLDG Cohort 4 - [01 Sept- 04 Sept, 2025]

[Nkovaturient]

Description

• A plug-and-play UI toolkit that lets any Web3 product (like Dmail, DMA, dChat, Web3Mail, etc.) embed Storacha console features directly into their app. This could be potentially turned into a reseller service and a business.
• Notion Docs
• Main PR

Contributors

@Nkovaturient - Reviewer & Issue Monitoring
@bomanaps - Implement Space Management Component Suite
@AkashJana18 - Implement Content Management Component Suite
@alikhere - Authentication Component Suite Enhancement

Accomplished Tasks

✅ Created an EPIC roadmap outlining further tasks and issues for Storacha Console Integration Toolkit:- From Auth to Adoption and E2E Testing and Console Integrations of these components

• Space Management Suite Implement Space Management Component Suite upload-service#401
• Content Management Suite Implement Content Management Component Suite in UI components upload-service#402
• Authentication Suite Authentication Component Suite Enhancement upload-service#399
• UI Packaging & Theming → UI Packaging and Theming upload-service#405
• Docs & Adoption → Documentation & Examples Site: UI [ 1 ] upload-service#406 , Console: Adopt UI Toolkit and Remove Duplicated Flows UI [2] upload-service#407

✅ Coordinated among the interested contributors who have kickstarted work on significant sub-tasks

Update

• Implementation of Space, Auth and Content Management Suite is currently in WIP

Next Tasks

• - After achieving a substantial progress and valid outcome in current sub-issues, we shall head to Enhanced Components and UI Packaging tasks that are dependent on these current ones.

Relevant Links

• https://github.com/storacha/upload-service/tree/main/packages/ui

[alikhere]

Storacha Authentication Management Suite #399 - Progress Update

✅ Completed (Core Auth Infrastructure)

• AuthProvider: React Context–based state management with session persistence (refresh + iframe).
• useAuth() Hook: Exposes { user, isAuthenticated, loading, error, signIn, signOut, signUp, resetPassword } with TypeScript support.
• SessionHandoffProvider: Enables iframe → host session communication via postMessage.
• Authenticator Component: Refactored to use new provider + hooks while keeping backward compatibility.
• Authentication Forms: Sign-in, Sign-up, Email verification, User profile display.
• Example App (sign-up-in): Updated with new flow, now works end-to-end with session persistence.

---

🚧 Current Status

• End-to-end authentication flows are working: sign-in, sign-up, email verification, logout.
• Session management across page refreshes and iframe embedding is stable.
• Components are responsive and TypeScript-ready.

---

📋 Remaining Work (Next Steps)

• Testing: unit, integration, and E2E coverage for all flows (including iframe handoff).
• Documentation: usage examples + Material UI–style component reference.

---

📊 Code Structure

Component Structure

@storacha/ui
├── providers/
│   ├── AuthProvider.tsx          ✅ Complete
│   ├── SessionHandoff.tsx        ✅ Complete
│   └── Provider.tsx              ✅ Existing
├── components/
│   └── AuthComponents.tsx        ✅ Complete
├── hooks/
│   └── useAuth.ts                ✅ Complete
└── examples/
    └── sign-up-in/               ✅ Complete