Skip to main content

​
AuthModal

The AuthModal component provides a ready-to-use authentication interface with support for multiple login methods. It renders a “Connect Wallet” button that opens a modal with all configured authentication options.

​
Basic Usage

import { AuthModal } from "crefy-connect";

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <AuthModal />
    </div>
  );
}

​
Customization

You can customize the Connect Wallet button using optional props:

​
Props

PropTypeRequiredDescription
buttonClassNamestring❌Optional CSS class for the button
buttonStyleReact.CSSProperties❌Optional inline style object for custom button styling

​
Examples

​
Using CSS Class

import { AuthModal } from "crefy-connect";
import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>Custom AuthModal Example</h1>
      <AuthModal buttonClassName="my-custom-btn" />
    </div>
  );
}

/* styles.css */
.my-custom-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.my-custom-btn:hover {
  transform: translateY(-2px);
}

​
Using Inline Styles

import { AuthModal } from "crefy-connect";

export default function App() {
  return (
    <div>
      <h1>Custom AuthModal Example</h1>
      <AuthModal
        buttonStyle={{
          background: "#111",
          color: "#fff",
          borderRadius: "12px",
          padding: "10px 18px",
          border: "1px solid #333",
          cursor: "pointer",
        }}
      />
    </div>
  );
}

​
Combining Both

import { AuthModal } from "crefy-connect";

export default function App() {
  return (
    <div>
      <h1>Custom AuthModal Example</h1>
      <AuthModal
        buttonClassName="my-custom-btn"
        buttonStyle={{
          fontSize: "18px",
          fontWeight: "bold",
        }}
      />
    </div>
  );
}
  • The button opens a modal with all login methods configured in CrefyConnectProvider
  • Users can choose from available authentication methods
  • After successful authentication, the modal closes automatically
  • The authentication state is managed globally via the useCrefy hook

​
Integration with useCrefy

The AuthModal works seamlessly with the useCrefy hook: 
import { AuthModal, useCrefy } from "crefy-connect";

export default function App() {
  const { isAuthenticated, user } = useCrefy();

  return (
    <div>
      {!isAuthenticated ? (
        <AuthModal />
      ) : (
        <div>
          <p>Welcome, {user?.userData?.email}!</p>
          {/* Your authenticated content */}
        </div>
      )}
    </div>
  );
}
Flexibility: You can use either buttonClassName, buttonStyle, or both to match the modal’s trigger button with your app’s theme.