Skip to main content

​
Welcome to logto-authkit

A plug-and-play authentication solution that simplifies @logto/react with prebuilt UI components and hooks for fast authentication setup in React applications. logto-authkit is designed to save you the hassle of setting up authentication from scratch and connecting frontend and server authentication flows. Start quickly with minimal configuration, and migrate to the official Logto SDK later if you need more advanced features.

​
Key features

Frontend components

Prebuilt AuthProvider, UserCenter, CallbackPage, and useAuth hook for seamless React integration

Server authentication

JWT verification with JWKS caching, Express middleware, and Next.js support

Guest mode

Built-in guest user support with fingerprinting for anonymous access

Bundler configuration

Pre-configured settings for Vite, Webpack, and Next.js

​
Frontend features

  • AuthProvider - Easy context provider for Logto authentication with custom navigation support
  • UserCenter - Prebuilt user dropdown/avatar component for your navbar
  • CallbackPage - Handles OAuth callback and popup flows automatically
  • useAuth - React hook for accessing user data and auth actions with middleware support
  • Custom navigation - Integrates with React Router, Next.js, and other routing libraries
  • Guest mode - Built-in guest user support with fingerprinting

​
Server features

  • JWT verification - Manual JWT verification with JWKS caching
  • Express.js middleware - Ready-to-use Express middleware with built-in cookie parsing
  • Next.js support - API routes and middleware helpers for Next.js applications
  • TypeScript support - Full TypeScript definitions included

​
Guest mode

Allow users to browse your app without authentication using the built-in guest mode with fingerprinting:
src/components/Dashboard.tsx
import { useAuth } from '@ouim/logto-authkit'

function Dashboard() {
  const { user } = useAuth({
    middleware: 'guest', // Allow guest users
  })

  return (
    <div>
      {user ? (
        <p>Welcome back, {user.name}!</p>
      ) : (
        <p>You're browsing as a guest</p>
      )}
    </div>
  )
}

​
Bundler support

Pre-configured bundler settings resolve common issues with the jose library and other dependencies:
  • Vite - Pre-configured Vite settings via viteConfig
  • Webpack - Webpack configuration helpers via webpackConfig
  • Next.js - Next.js bundler configuration via nextjsConfig

​
Get started

Installation

Install logto-authkit using npm, yarn, or pnpm

Quick start

Get up and running with authentication in minutes