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

name

string

Display name of the user

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

NavigationOptions

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

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

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

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)

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

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

​User Types

​LogtoUser

​Authentication Types

​AuthMiddleware

​NavigationOptions

​AuthOptions

​Context Types

​AuthContextType

​Component Props

​AuthProviderProps

​CallbackPageProps

​AdditionalPage

​Usage Example

User Types

LogtoUser

Authentication Types

AuthMiddleware

NavigationOptions

AuthOptions

Context Types

AuthContextType

Component Props

AuthProviderProps

CallbackPageProps

AdditionalPage

Usage Example