Skip to main content
Frontend TypeScript types used in logto-authkit React components and hooks.

​
User Types

​
LogtoUser

Represents an authenticated user in the application.
​
id
string
required
Unique identifier for the user
​
name
string
Display name of the user
​
email
string
Email address of the user
​
avatar
string
URL to the user’s avatar/profile picture
​
[key: string]
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
Options for controlling navigation behavior.
​
replace
boolean
default:false
Use replaceState instead of pushState to avoid adding to browser history
​
force
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.
​
middleware
AuthMiddleware
Authentication middleware type to apply
​
redirectTo
string
URL to redirect to after authentication
​
redirectIfAuthenticated
string
URL to redirect to if user is already authenticated
​
navigationOptions
NavigationOptions
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.
​
user
LogtoUser | null
required
The currently authenticated user, or null if not authenticated
​
isLoadingUser
boolean
required
Indicates if user data is currently being loaded
​
signIn
(callbackUrl?: string, usePopup?: boolean) => Promise<void>
required
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
​
signOut
(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
​
refreshAuth
() => Promise<void>
required
Function to refresh authentication state and user data
​
enablePopupSignIn
boolean
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.
​
children
React.ReactNode
required
Child components to render within the auth context
​
config
LogtoConfig
required
Logto configuration object containing endpoint, appId, and resources
​
callbackUrl
string
Default callback URL for authentication redirects
​
customNavigate
(url: string, options?: NavigationOptions) => void
Custom navigation function (e.g., for React Router integration)
​
enablePopupSignIn
boolean
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.
​
className
string
CSS class name for styling the callback page
​
loadingComponent
React.ReactNode
Custom component to display during authentication callback processing
​
successComponent
React.ReactNode
Custom component to display on successful authentication
​
onSuccess
() => void
Callback function executed on successful authentication
​
onError
(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.
​
link
string
required
URL or path for the page
​
text
string
required
Display text for the link
​
icon
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>
  )
}