feat: Implement Authentication Component Suite for Storacha Console Toolkit

[alikhere]

Overview

Implements a complete authentication component suite (StorachaAuth) that transforms @storacha/ui from a low-level SDK into a plug-and-play UI toolkit. This allows partner apps to embed Storacha console authentication features natively without double navigation UX friction.

Features

• StorachaAuth Component Suite: Complete authentication flow with Form, Submitted, Ensurer, EmailInput, and CancelButton components
• Headless Hooks: useStorachaAuth and useStorachaAuthEnhanced for custom implementations
• Console-Exact UI: Matches console authentication styling and behavior exactly
• Iframe Support: Built-in iframe detection and handling for embedded contexts
• Session Management: Complete authentication state management with analytics tracking
• Self-Contained Styling: CSS classes included, no Tailwind dependency required

Implementation

• Components: StorachaAuth, StorachaAuthForm, StorachaAuthSubmitted, StorachaAuthEnsurer
• Hooks: useStorachaAuth, useStorachaAuthEnhanced with session tracking
• Styling: Custom CSS classes matching console's hot-red theme and Epilogue font
• Assets: Integrated racha-fire.jpg background and storacha-logo.svg
• Testing: 17 comprehensive E2E tests with 100% component coverage

Usage

import { StorachaAuth, useStorachaAuthEnhanced } from '@storacha/ui-react'
import '@storacha/ui-react/globals.css'

<StorachaAuth onAuthEvent={handleAuthEvent}>
  <StorachaAuth.Ensurer>
    <YourApp />
  </StorachaAuth.Ensurer>
</StorachaAuth>

Testing

• ✅ 30 tests passing (17 new StorachaAuth tests)
• ✅ All components and hooks tested
• ✅ User interactions and error handling covered
• ✅ Integration tests for complete authentication flow

Screenshot

Part of #400
Closes #399

[alikhere]

@Dhruv-Varshney-developer Could you please review the PR.

[Nkovaturient]

LGTM, great work!

[Dhruv-Varshney-developer]

Mostly Looks good to me. Except that I'll prefer the code to refactored & simplified.
Few good practices:

1. Big files (more than 200 lines of code) can be split into small components and those components can go in /components
2. Look for code where it can be deleted/simplified.
3. If we can use Tailwind, libraries and toolkit and can reduce code, that's helpful.

[alikhere]

@Dhruv-Varshney-developer @travis Ready for the second round of review

[travis]

This is great work, thank you!

Two things that need to be changed before I'm comfortable with this merging:

1. Components that include CSS or styling belong in a separate package - this package intentionally does not include CSS and should not be expanded to include components with built-in styling choices. I'd recommend a new package called react-styled or something similar
2. Needs more usage examples - the sign-up-in updates are great! I'd like a bit more documentation and a few more examples of the functionality you're introducing here. In particular, a) this needs an example of how to swap in your own styles rather than using the prepackaged ones and b) this needs examples of and documentation for the "iframe" support

Happy to chat in higher bandwidth in Discord if that would be helpful!

[travis]

what additional functionality does it provide?

[alikhere]

The enhanced hook basically builds on top of useStorachaAuth and gives some extra handy stuff. It provides the current user info (currentUser), session details like duration and iframe state (sessionInfo), a logout method with tracking and convenience flags like isLoading and isSubmitting. Makes it easier to use in the UI without manually calculating these.

[alikhere]

This update implements a headless-first architecture for StorachaAuth with a separate styled layer, as per requested by @travis

Key Changes

Separated styling from core logic

• @storacha/ui-react is now fully headless and unstyled
• Introduced new styled package: @storacha/ui-react-styled for console-exact UI

Added three new example apps

• headless-auth – complete control with custom styles
• styled-auth – plug-and-play with built-in console styles
• iframe-auth – demonstrates host + embedded authentication flow with session handoff

Enhanced developer flexibility

• Components now support className, style, and render* props for UI customization
• Headless core is CSS-agnostic, supporting any styling approach (Tailwind, Chakra, etc.)