Setting up authentication

This guide walks you through implementing complete authentication with login, registration, and session management.

Prerequisites

A Kerne account with an app created
Your appId and secretKey from the Kerne dashboard
A backend (Node.js, Next.js, etc.) and React frontend

1. Install the SDKs

npm
pnpm

# Backend
npm install @kerne/server

# Frontend
npm install @kerne/react

pnpm add @kerne/server @kerne/react

2. Configure the server SDK

Create a server-side Kerne client:

// lib/kerne.ts
import { Kerne } from '@kerne/server';

export const kerne = new Kerne({
  appId: process.env.KERNE_APP_ID!,
  secretKey: process.env.KERNE_SECRET_KEY!,
});

Never expose your secretKey on the client. It should only be used in server-side code.

3. Set up the React provider

Wrap your app with KerneProvider:

// app/providers.tsx
import { KerneProvider } from '@kerne/react';

export function Providers({ children }) {
  return (
    <KerneProvider appId={process.env.NEXT_PUBLIC_KERNE_APP_ID}>
      {children}
    </KerneProvider>
  );
}

Use the useAuth hook:

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

function LoginForm() {
  const { login, isAuthenticated } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login({ email, password });
      // Redirect to dashboard
    } catch (error) {
      // Handle error
    }
  };

  // ...
}

5. Create a registration form

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

function RegisterForm() {
  const { register } = useAuth();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await register({ email, password, name });
      // User is now authenticated
    } catch (error) {
      // Handle error (K1008 = email taken)
    }
  };

  // ...
}

6. Protect routes

The simplest way is the <Authenticated> guard - no redirect wiring needed just to hide a page:

import { Authenticated } from '@kerne/react';

function ProtectedPage() {
  return (
    <Authenticated fallback={<LoginPrompt />}>
      <Dashboard />
    </Authenticated>
  );
}

It renders fallback for as long as there’s no confirmed session - that includes the moment the session is still loading, not only an actual logged-out visitor. If that brief flash matters for a given page, branch on isLoading yourself with useAuth() before deciding what to show. If you specifically need a URL redirect (not just hiding content), do the same off isAuthenticated/isLoading from useAuth() with whatever router your framework provides.

Next steps

Set up subscriptions to monetize your app
Gating features — where to check access
Registration modes — who is allowed to sign up

Quick starts

Common tasks

Setting up authentication

Prerequisites

1. Install the SDKs

2. Configure the server SDK

3. Set up the React provider

5. Create a registration form

6. Protect routes

Next steps

​Prerequisites

​1. Install the SDKs

​2. Configure the server SDK

​3. Set up the React provider

​4. Create a login form

​5. Create a registration form

​6. Protect routes

​Next steps

Prerequisites

1. Install the SDKs

2. Configure the server SDK

3. Set up the React provider

4. Create a login form

5. Create a registration form

6. Protect routes

Next steps