Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
AuthProvider
✓ import { AuthProvider } from 'react-auth-kit';
✗ const { AuthProvider } = require('react-auth-kit');
The primary context provider for the authentication state. Named import, not default.
createStore
✓ import { createStore } from 'react-auth-kit';
Function to initialize the authentication store. Must be called once to configure `AuthProvider`.
useSignIn
✓ import { useSignIn } from 'react-auth-kit';
✗ import useSignIn from 'react-auth-kit/useSignIn';
One of the core hooks for managing authentication state; all hooks are named imports from the main package.
RequireAuth
✓ import RequireAuth from '@auth-kit/react-router/RequireAuth';
✗ import { PrivateRoute } from 'react-auth-kit';
Since `v3.0.0`, the route protection component moved to a separate sub-package and was renamed from `PrivateRoute` to `RequireAuth`. It's a default export from its specific module path.
This quickstart demonstrates a complete React application using `react-auth-kit` for token-based authentication, featuring login, logout, protected routes, and displaying user information.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider, createStore, useSignIn, useSignOut, useIsAuthenticated, useAuthUser, useAuthHeader, useAuthToken } from 'react-auth-kit';
import { BrowserRouter, Routes, Route, useNavigate, Link } from 'react-router-dom';
import RequireAuth from '@auth-kit/react-router/RequireAuth';
// 1. Create the Auth Store
const store = createStore({
authName: '_auth',
authType: 'cookie',
cookieDomain: window.location.hostname,
cookieSecure: window.location.protocol === 'https:',
});
const LoginPage: React.FC = () => {
const signIn = useSignIn();
const navigate = useNavigate();
const login = () => {
// In a real app, you'd make an API call here to get the token
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE3Mzk4MTc2MDB9'; // Example JWT
const refreshToken = 'refresh-token-example'; // Optional refresh token
const authState = { user: 'John Doe', role: 'admin' }; // Example user state
if (
signIn({
token: token,
expiresIn: 60 * 60, // 1 hour
tokenType: 'Bearer',
authState: authState,
refreshToken: refreshToken, // Optional
refreshTokenExpireIn: 10 * 60 * 60 // 10 hours for refresh token
})
) {
navigate('/dashboard');
} else {
alert('Login failed!');
}
};
return (
<div>
<h1>Login Page</h1>
<button onClick={login}>Simulate Login</button>
<p><Link to="/">Go to Home</Link></p>
</div>
);
};
const DashboardPage: React.FC = () => {
const signOut = useSignOut();
const isAuthenticated = useIsAuthenticated();
const auth = useAuthUser();
const authHeader = useAuthHeader();
const authToken = useAuthToken();
const navigate = useNavigate();
const logout = () => {
signOut();
navigate('/');
};
return (
<div>
<h1>Dashboard Page</h1>
{isAuthenticated() ? (
<>
<p>Welcome, {auth()?.user}!</p>
<p>Your role: {auth()?.role}</p>
<p>Auth Header: {authHeader()}</p>
<p>Auth Token: {authToken()}</p>
<button onClick={logout}>Logout</button>
</>
) : (
<p>You are not authenticated.</p>
)}
<p><Link to="/">Go to Home</Link></p>
</div>
);
};
const HomePage: React.FC = () => (
<div>
<h1>Home Page</h1>
<p>This page is public.</p>
<p><Link to="/dashboard">Go to Dashboard</Link></p>
<p><Link to="/login">Go to Login</Link></p>
</div>
);
const App: React.FC = () => {
return (
<BrowserRouter>
<AuthProvider store={store}>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<LoginPage />} />
<Route
path="/dashboard"
element={
<RequireAuth fallbackPath="/login">
<DashboardPage />
</RequireAuth>
}
/>
</Routes>
</AuthProvider>
</BrowserRouter>
);
};
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Errors
Common errors & fixes
Invariant Violation: You must wrap your application in an <AuthProvider>
Attempting to use `react-auth-kit` hooks (e.g., `useSignIn`, `useAuthUser`) or components (e.g., `RequireAuth`) outside of the `AuthProvider`'s context.
fixEnsure your entire application or the parts that need authentication are wrapped within the `AuthProvider` component, initialized with a `store` created by `createStore`.
Cannot find module 'react-auth-kit/PrivateRoute' or 'react-auth-kit/dist/PrivateRoute'
This error occurs after upgrading to `react-auth-kit` v3.x, where the `PrivateRoute` component was deprecated and moved/renamed.
fixInstall the `@auth-kit/react-router` package (`npm i @auth-kit/react-router`) and replace `PrivateRoute` with `RequireAuth`, importing it as `import RequireAuth from '@auth-kit/react-router/RequireAuth';`.
Argument of type '{ token: string; expiresIn: number; tokenType: string; authState: { user: string; role: string; }; refreshToken: string; refreshTokenExpireIn: number; }' is not assignable to parameter of type 'SignInFunctionParams'.
Incorrect or incomplete parameters provided to the `signIn` function (returned by `useSignIn`), often missing required properties or providing properties with incorrect types.
fixReview the `SignInFunctionParams` interface from `react-auth-kit`'s TypeScript definitions and ensure all required fields (`token`, `expiresIn`, `tokenType`) are present and correctly typed. Also, verify `authState` and `refreshToken` properties if used.
Upgrade
Version history
4.0.2-alpha.11latest on npm
Audit
Dependencies
reactrequiredPeer dependency for all React Auth Kit packages.
react-router-domoptionalRequired for the `@auth-kit/react-router` package's `RequireAuth` component and related utilities.