EmblemAuthProvider

The EmblemAuthProvider from @emblemvault/emblem-auth-react provides authentication context to your React application.

Installation

terminal

📖 Related Documentation

React Components React Hooks Auth Quick Start

Basic Usage

Wrap your app with EmblemAuthProvider at the root level. All child components can then access authentication state via hooks.

App.tsx

Configuration

Customize authentication behavior with optional props:

App.tsx

Props

Prop	Type	Required	Description
appId	string	Yes	Your application ID from Emblem
children	ReactNode	Yes	Your application components
authUrl	string	No	Auth service URL (defaults to production)
apiUrl	string	No	Backend API URL (defaults to production)
debug	boolean	No	Enable debug logging

Using with Auth Components

Combine with ConnectButton and other auth components:

App.tsx

Integration with Agent Hustle

Nest HustleProvider inside EmblemAuthProvider for automatic authentication:

App.tsx

✨ Automatic Auth: When HustleProvider is nested inside EmblemAuthProvider, it automatically uses the authentication context. No need to pass API keys manually!

Context Value

The provider exposes authentication state and methods via the useEmblemAuth() hook:

import { useEmblemAuth } from '@emblemvault/emblem-auth-react';

function MyComponent() {
  const {
    session,          // Current session with user & token
    isAuthenticated,  // Boolean auth status
    isLoading,        // Loading state
    vaultInfo,        // Vault addresses & metadata
    openAuthModal,    // Function to open auth modal
    logout,           // Function to logout
  } = useEmblemAuth();
}

See the Hooks documentation for complete details.

Provider Architecture

EmblemAuthProvider

↳ HustleProvider (optional)

↳ Your App

Place EmblemAuthProvider at the top level. It provides auth context to all children, including HustleProvider which auto-detects the auth state.

First-Class Citizen

• No dependency on other providers
• Works standalone for auth-only apps
• Other SDKs depend on it (not vice versa)
• Manages global auth state
• Handles session persistence

Features

• Automatic session management and token refresh
• Persistent authentication across page reloads
• Multi-chain wallet support (EVM, Solana, Hedera)
• OAuth and wallet-based authentication
• Automatic vault info fetching
• Debug mode for development
• FingerprintJS visitor tracking
• Cross-tab session sync

Best Practices

• Place the provider as high as possible in your component tree
• Only render one EmblemAuthProvider per application
• Use useEmblemAuth() in components that require auth
• Use useEmblemAuthOptional() for optional auth features
• Enable debug mode during development to see auth flow logs
• Handle loading states to avoid flickering UI

Getting an App ID

To use EmblemAuthProvider, you need to register your application and obtain an App ID.