Skip to main content

Next.js & blueprint-auth

This page is an optional Next.js reference for pattern B. It is not required to use the widget, and it is not available outside Next.js.

@krakentech/blueprint-auth is a Kraken library for Next.js (App Router). It is published on the private @krakentech npm registry — ask Kraken for access if your team does not already have it.

If your app uses it, you get login, httpOnly cookie storage, token refresh, and a server-side GraphQL client without wiring those yourself.

note

Do not use blueprint-auth if your app is Vue, plain Vite, Express-only, etc. Use pattern A or pattern B with your own auth stack instead.

Request flow​

User signs in (your login page)
  → blueprint-auth obtains a Kraken token
  → httpOnly cookies (access + refresh)

Widget (browser)
  → POST https://your-app.example.com/api/graphql
     (no Authorization header from widget)

Your POST /api/graphql route (server)
  → blueprint-auth server GraphQL client
  → reads httpOnly cookie, attaches Authorization: Bearer …
  → forwards to your Kraken GraphQL endpoint

Responsibilities​

PieceResponsibility
Auth configcreateAuthConfig — routes, Kraken endpoint env vars
App Router authcreateAppRouterAuth — login, logout, getSession, server GraphQL client
Route protectioncreateAuthMiddleware — redirect unauthenticated users, refresh expired tokens
Your proxy routePOST /api/graphql — forward the body using the server GraphQL client
WidgetapiUrl, accountNumber, userEmail only

The widget is never involved in the token lifecycle — login, storage, attaching Authorization, and refresh are all owned by your app and blueprint-auth.

Illustrative setup (App Router)​

warning

API names below match @krakentech/blueprint-auth at the time of writing — confirm against the blueprint-auth documentation for your installed version.

1. Create your auth module (once per app):

// lib/auth/server.ts
'use server';

import { createAppRouterAuth } from '@krakentech/blueprint-auth/server';
import { cookies, headers } from 'next/headers';
import { cache } from 'react';
import { authConfig } from './config';

export const { login, logout, getSession, getUserScopedGraphQLClient } =
  createAppRouterAuth(authConfig, { cache, cookies, headers });

2. GraphQL proxy route:

// app/api/graphql/route.ts
import { getSession, getUserScopedGraphQLClient } from '@/lib/auth/server';

export async function POST(request: Request) {
  const session = await getSession();
  if (!session.isAuthenticated) {
    return Response.json(
      { errors: [{ message: 'Not authenticated' }] },
      { status: 401 },
    );
  }

  const body = await request.json();
  const client = getUserScopedGraphQLClient();
  const data = await client.request(body.query, body.variables);
  return Response.json({ data });
}

3. Point the widget at the proxy (client component):

'use client';

import { InkLiveChatWidget } from '@krakentech/ink-live-chat-widget-react';

export function Chat() {
  return (
    <InkLiveChatWidget
      config={{
        apiUrl: '/api/graphql',
        accountNumber: 'A-123',
        userEmail: 'user@example.com',
        // no getHeaders — the proxy attaches the token
      }}
    />
  );
}

getUserScopedGraphQLClient is not part of this widget — it is returned by createAppRouterAuth, which you re-export from your lib/auth/server module.