Skip to content

Conversation

alikhere
Copy link
Contributor

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

2025-09-16 19-47-38

Part of #400
Closes #399

@alikhere alikhere requested a review from travis as a code owner September 16, 2025 15:07
@alikhere alikhere changed the title Feat/auth component suite enhancement feat: Implement Authentication Component Suite for Storacha Console Toolkit Sep 16, 2025
@alikhere
Copy link
Contributor Author

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

@alikhere alikhere force-pushed the feat/auth-component-suite-enhancement branch from 307abdf to 5aa8c7d Compare September 17, 2025 10:39
Copy link

@Nkovaturient Nkovaturient left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, great work!

Copy link
Contributor

@Dhruv-Varshney-developer Dhruv-Varshney-developer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 alikhere force-pushed the feat/auth-component-suite-enhancement branch from 5aa8c7d to 6a5b61e Compare September 25, 2025 12:47
@alikhere
Copy link
Contributor Author

alikhere commented Sep 25, 2025

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

Copy link
Member

@travis travis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

import { useStorachaAuth } from '../components/StorachaAuth.js'

/**
* Enhanced authentication hook that provides additional functionality
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what additional functionality does it provide?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Authentication Component Suite Enhancement

4 participants