Skip to main content

Protekt React SDK

The Protekt React SDK provides hooks and components for adding authentication to React and Next.js applications. It handles token storage, session refresh, and auth state automatically.

Requirements​

  • React 18 or later
  • A Protekt project Login ID

Installation​

npm install @protekt/react

Setup​

Wrap your application in ProtektProvider. This gives every component in your tree access to auth state and Protekt methods.

// app/layout.jsx (Next.js App Router)
import { ProtektProvider } from '@protekt/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ProtektProvider loginId={process.env.NEXT_PUBLIC_PROTEKT_LOGIN_ID}>
          {children}
        </ProtektProvider>
      </body>
    </html>
  );
}
// index.jsx (Vite / CRA)
import { ProtektProvider } from '@protekt/react';

ReactDOM.createRoot(document.getElementById('root')).render(
  <ProtektProvider loginId="lp_7xqm9...">
    <App />
  </ProtektProvider>
);

Provider options​

PropTypeRequiredDescription
loginIdstringYesYour project's Login ID
redirectUrlstringNoOverride the post-login redirect URL
tokenStorage'cookie' | 'memory'NoWhere to store tokens. Default: 'cookie'
onAuthStateChangefunctionNoCallback fired whenever auth state changes

Core hooks​

useAuth​

The primary hook for auth state and actions.

import { useAuth } from '@protekt/react';

function Navbar() {
  const { user, isLoading, isAuthenticated, login, logout } = useAuth();

  if (isLoading) return <Spinner />;

  return (
    <nav>
      {isAuthenticated ? (
        <>
          <span>{user.email}</span>
          <button onClick={logout}>Sign out</button>
        </>
      ) : (
        <button onClick={login}>Sign in</button>
      )}
    </nav>
  );
}

Returns

ValueTypeDescription
userProtektUser | nullThe currently authenticated user, or null
isLoadingbooleanTrue while the initial auth check is in progress
isAuthenticatedbooleanTrue if there is a valid active session
login()functionRedirects to the Protekt Universal Login page
logout()functionClears the session and redirects to login
accessTokenstring | nullThe current JWT access token

useUser​

Access detailed user profile data.

import { useUser } from '@protekt/react';

function ProfilePage() {
  const { user, isLoading, updateUser } = useUser();

  async function handleUpdate() {
    await updateUser({ metadata: { theme: 'dark' } });
  }

  if (isLoading) return <Spinner />;

  return (
    <div>
      <p>Email: {user.email}</p>
      <p>MFA enabled: {user.mfaEnabled ? 'Yes' : 'No'}</p>
      <button onClick={handleUpdate}>Save preferences</button>
    </div>
  );
}

useSession​

Inspect and manage the current session.

import { useSession } from '@protekt/react';

function SessionInfo() {
  const { sessions, revokeSession, revokeAllSessions } = useSession();

  return (
    <ul>
      {sessions.map((s) => (
        <li key={s.id}>
          {s.userAgent} — {s.ipAddress}
          {!s.isCurrent && (
            <button onClick={() => revokeSession(s.id)}>Remove</button>
          )}
        </li>
      ))}
      <button onClick={() => revokeAllSessions({ keepCurrent: true })}>
        Sign out all other devices
      </button>
    </ul>
  );
}

Components​

ProtectedRoute​

Wrap any page or component to require authentication. Unauthenticated users are automatically redirected to login.

import { ProtectedRoute } from '@protekt/react';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

Props

PropTypeDefaultDescription
redirectTostring'/'Path to redirect unauthenticated users
loadingFallbackReactNodenullRendered while auth state is loading

LoginForm​

A pre-built, accessible login form with email/password support.

import { LoginForm } from '@protekt/react';

function LoginPage() {
  return (
    <LoginForm
      onSuccess={(user) => console.log('Logged in:', user)}
      onError={(error) => console.error(error)}
    />
  );
}

TypeScript​

The SDK ships with full type definitions.

import { useAuth, ProtektUser } from '@protekt/react';

function Greeting() {
  const { user }: { user: ProtektUser | null } = useAuth();
  return user ? <p>Hello, {user.email}</p> : null;
}

Examples​