Skip to main content

SigninModal Component

The SigninModal component provides a complete authentication UI for your application. It supports multiple login methods and handles the entire authentication flow.

Basic Usage​

import { SigninModal } from '@volr/react-ui';
import { useState } from 'react';

function App() {
  const [showSignin, setShowSignin] = useState(false);

  return (
    <>
      <button onClick={() => setShowSignin(true)}>Sign In</button>
      <SigninModal
        isOpen={showSignin}
        onClose={() => setShowSignin(false)}
        onError={(error) => console.error('Auth error:', error)}
      />
    </>
  );
}

Props​

PropTypeRequiredDescription
isOpenbooleanYesControls modal visibility
onClose() => voidYesCalled when modal should close
onError(error: Error) => voidNoCalled when authentication errors occur

Supported Login Methods​

The SigninModal supports the following login methods, which can be enabled/disabled via VolrUIProvider configuration:

Email OTP​

Users enter their email address and receive a one-time password (OTP) code via email.

// Email OTP is enabled by default
// Configure SMTP in Dashboard > Settings > Authentication

Social Login​

Users can sign in with their social accounts:

  • Google: OAuth 2.0 authentication
  • Twitter: OAuth 1.0a authentication
// Enable social providers in VolrUIProvider
<VolrUIProvider
  config={{
    // ... other config
  }}
  socialProviders={['google', 'twitter']}
/>

SIWE (Sign-In with Ethereum)​

Users connect their Web3 wallet (MetaMask, WalletConnect, etc.) and sign a message to authenticate.

// Enable SIWE in VolrUIProvider
<VolrUIProvider
  config={{
    // ... other config
  }}
  enabledLoginMethods={{
    siwe: true,
  }}
/>

Authentication Flow​

The SigninModal handles the following flow automatically:

  1. Method Selection: User chooses login method
  2. Authentication: User completes authentication (OTP, social, or SIWE)
  3. Passkey Enrollment: If user doesn't have a passkey, they're prompted to create one
  4. Completion: User is authenticated and ready to use Volr SDK

Customization​

Branding​

You can customize the SigninModal appearance with branding:

<VolrUIProvider
  config={{
    // ... other config
  }}
  branding={{
    logoUrl: 'https://example.com/logo.png',
    primaryColor: '#0066ff',
    backgroundColor: '#ffffff',
  }}
/>

Enabled Methods​

Control which login methods are available:

<VolrUIProvider
  config={{
    // ... other config
  }}
  enabledLoginMethods={{
    email: true,
    social: true,
    siwe: false, // Disable SIWE
  }}
/>

Error Handling​

Handle authentication errors:

<SigninModal
  isOpen={showSignin}
  onClose={() => setShowSignin(false)}
  onError={(error) => {
    console.error('Authentication failed:', error);
    // Show user-friendly error message
    alert('Login failed. Please try again.');
  }}
/>

Integration with AccountModal​

The AccountModal component automatically shows SigninModal when the user is not logged in:

import { AccountModal } from '@volr/react-ui';

function App() {
  const [showAccount, setShowAccount] = useState(false);

  return (
    <AccountModal
      isOpen={showAccount}
      onClose={() => setShowAccount(false)}
    />
  );
}

Examples​

Basic Sign In Button​

import { SigninModal } from '@volr/react-ui';
import { useState } from 'react';

function SignInButton() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Sign In
      </button>
      <SigninModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      />
    </>
  );
}

Protected Route​

import { SigninModal } from '@volr/react-ui';
import { useVolr } from '@volr/react';
import { useState } from 'react';

function ProtectedContent() {
  const { isLoggedIn } = useVolr();
  const [showSignin, setShowSignin] = useState(false);

  if (!isLoggedIn) {
    return (
      <>
        <p>Please sign in to continue.</p>
        <button onClick={() => setShowSignin(true)}>Sign In</button>
        <SigninModal
          isOpen={showSignin}
          onClose={() => setShowSignin(false)}
        />
      </>
    );
  }

  return <div>Protected content here</div>;
}

Next Steps​