@jengolabs/auth-react

React SDK for Jengo Auth — hooks, components, and Next.js middleware for client-side authentication.

Installation

npm install @jengolabs/auth-react

Setup

Create an auth client once and reuse it across your app:

// lib/auth.ts
import { createJengoAuthClient } from '@jengolabs/auth-react';

export const authClient = createJengoAuthClient({
  authUrl: process.env.NEXT_PUBLIC_AUTH_URL, // e.g. https://auth.yourdomain.com
});

Hooks

useSession

Returns the current session state for the authenticated user.

import { useSession } from '@jengolabs/auth-react';

export function ProfileButton() {
  const { data: session, isPending } = useSession(process.env.NEXT_PUBLIC_AUTH_URL);

  if (isPending) return <span>Loading...</span>;
  if (!session) return <a href="/sign-in">Sign in</a>;

  return <span>Hello, {session.user.name}</span>;
}

useAuthFetch

Authenticated fetch wrapper that forwards session credentials automatically.

import { useAuthFetch } from '@jengolabs/auth-react';

export function DataList() {
  const authFetch = useAuthFetch(authClient);

  async function load() {
    const res = await authFetch('https://api.yourdomain.com/data');
    return res.json();
  }

  // ...
}

Components

ProtectedRoute

Wraps a route and redirects unauthenticated users to the sign-in page.

import { ProtectedRoute } from '@jengolabs/auth-react';

export default function DashboardPage() {
  return (
    <ProtectedRoute authUrl={process.env.NEXT_PUBLIC_AUTH_URL}>
      <Dashboard />
    </ProtectedRoute>
  );
}

Next.js middleware

Protect routes at the edge — unauthenticated requests are redirected to the sign-in page before the page renders.

// middleware.ts
import { createNextAuthMiddleware } from '@jengolabs/auth-react/middleware/nextjs';

export const middleware = createNextAuthMiddleware({
  authServerUrl: process.env.AUTH_SERVER_URL,
  publicPaths: ['/sign-in', '/api/public'],
  signInPath: '/sign-in', // default
});

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

Auth client methods

The authClient returned by createJengoAuthClient exposes the full Better Auth client API:

// Sign in
await authClient.signIn.email({ email, password });

// Sign out
await authClient.signOut();

// Get current session
const { data } = await authClient.getSession();

// OAuth
await authClient.signIn.social({ provider: 'google' });

License

MIT