AuthProvider

React context provider that manages OAuth2/OIDC authentication state with AuthSafe. This component wraps your application and provides authentication context to all child components, integrating with oidc-client-ts for robust OAuth 2.1 and OIDC support.

Basic Usage

Wrap your application with the AuthProvider at the root level:

import { AuthProvider } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

Props

Property	Type	Required	Description
`config`	`AuthConfig`	Yes	Configuration object containing clientId, redirectUri, scopes, and optional settings
`children`	`React.ReactNode`	Yes	Your application components
`queryClient`	`QueryClient`	No	Optional TanStack Query client for advanced data fetching and caching

Configuration Options

Option	Type	Required	Default	Description
`clientId`	`string`	Yes	-	Unique identifier for your OAuth2 client from AuthSafe dashboard
`redirectUri`	`string`	Yes	-	URI to redirect to after authentication (callback URL)
`scope`	`Array<AuthScope>`	No	`['openid', 'profile']`	Array of requested OAuth scopes. Options: 'openid', 'profile', 'email', 'offline_access'
`env`	`'development' \| 'production'`	No	`'production'`	Environment to use this provider (affects logging and error handling)
`authority`	`string`	No	`'https://authsafe.in'`	Optional custom authority URL for the OAuth server
`popupRedirectUri`	`string`	No	-	Optional URI for popup authentication callback
`automaticSilentRenew`	`boolean`	No	`false`	Optional flag to enable automatic token renewal before expiration

Full Configuration Example

Here's an example with all available configuration options:

import { AuthProvider } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email', 'offline_access'],
        env: 'production',
        authority: 'https://authsafe.in',
        popupRedirectUri: 'http://localhost:3000/popup-callback',
        automaticSilentRenew: true,
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

Using with TanStack Query

The AuthProvider uses TanStack Query internally for efficient data fetching and caching. If your application also uses TanStack Query, you can share the same queryClient instance:

import { AuthProvider } from 'authsafe-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

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

Why Share Your Query Client?

Unified DevTools: See all queries (including auth state) in one React Query DevTools view
Consistent Configuration: Your global query defaults, retry logic, and cache settings apply to auth queries too
Single Cache: One QueryClient managing all server state with proper deduplication
Better Performance: Shared cache reduces memory usage and network requests

Optional But Recommended

If you don't provide a queryClient, AuthProvider creates its own internal instance. However, if you're already using TanStack Query in your app, sharing the client is recommended for better integration and debugging experience.

Type Definitions

/**
 * User profile from OIDC userinfo endpoint
 */
export interface User {
  sub: string;
  email?: string;
  name?: string;
  email_verified?: boolean;
  [key: string]: any;
}

/**
 * OAuth2 scopes supported by AuthSafe.
 */
export type AuthScope = "openid" | "profile" | "email" | "offline_access";

/**
 * Configuration for initializing the AuthSafe SDK.
 */
export interface AuthConfig {
  clientId: string;
  redirectUri: string;
  scope?: Array<AuthScope>;
  env?: "development" | "production";
  authority?: string;
  popupRedirectUri?: string;
  automaticSilentRenew?: boolean;
}

export interface AuthProviderProps {
  config: AuthConfig;
  children: React.ReactNode;
  queryClient?: QueryClient;
}

Important

The AuthProvider must be placed at the root of your application, above any components that need to access authentication state. All hooks (useLogin, useAuth, useLogout, etc.) must be used within components that are children of AuthProvider.

Security Features

Automatic PKCE (Proof Key for Code Exchange) implementation for enhanced security
Integration with oidc-client-ts for robust OAuth 2.1 and OpenID Connect support
Secure token storage and automatic token refresh
Built-in CSRF protection with state parameter validation