AuthProvider

AuthProvider is the root component that initializes the AuthSafe authentication context for your React application.

Basic Usage

Wrap your application root with AuthProvider:

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	AuthSafe configuration object (required)
`children`	`React.ReactNode`	Yes	Child components to render inside the provider
`queryClient`	`QueryClient`	No	Optional custom TanStack Query client

Configuration Options

Option	Type	Required	Default	Description
`clientId`	`string`	Yes	—	Your AuthSafe OAuth client ID
`redirectUri`	`string`	Yes	—	URL where users are redirected after login
`scope`	`Array<AuthScope>`	No	`['openid', 'profile']`	OAuth scopes to request (space-separated string or array)
`env`	`'development' \| 'production'`	No	`'production'`	Environment: 'development' or 'production'
`authority`	`string`	No	`'https://authsafe.in'`	AuthSafe authority URL (optional, auto-resolved from env)
`popupRedirectUri`	`string`	No	—	URI for popup-based authentication
`automaticSilentRenew`	`boolean`	No	`false`	Enable automatic silent token renewal

Full Configuration Example

Here is a complete configuration example with all 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>
  );
}

TanStack Query Integration

AuthProvider uses TanStack Query for data fetching and caching. You can pass a custom QueryClient if needed:

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

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>
  );
}

Custom QueryClient

Automatic caching and deduplication of auth requests
Background refetching for stale data
Optimistic updates for better UX
Built-in retry logic for failed requests

Note

If you are already using TanStack Query in your app, pass your existing QueryClient to AuthProvider to share the cache.

Type Definitions

export interface User {
  sub: string;
  email?: string;
  name?: string;
  email_verified?: boolean;
  [key: string]: any;
}

export type AuthScope = "openid" | "profile" | "email" | "offline_access";

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;
}

Root Level Provider

AuthProvider should be placed at the root of your component tree to ensure all components have access to authentication state.

Security Considerations

Never expose your client secret in frontend code
Use environment variables for all sensitive configuration
Enable silent token renewal in production for seamless UX
Set appropriate scopes — only request what you need