{"library":"react-auth-kit","title":"React Auth Kit","description":"React Auth Kit is a robust and flexible authentication library for React applications, designed to simplify token-based authentication flows, particularly with JWTs. The current stable release series is `v3.x`, with `v3.1.3` being the latest stable patch, while `v4.0.2-alpha.11` is an active alpha development branch. The library is actively maintained with a regular release cadence, including frequent patch updates and minor feature additions, as well as significant major releases (like `v3.0.0`) that introduce architectural changes. Key differentiators include its adoption of an RxJS-based token store for enhanced performance and reactive state management since version 3.0.0, a monorepo structure allowing for extensible and modular packages, and dedicated integrations like `@auth-kit/react-router` for seamless protected routing and `@auth-kit/next` for Next.js support (introduced in v3.1.0). It fully supports TypeScript, providing type definitions out-of-the-box.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install react-auth-kit"],"cli":null},"imports":["import { AuthProvider } from 'react-auth-kit';","import { createStore } from 'react-auth-kit';","import { useSignIn } from 'react-auth-kit';","import RequireAuth from '@auth-kit/react-router/RequireAuth';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { AuthProvider, createStore, useSignIn, useSignOut, useIsAuthenticated, useAuthUser, useAuthHeader, useAuthToken } from 'react-auth-kit';\nimport { BrowserRouter, Routes, Route, useNavigate, Link } from 'react-router-dom';\nimport RequireAuth from '@auth-kit/react-router/RequireAuth';\n\n// 1. Create the Auth Store\nconst store = createStore({\n  authName: '_auth',\n  authType: 'cookie',\n  cookieDomain: window.location.hostname,\n  cookieSecure: window.location.protocol === 'https:',\n});\n\nconst LoginPage: React.FC = () => {\n  const signIn = useSignIn();\n  const navigate = useNavigate();\n\n  const login = () => {\n    // In a real app, you'd make an API call here to get the token\n    const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE3Mzk4MTc2MDB9'; // Example JWT\n    const refreshToken = 'refresh-token-example'; // Optional refresh token\n    const authState = { user: 'John Doe', role: 'admin' }; // Example user state\n\n    if (\n      signIn({\n        token: token,\n        expiresIn: 60 * 60, // 1 hour\n        tokenType: 'Bearer',\n        authState: authState,\n        refreshToken: refreshToken, // Optional\n        refreshTokenExpireIn: 10 * 60 * 60 // 10 hours for refresh token\n      })\n    ) {\n      navigate('/dashboard');\n    } else {\n      alert('Login failed!');\n    }\n  };\n\n  return (\n    <div>\n      <h1>Login Page</h1>\n      <button onClick={login}>Simulate Login</button>\n      <p><Link to=\"/\">Go to Home</Link></p>\n    </div>\n  );\n};\n\nconst DashboardPage: React.FC = () => {\n  const signOut = useSignOut();\n  const isAuthenticated = useIsAuthenticated();\n  const auth = useAuthUser();\n  const authHeader = useAuthHeader();\n  const authToken = useAuthToken();\n  const navigate = useNavigate();\n\n  const logout = () => {\n    signOut();\n    navigate('/');\n  };\n\n  return (\n    <div>\n      <h1>Dashboard Page</h1>\n      {isAuthenticated() ? (\n        <>\n          <p>Welcome, {auth()?.user}!</p>\n          <p>Your role: {auth()?.role}</p>\n          <p>Auth Header: {authHeader()}</p>\n          <p>Auth Token: {authToken()}</p>\n          <button onClick={logout}>Logout</button>\n        </>\n      ) : (\n        <p>You are not authenticated.</p>\n      )}\n      <p><Link to=\"/\">Go to Home</Link></p>\n    </div>\n  );\n};\n\nconst HomePage: React.FC = () => (\n  <div>\n    <h1>Home Page</h1>\n    <p>This page is public.</p>\n    <p><Link to=\"/dashboard\">Go to Dashboard</Link></p>\n    <p><Link to=\"/login\">Go to Login</Link></p>\n  </div>\n);\n\nconst App: React.FC = () => {\n  return (\n    <BrowserRouter>\n      <AuthProvider store={store}>\n        <Routes>\n          <Route path=\"/\" element={<HomePage />} />\n          <Route path=\"/login\" element={<LoginPage />} />\n          <Route\n            path=\"/dashboard\"\n            element={\n              <RequireAuth fallbackPath=\"/login\">\n                <DashboardPage />\n              </RequireAuth>\n            }\n          />\n        </Routes>\n      </AuthProvider>\n    </BrowserRouter>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);","lang":"typescript","description":"This quickstart demonstrates a complete React application using `react-auth-kit` for token-based authentication, featuring login, logout, protected routes, and displaying user information.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}