AuthProvider

Overview

The AuthProvider component is the root authentication provider that wraps your application and provides authentication context to all child components. It integrates with Logto’s authentication service and manages user session state.

Props

children

React.ReactNode

required

The child components to be wrapped by the authentication provider.

config

LogtoConfig

required

Logto configuration object containing your application credentials and settings.

interface LogtoConfig {
  endpoint: string
  appId: string
  resources?: string[]
  scopes?: string[]
  prompt?: string
}

callbackUrl

string

The URL to redirect to after successful authentication. Defaults to the current page URL if not specified.

customNavigate

(url: string, options?: NavigationOptions) => void

Custom navigation function to handle routing in your application. Useful for integration with client-side routers like Next.js or React Router.

interface NavigationOptions {
  replace?: boolean // Use replaceState instead of pushState
  force?: boolean   // Force navigation even if already on the same page
}

Enable popup-based sign-in flow instead of full-page redirect. When enabled, the sign-in page opens in a popup window.

Usage

Basic Setup

import { AuthProvider } from '@ouim/logto-authkit'

function App() {
  const logtoConfig = {
    endpoint: 'https://your-logto-endpoint.com',
    appId: 'your-app-id',
  }

  return (
    <AuthProvider config={logtoConfig}>
      <YourApp />
    </AuthProvider>
  )
}

With Callback URL

import { AuthProvider } from '@ouim/logto-authkit'

function App() {
  const logtoConfig = {
    endpoint: 'https://your-logto-endpoint.com',
    appId: 'your-app-id',
  }

  return (
    <AuthProvider 
      config={logtoConfig}
      callbackUrl="/dashboard"
    >
      <YourApp />
    </AuthProvider>
  )
}

import { AuthProvider } from '@ouim/logto-authkit'

function App() {
  const logtoConfig = {
    endpoint: 'https://your-logto-endpoint.com',
    appId: 'your-app-id',
  }

  return (
    <AuthProvider 
      config={logtoConfig}
      enablePopupSignIn={true}
    >
      <YourApp />
    </AuthProvider>
  )
}

import { AuthProvider } from '@ouim/logto-authkit'
import { useRouter } from 'next/navigation'

function App({ children }) {
  const router = useRouter()
  
  const logtoConfig = {
    endpoint: 'https://your-logto-endpoint.com',
    appId: 'your-app-id',
  }

  const customNavigate = (url: string, options?: NavigationOptions) => {
    if (options?.replace) {
      router.replace(url)
    } else {
      router.push(url)
    }
  }

  return (
    <AuthProvider 
      config={logtoConfig}
      customNavigate={customNavigate}
    >
      {children}
    </AuthProvider>
  )
}

Features

Client-Side Only: Automatically prevents SSR issues by rendering only on the client side
Cross-Tab Synchronization: Auth state is synchronized across browser tabs and windows
Auto Token Management: Automatically manages JWT tokens in cookies
Error Handling: Built-in error recovery and automatic logout on auth failures
Popup Support: Optional popup-based authentication flow
Rate Limiting: Prevents excessive auth state refresh calls

Notes

The AuthProvider must be placed at the root of your component tree, above any components that use authentication
Configuration is validated on mount to ensure all required fields are present
Auth state changes trigger a custom auth-state-changed event on the window object
The provider automatically handles token refresh and session management

Get Started

Frontend

Server

Configuration

Examples

API Reference

Overview

Props

Usage

Basic Setup

With Callback URL

With Custom Navigation (Next.js)

Features

Notes

​Overview

​Props

​Usage

​Basic Setup

​With Callback URL

​With Popup Sign-In

​With Custom Navigation (Next.js)

​Features

​Notes

Overview

Props

Usage

Basic Setup

With Callback URL

With Popup Sign-In

With Custom Navigation (Next.js)

Features

Notes