Supabase SSO React Component Library

A React component library for authentication with Supabase, providing Login component and authentication utilities.

Installation

pnpm i

Usage

Initialize the library with your Supabase credentials:

import { init } from '@uxndigital/supabase-sso-react';

init({
  supabaseInstanceId: 'xxx',
  supabaseKey: 'your-anon-key',
});

Configuration Options

• supabaseInstanceId: Your Supabase project instance ID (e.g., 'xxx' for 'https://xxx.supabase.co')
• supabaseKey: Your Supabase anon/public key

Using the Components

import { Container, Login } from '@uxndigital/supabase-sso-react';
import type { Session } from '@supabase/supabase-js';

function App() {
  return (
    <Container
      renderLogin={(onSignupClick) => (
        <Login
          onSignupClick={onSignupClick}
          onLoginSuccess={(session: Session) => {
            console.log('Logged in:', session);
          }}
          onLoginFail={(error: Error) => {
            console.error('Login failed:', error);
          }}
        />
      )}
    >
      {/* Your authenticated app content */}
      <div>Authenticated Content</div>
    </Container>
  );
}

Using the Auth Hook

import { useAuth } from '@uxndigital/supabase-sso-react';

function MyComponent() {
  const { 
    user, 
    isAuthenticated, 
    isReady,
    isLoading,
    isPasswordRecovery,
    login, 
    logout,
    verifyToken,
    clearPasswordRecovery
  } = useAuth();
  
  // ...
}

Development

pnpm dev

每个组件里写 <name>.fixture.tsx 进行组件沙盒渲染

Production

pnpm build

Lint / Fix

pnpm lint

pnpm fix