RegisterLogin
DocsPricing
RegisterLogin
  • Getting Started
  • Introduction
  • Quick Start
  • SDKs
  • React
  • TypeScript
  • Next.js
  • Express
  • NestJS
  • Python
  • API Reference
  • Support and Resources
  • FAQ
  • Contact

AuthProvider

React context provider that wraps your application and provides authentication state to all components.


Overview

The AuthProvider component creates a React context that manages authentication state, handles automatic token refresh, and provides auth methods to all child components via hooks. All client-side hooks (useAuth, useSession, useMfa) require AuthProvider to be present in the component tree.


Basic Usage

import { AuthProvider } from 'authsafe-nextjs';

export default function RootLayout({ children }) {
  return (
    <AuthProvider
      config={{
        clientId: process.env.NEXT_PUBLIC_AUTHSAFE_CLIENT_ID,
        domain: process.env.NEXT_PUBLIC_AUTHSAFE_DOMAIN,
      }}
    >
      {children}
    </AuthProvider>
  );
}

Best Practices
  • Always pass initialSession to avoid authentication flicker during hydration
  • Initialize on server-side with initAuthSafe() in your root layout
  • Enable autoRefresh for seamless token management

AuthSafe

Product

HighlightFeatureIntegrationPricingFAQ

Company

AboutBlogContact

Developer

DashboardDocumentation

Legal

Terms & ConditionsPrivacyComplianceShippingCancellationAI

© 2026 AuthSafe. All rights reserved.

We value your privacy

This website uses cookies for anonymous analytics to help us improve your experience. No personal information is stored or shared. You can allow or reject analytics tracking at any time. See our Privacy Policy.

We use cookies for anonymous analytics. No personal info is stored. See our Privacy Policy.