React SDK

Official AuthSafe SDK for React applications. React integration with hooks, components, and providers for secure OAuth 2.0 and OpenID Connect authentication.

v0.0.2

React 18+

TypeScript

Overview

The authsafe-react SDK provides a full-featured authentication solution for React applications built on top of oidc-client-ts and TanStack Query. It handles all the complexity of OAuth 2.0 / OpenID Connect flows with a simple, declarative API.

Installation

npm install

npm install authsafe-react

Quick Start

Install the package using your preferred package manager:

1. Install the SDK

import { AuthProvider } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production'
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

2. Wrap your app with AuthProvider

import { useLogin, useAuth, useLogout } from 'authsafe-react';

function MyApp() {
  const { login } = useLogin();
  const { user, isAuthenticated } = useAuth();
  const { logout } = useLogout();

  if (!isAuthenticated) {
    return <button onClick={() => login()}>Login</button>;
  }

  return (
    <div>
      <h1>Welcome, {user?.name}!</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Ready to Go!

Once you've wrapped your app with AuthProvider, all hooks are available to use in any child component.

Available APIs

Explore the available APIs in the React SDK:

Providers

AuthProvider — Root authentication context provider

Hooks

useLogin() — Hook for triggering login flows
useLogout() — Hook for signing out users
useAuth() — Hook for accessing authentication state
useAuthCallback() — Hook for handling OAuth callbacks

Components

Profile — Pre-built profile management component

Configuration Options

interface AuthConfig {
  clientId: string;              // Required: Your application's client ID
  redirectUri: string;            // Required: OAuth callback URL
  scope?: Array<AuthScope>;       // Optional: Requested scopes
  env?: 'development' | 'production';  // Optional: Environment
  authority?: string;             // Optional: Custom authority URL
  popupRedirectUri?: string;      // Optional: Popup redirect URL
  automaticSilentRenew?: boolean; // Optional: Auto-renew tokens
}

Next Steps

AuthSafe React SDK requires React 18+ and is compatible with any React framework including Next.js, Vite, and Create React App.