Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

React Components

:::info Coming Soon This feature is under active development. The design below reflects our planned implementation. :::

The Aero2 React library will provide pre-built components and hooks for adding authentication to React applications.

Planned Components

ComponentDescription
<AeroProvider>Context provider that wraps your app and manages auth state
<SignIn />Pre-built sign-in form with social login buttons
<SignUp />Pre-built sign-up form
<UserButton />Avatar dropdown with sign-out and profile links
<UserProfile />Full profile management page
<ProtectedRoute />Wrapper that redirects unauthenticated users to sign-in

Planned Hooks

HookReturns
useAuth()Authentication state: isSignedIn, isLoading, signIn(), signOut()
useUser()Current user object: id, email, name, picture, roles
useSession()Current session details
useSignIn()Sign-in flow controls
useSignUp()Sign-up flow controls

Planned Usage

import { AeroProvider, SignIn, useUser, ProtectedRoute } from '@aero2/react';
 
function App() {
  return (
    <AeroProvider
      appUrl="https://your-app.aero2.dev"
      clientId="your-client-id"
    >
      <Routes>
        <Route path="/sign-in" element={<SignIn />} />
        <Route path="/dashboard" element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        } />
      </Routes>
    </AeroProvider>
  );
}
 
function Dashboard() {
  const { user } = useUser();
  return <h1>Welcome, {user.name}</h1>;
}

Theming

Components will support theming via CSS custom properties and will automatically load your application's branding configuration (logo, primary color) from Aero2.

Installation

The library will be published as @aero2/react on npm:

npm install @aero2/react

Related