Add sign-in to a Next.js app with Nautilus

VERNE_API_KEY=vrn_9f8a7...

import { Verne } from '@verne-software/sdk';

// Server-only: this module reads the API key. Import it from server components,
// server actions and route handlers, never from a 'use client' file.
export const verne = new Verne({
  apiKey: process.env.VERNE_API_KEY!,
});

import { cookies } from 'next/headers';
import { VerneAPIError } from '@verne-software/sdk';
import { verne } from './verne';

const TOKEN_COOKIE = 'gate_session';
const SESSION_ID_COOKIE = 'gate_session_id';

type Message = { text: string };
type FlowAnswer = {
  session_token?: string;
  session?: { id: string; expires_at: string };
  ui?: { messages?: Message[]; nodes?: { messages?: Message[] }[] };
};

/** Posts one step of a flow to the flow's own `ui.action` URL. No API key, no cookie. */
async function submit(flow: Record<string, unknown>, body: Record<string, unknown>) {
  const { action } = flow.ui as { action: string };
  const res = await fetch(action, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify(body),
    cache: 'no-store',
  });
  return { status: res.status, answer: (await res.json()) as FlowAnswer };
}

/** Every message Kratos put on the flow, for showing to the user. */
function messagesOf(answer: FlowAnswer): string {
  const all = [
    ...(answer.ui?.messages ?? []),
    ...(answer.ui?.nodes ?? []).flatMap((node) => node.messages ?? []),
  ];
  return all.map((m) => m.text).join(' ') || 'Something went wrong. Try again.';
}

/** Keeps the session on the server side of the browser: an httpOnly cookie. */
async function keepSession(answer: FlowAnswer) {
  const jar = await cookies();
  const options = {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax' as const,
    path: '/',
    expires: new Date(answer.session!.expires_at),
  };
  jar.set(TOKEN_COOKIE, answer.session_token!, options);
  jar.set(SESSION_ID_COOKIE, answer.session!.id, options);
}

export type Result = { ok: true } | { ok: false; error: string };

export async function signUp(email: string, password: string): Promise<Result> {
  const flow = await verne.gate.createRegistrationFlow();
  const traits = { 'traits.email': email, 'traits.locale': 'en' };

  // Step 1: the traits. A 400 that asks for the password is "accepted, continue".
  await submit(flow, { method: 'profile', ...traits });

  // Step 2: the password, with the traits again.
  const { status, answer } = await submit(flow, { method: 'password', ...traits, password });
  if (status !== 200 || !answer.session_token) return { ok: false, error: messagesOf(answer) };

  await keepSession(answer);
  return { ok: true };
}

export async function signIn(email: string, password: string): Promise<Result> {
  const flow = await verne.gate.createLoginFlow();
  const { status, answer } = await submit(flow, { method: 'password', identifier: email, password });
  if (status !== 200 || !answer.session_token) return { ok: false, error: messagesOf(answer) };

  await keepSession(answer);
  return { ok: true };
}

/** The signed-in user's identity id, or null. Asks Gate on every call: revocations count at once. */
export async function currentUserId(): Promise<string | null> {
  const token = (await cookies()).get(TOKEN_COOKIE)?.value;
  if (!token) return null;
  try {
    const session = await verne.gate.sessions.check(token);
    return session.mfa_satisfied ? session.identity_id : null;
  } catch (err) {
    // 401: expired, revoked, or the user was deactivated. 403 mfa_required: a second factor is owed.
    if (err instanceof VerneAPIError && (err.status === 401 || err.code === 'mfa_required')) return null;
    throw err;
  }
}

export async function signOut(): Promise<void> {
  const jar = await cookies();
  const sessionId = jar.get(SESSION_ID_COOKIE)?.value;
  if (sessionId) {
    try {
      await verne.gate.sessions.revoke(sessionId);
    } catch (err) {
      // 404: the session is already gone. Anything else is worth knowing about.
      if (!(err instanceof VerneAPIError && err.status === 404)) throw err;
    }
  }
  jar.delete(TOKEN_COOKIE);
  jar.delete(SESSION_ID_COOKIE);
}

'use server';

import { redirect } from 'next/navigation';
import { signIn, signOut, signUp } from '@/lib/gate';

export type FormState = { error?: string };

function field(form: FormData, name: string) {
  return String(form.get(name) ?? '');
}

export async function signUpAction(_: FormState, form: FormData): Promise<FormState> {
  const result = await signUp(field(form, 'email'), field(form, 'password'));
  if (!result.ok) return { error: result.error };
  redirect('/dashboard');
}

export async function signInAction(_: FormState, form: FormData): Promise<FormState> {
  const result = await signIn(field(form, 'email'), field(form, 'password'));
  if (!result.ok) return { error: result.error };
  redirect('/dashboard');
}

export async function signOutAction() {
  await signOut();
  redirect('/sign-in');
}

'use client';

import { useActionState } from 'react';
import type { FormState } from './actions';

type Props = {
  action: (state: FormState, form: FormData) => Promise<FormState>;
  submitLabel: string;
};

export function AuthForm({ action, submitLabel }: Props) {
  const [state, formAction, pending] = useActionState(action, {});
  return (
    <form action={formAction}>
      <input name="email" type="email" autoComplete="email" required placeholder="Email" />
      <input name="password" type="password" autoComplete="current-password" required placeholder="Password" />
      <button type="submit" disabled={pending}>{submitLabel}</button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

import Link from 'next/link';
import { signUpAction } from '../actions';
import { AuthForm } from '../auth-form';

export default function SignUpPage() {
  return (
    <main>
      <h1>Create an account</h1>
      <AuthForm action={signUpAction} submitLabel="Sign up" />
      <Link href="/sign-in">I already have an account</Link>
    </main>
  );
}

import { redirect } from 'next/navigation';
import { currentUserId } from '@/lib/gate';
import { signOutAction } from '../actions';

export default async function DashboardPage() {
  const userId = await currentUserId();
  if (!userId) redirect('/sign-in');

  return (
    <main>
      <h1>Dashboard</h1>
      <p>Signed in as user {userId}</p>
      <form action={signOutAction}>
        <button type="submit">Sign out</button>
      </form>
    </main>
  );
}