Frontend Types

Frontend TypeScript types used in logto-authkit React components and hooks.

User Types

LogtoUser

Represents an authenticated user in the application.

string

required

Unique identifier for the user

string

Display name of the user

string

Email address of the user

string

URL to the user’s avatar/profile picture

any

Additional custom properties from the identity provider

export type LogtoUser = {
  id: string
  name?: string
  email?: string
  avatar?: string
  [key: string]: any
}

Authentication Types

AuthMiddleware

Defines the authentication requirement level for a page or route.

export type AuthMiddleware = 'auth' | 'guest' | undefined

'auth' - Requires authenticated user
'guest' - Allows unauthenticated access (guest mode)
undefined - No middleware applied

NavigationOptions

Options for controlling navigation behavior.

boolean

default:false

Use replaceState instead of pushState to avoid adding to browser history

boolean

default:false

Force navigation even if already on the same page

export interface NavigationOptions {
  replace?: boolean
  force?: boolean
}

AuthOptions

Configuration options for authentication behavior and redirects.

AuthMiddleware

Authentication middleware type to apply

string

URL to redirect to after authentication

string

URL to redirect to if user is already authenticated

Options for controlling navigation behavior

export interface AuthOptions {
  middleware?: AuthMiddleware
  redirectTo?: string
  redirectIfAuthenticated?: string
  navigationOptions?: NavigationOptions
}

Context Types

AuthContextType

The authentication context type provided by useAuth() hook.

LogtoUser | null

required

The currently authenticated user, or null if not authenticated

boolean

required

Indicates if user data is currently being loaded

Function to initiate sign-in flow

callbackUrl - URL to redirect to after successful sign-in
usePopup - Whether to use popup sign-in instead of redirect

(options?: { callbackUrl?: string; global?: boolean }) => Promise<void>

required

Function to sign out the current user

callbackUrl - URL to redirect to after sign-out
global - Whether to perform global sign-out across all sessions

() => Promise<void>

required

Function to refresh authentication state and user data

Whether popup sign-in is enabled

export interface AuthContextType {
  user: LogtoUser | null
  isLoadingUser: boolean
  signIn: (callbackUrl?: string, usePopup?: boolean) => Promise<void>
  signOut: (options?: { callbackUrl?: string; global?: boolean }) => Promise<void>
  refreshAuth: () => Promise<void>
  enablePopupSignIn?: boolean
}

Component Props

AuthProviderProps

Props for the AuthProvider component.

React.ReactNode

required

Child components to render within the auth context

LogtoConfig

required

Logto configuration object containing endpoint, appId, and resources

string

Default callback URL for authentication redirects

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

Custom navigation function (e.g., for React Router integration)

Enable popup-based sign-in flow

export interface AuthProviderProps {
  children: React.ReactNode
  config: LogtoConfig
  callbackUrl?: string
  customNavigate?: (url: string, options?: NavigationOptions) => void
  enablePopupSignIn?: boolean
}

CallbackPageProps

Props for the CallbackPage component.

string

CSS class name for styling the callback page

React.ReactNode

Custom component to display during authentication callback processing

React.ReactNode

Custom component to display on successful authentication

() => void

Callback function executed on successful authentication

(error: Error) => void

Callback function executed on authentication error

export interface CallbackPageProps {
  className?: string
  loadingComponent?: React.ReactNode
  successComponent?: React.ReactNode
  onSuccess?: () => void
  onError?: (error: Error) => void
}

AdditionalPage

Defines additional pages/links for UI components.

string

required

URL or path for the page

string

required

Display text for the link

React.ReactNode

Optional icon element to display with the link

export interface AdditionalPage {
  link: string
  text: string
  icon?: React.ReactNode
}

Usage Example

import type { LogtoUser, AuthOptions, AuthContextType } from '@ouim/logto-authkit'
import { useAuth } from '@ouim/logto-authkit'

function UserProfile() {
  const { user, signOut }: AuthContextType = useAuth()
  
  if (!user) return null
  
  const logtoUser: LogtoUser = user
  
  return (
    <div>
      <h1>{logtoUser.name}</h1>
      <p>{logtoUser.email}</p>
      <button onClick={() => signOut({ callbackUrl: '/' })}>
        Sign Out
      </button>
    </div>
  )
}

Get Started

Frontend

Server

Configuration

Examples

API Reference

User Types

LogtoUser

Authentication Types

AuthMiddleware

NavigationOptions

AuthOptions

Context Types

AuthContextType

Component Props

AuthProviderProps

CallbackPageProps

AdditionalPage

Usage Example