Authentication for Next.js

npm install @nomacms/js-sdk

NOMA_PROJECT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
# Used by the Server Action to exchange the Google credential with Noma.
NEXT_PUBLIC_GOOGLE_CLIENT_ID=xxxxxxxxxx.apps.googleusercontent.com

// lib/session.ts
import { cookies } from "next/headers";
import { createClient, type AuthTokenResponse } from "@nomacms/js-sdk";
 
const COOKIE_NAME = "noma_session";
const projectId = process.env.NOMA_PROJECT_ID!;
 
type StoredSession = {
  accessToken: string;
  refreshToken?: string;
  expiresAt?: string;
};
 
export async function saveSession(res: AuthTokenResponse) {
  if (!res.access_token) return;
  const data: StoredSession = {
    accessToken: res.access_token,
    refreshToken: res.refresh_token,
    expiresAt: res.expires_at,
  };
  const jar = await cookies();
  jar.set(COOKIE_NAME, JSON.stringify(data), {
    httpOnly: true,
    sameSite: "lax",
    secure: process.env.NODE_ENV === "production",
    path: "/",
    // Align with refresh token TTL; rotate on refresh.
    maxAge: 60 * 60 * 24 * 30,
  });
}
 
export async function clearSession() {
  const jar = await cookies();
  jar.delete(COOKIE_NAME);
}
 
export async function getSession(): Promise<StoredSession | null> {
  const raw = (await cookies()).get(COOKIE_NAME)?.value;
  if (!raw) return null;
  try {
    return JSON.parse(raw) as StoredSession;
  } catch {
    return null;
  }
}
 
/** Authenticated Noma client bound to the current user's session. */
export async function getNomaUserClient() {
  const session = await getSession();
  if (!session) return null;
  return createClient({
    projectId,
    projectUserAuth: {
      accessToken: session.accessToken,
      refreshToken: session.refreshToken,
      autoRefresh: true,
    },
  });
}

// app/(auth)/actions.ts
"use server";
import { createClient } from "@nomacms/js-sdk";
import { redirect } from "next/navigation";
import { saveSession } from "@/lib/session";
 
const noma = createClient({ projectId: process.env.NOMA_PROJECT_ID! });
 
export async function signUpAction(formData: FormData) {
  const email = String(formData.get("email") ?? "").trim();
  const password = String(formData.get("password") ?? "");
  const display_name = String(formData.get("name") ?? "").trim() || undefined;
 
  const result = await noma.signUp({ email, password, display_name });
 
  if (result.verification_required) {
    // The API returned a verification_token. Deliver the link/code from your app.
    redirect(`/verify?token=${result.verification_token}`);
  }
 
  await saveSession(result);
  redirect("/dashboard");
}
 
export async function signInAction(formData: FormData) {
  const email = String(formData.get("email") ?? "").trim();
  const password = String(formData.get("password") ?? "");
  const result = await noma.signInWithPassword({ email, password });
  await saveSession(result);
  redirect("/dashboard");
}

// app/(auth)/sign-up/page.tsx
import { signUpAction } from "../actions";
 
export default function SignUpPage() {
  return (
    <form action={signUpAction} className="space-y-3">
      <input name="name" placeholder="Display name" />
      <input name="email" type="email" required placeholder="Email" />
      <input name="password" type="password" required minLength={8} placeholder="Password" />
      <button type="submit">Create account</button>
    </form>
  );
}

// app/(auth)/sign-in/page.tsx
import { signInAction } from "../actions";
 
export default function SignInPage() {
  return (
    <form action={signInAction} className="space-y-3">
      <input name="email" type="email" required placeholder="Email" />
      <input name="password" type="password" required placeholder="Password" />
      <button type="submit">Sign in</button>
    </form>
  );
}

// middleware.ts
import { NextResponse, type NextRequest } from "next/server";
 
export const config = { matcher: ["/dashboard/:path*", "/account/:path*"] };
 
export function middleware(req: NextRequest) {
  const hasSession = req.cookies.has("noma_session");
  if (!hasSession) {
    const url = req.nextUrl.clone();
    url.pathname = "/sign-in";
    url.searchParams.set("redirect", req.nextUrl.pathname);
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

// app/dashboard/page.tsx
import { getNomaUserClient } from "@/lib/session";
 
export default async function Dashboard() {
  const noma = await getNomaUserClient();
  if (!noma) return <p>Not signed in.</p>;
 
  const user = await noma.me();
  return <h1>Welcome, {String(user?.display_name ?? user?.email ?? "")}</h1>;
}

// app/(auth)/social-action.ts
"use server";
import { createClient } from "@nomacms/js-sdk";
import { redirect } from "next/navigation";
import { saveSession } from "@/lib/session";
 
const noma = createClient({ projectId: process.env.NOMA_PROJECT_ID! });
 
export async function socialLoginAction(formData: FormData) {
  const id_token = String(formData.get("id_token") ?? "");
  const result = await noma.signInWithSocial({ provider: "google", id_token });
  await saveSession(result);
  redirect("/dashboard");
}

// components/google-button.tsx (client component)
"use client";
import Script from "next/script";
import { useEffect, useRef } from "react";
import { socialLoginAction } from "@/app/(auth)/social-action";
 
declare global {
  interface Window {
    google?: { accounts: { id: { initialize: Function; renderButton: Function } } };
  }
}
 
export function GoogleButton() {
  const ref = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    if (!window.google || !ref.current) return;
    window.google.accounts.id.initialize({
      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      callback: async (resp: { credential: string }) => {
        const fd = new FormData();
        fd.set("id_token", resp.credential);
        await socialLoginAction(fd);
      },
    });
    window.google.accounts.id.renderButton(ref.current, { theme: "outline" });
  }, []);
 
  return (
    <>
      <Script src="https://accounts.google.com/gsi/client" strategy="afterInteractive" />
      <div ref={ref} />
    </>
  );
}

// app/(auth)/signout-action.ts
"use server";
import { redirect } from "next/navigation";
import { clearSession, getNomaUserClient } from "@/lib/session";
 
export async function signOutAction() {
  const noma = await getNomaUserClient();
  // 1) Revoke the refresh session on Noma first, then 2) clear the cookie.
  try {
    if (noma) await noma.signOut();
  } finally {
    await clearSession();
  }
  redirect("/");
}