@authos/react

The React SDK is the primary way to use AuthOS in React applications. It provides a set of hooks and components to manage authentication state and UI.

Installation


npm install @authos/react

Setup

Wrap your application root with the AuthOSProvider.


import { AuthOSProvider } from '@authos/react';
 
export default function App({ children }) {
  return (
    <AuthOSProvider
      publishableKey="your_publishable_key"
      apiUrl="http://localhost:3001/v1/client" // Optional: defaults to localhost:3000/api/v1/client
    >
      {children}
    </AuthOSProvider>
  );
}

Hooks

useAuth

The useAuth hook exposes the current authentication context.


import { useAuth } from '@authos/react';
 
const { user, signIn, signUp, logout, isLoading } = useAuth();
 
if (isLoading) return <div>Loading...</div>;
 
if (user) {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Components

A pre-built component for signing in users.


import { SignIn } from '@authos/react';
 
export default function LoginPage() {
  return <SignIn />;
}

A pre-built component for registering new users.


import { SignUp } from '@authos/react';
 
export default function RegisterPage() {
  return <SignUp />;
}