OneAuth React SDK

Add secure authentication to your React app in minutes with just a few lines of code.

Quick Start

Get authentication working in your React app with 3 simple steps:

1. Install

npm install oneauth-react

2. Wrap your app

// src/App.jsx
import { AuthProvider, SignedIn, SignedOut, SignInButton, UserButton, useAuth } from 'oneauth-react'

function AppContent() {
  const { user } = useAuth()
  
  return (
    <>
      <header style={{ display: 'flex', justifyContent: 'space-between', padding: '1rem' }}>
        <h1>My App</h1>
        <SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <UserButton />
        </SignedIn>
      </header>
      
      <main style={{ padding: '2rem', textAlign: 'center' }}>
        <SignedOut>
          <h2>Welcome! Please sign in to continue</h2>
        </SignedOut>
        
        <SignedIn>
          <h2>🎉 Welcome {user?.fullName || user?.email}!</h2>
        </SignedIn>
      </main>
    </>
  )
}

export default function App() {
  return (
    <AuthProvider config={{ 
      apiUrl: 'http://localhost:8080',
      authMode: 'password',
      providers: ['google', 'github']
    }}>
      <AppContent />
    </AuthProvider>
  )
}

3. That's it!

Your React app now has:

• ✅ Google & GitHub OAuth
• ✅ Email/password authentication
• ✅ User sessions
• ✅ Sign in/out components
• ✅ Automatic user management

Features

• 🚀 Drop-in Components - Ready-to-use authentication UI
• 🔐 Secure by Default - Built-in security best practices
• 🌐 OAuth Providers - GitHub, Google, and more
• ⚡ TypeScript Ready - Full TypeScript support
• 📱 Responsive - Works on all devices

Available Components

| Component | Description | |-----------|-------------| | <SignInButton /> | Shows sign in button when user is signed out | | <UserButton /> | Shows user avatar and menu when signed in | | <SignedIn> | Only shows children when user is signed in | | <SignedOut> | Only shows children when user is signed out | | <AuthModal /> | Full authentication modal |

Configuration Options

<AuthProvider config={{
  apiUrl: 'http://localhost:8080',          // Your OneAuth server
  authMode: 'password',                     // 'password' | 'passwordless' | 'oauth'
  providers: ['google', 'github'],         // OAuth providers
  enableVerificationInput: false,           // Require email verification
  alwaysFetchUser: false,                   // Always fetch user on load
  advanced: {
    debug: false                            // Enable debug mode
  }
}}>

Get User Information

Access user data anywhere with the useAuth hook:

import { useAuth } from 'oneauth-react'

function MyComponent() {
  const { user, isAuthenticated } = useAuth()

  if (!isAuthenticated) {
    return <div>Please sign in</div>
  }

  return (
    <div>
      <h2>Welcome {user.fullName}!</h2>
      <p>Email: {user.email}</p>
      <p>Provider: {user.registeredProviderName}</p>
    </div>
  )
}

Custom Authentication Modal

Use AuthModal for a custom sign-in experience:

import { AuthModal, useAuth } from 'oneauth-react'

function MyApp() {
  const { isModalOpen, hideModal } = useAuth()
  
  return (
    <>
      <SignInButton />
      
      <AuthModal 
        isOpen={isModalOpen} 
        onClose={hideModal}
        onSuccess={hideModal}
        appName="My App"
      />
    </>
  )
}

Environment Variables

Set up your environment variables:

# .env
VITE_ONE_AUTH_SERVER_URL=http://localhost:8080

Then use in your config:

<AuthProvider config={{ 
  apiUrl: import.meta.env.VITE_ONE_AUTH_SERVER_URL || 'http://localhost:8080',
  // ... other config
}}>

TypeScript Support

Full TypeScript support out of the box:

import { useAuth, User } from 'oneauth-react'

function UserProfile() {
  const { user, isAuthenticated }: {
    user: User | null
    isAuthenticated: boolean
  } = useAuth()

  return (
    <div>
      {user?.fullName && <h2>{user.fullName}</h2>}
      <p>{user?.email}</p>
    </div>
  )
}

Examples

Check out complete examples:

• React Quickstart Example
• React with TypeScript

Need Help?

• 📖 Full Documentation
• 🐛 Report Issues
• 💬 Community Support

Made with ❤️ by the OneAuth team