Nuxt

IDRA_ISSUER=https://<your-org>.idra.team/api/auth
IDRA_CLIENT_ID=<Client ID>
IDRA_CLIENT_SECRET=<client secret>
APP_URL=http://localhost:3000
SESSION_SECRET=<output of: openssl rand -hex 32>

npx nuxi@4.0.1 init idra-nuxt --template minimal
cd idra-nuxt
npm install nuxt@4.6.3 openid-client@6.8.8
npm install -D @types/node

import type { H3Event } from 'h3';
import * as oidc from 'openid-client';

type Session = {
  flow?: { verifier: string; state: string; nonce: string };
  user?: oidc.UserInfoResponse;
  idToken?: string;
};

export const appUrl = () => process.env.APP_URL!;

// An encrypted cookie. h3 ships with Nuxt.
export const getAppSession = (event: H3Event) =>
  useSession<Session>(event, {
    name: 'app_session',
    password: process.env.SESSION_SECRET!,
    cookie: { httpOnly: true, sameSite: 'lax', secure: appUrl().startsWith('https://') },
  });

let config: Promise<oidc.Configuration> | undefined;

export function getConfig() {
  const issuer = new URL(process.env.IDRA_ISSUER!);
  config ??= oidc.discovery(
    issuer,
    process.env.IDRA_CLIENT_ID!,
    undefined,
    oidc.ClientSecretBasic(process.env.IDRA_CLIENT_SECRET!),
    // Only for an IdRa you run locally on http. Never needed for an https issuer.
    issuer.protocol === 'http:' ? { execute: [oidc.allowInsecureRequests] } : undefined,
  );
  return config;
}

import * as oidc from 'openid-client';

export default defineEventHandler(async (event) => {
  const session = await getAppSession(event);
  const verifier = oidc.randomPKCECodeVerifier();
  const flow = { verifier, state: oidc.randomState(), nonce: oidc.randomNonce() };
  await session.update({ flow });
  const url = oidc.buildAuthorizationUrl(await getConfig(), {
    redirect_uri: `${appUrl()}/callback`,
    scope: 'openid profile email groups',
    code_challenge: await oidc.calculatePKCECodeChallenge(verifier),
    code_challenge_method: 'S256',
    state: flow.state,
    nonce: flow.nonce,
  });
  return sendRedirect(event, url.href);
});

import * as oidc from 'openid-client';

export default defineEventHandler(async (event) => {
  const session = await getAppSession(event);
  const { flow } = session.data;
  if (!flow) return sendRedirect(event, '/login');
  try {
    const config = await getConfig();
    const tokens = await oidc.authorizationCodeGrant(config, new URL(event.path, appUrl()), {
      pkceCodeVerifier: flow.verifier,
      expectedState: flow.state,
      expectedNonce: flow.nonce,
    });
    // The ID token has no email or name: they come from UserInfo.
    const user = await oidc.fetchUserInfo(config, tokens.access_token, tokens.claims()!.sub);
    await session.update({ flow: undefined, user, idToken: tokens.id_token });
  } catch (e) {
    console.error(e);
    setResponseStatus(event, 400);
    return `Sign-in failed: ${(e as Error).message}`;
  }
  return sendRedirect(event, '/');
});

import * as oidc from 'openid-client';

export default defineEventHandler(async (event) => {
  const session = await getAppSession(event);
  const { idToken } = session.data;
  await session.clear();
  if (!idToken) return sendRedirect(event, '/');
  const url = oidc.buildEndSessionUrl(await getConfig(), {
    id_token_hint: idToken,
    post_logout_redirect_uri: `${appUrl()}/`,
  });
  return sendRedirect(event, url.href);
});

export default defineEventHandler(async (event) => {
  const { user } = (await getAppSession(event)).data;
  return { user: user ?? null };
});

<script setup lang="ts">
const { data } = await useFetch('/api/me');
</script>

<template>
  <main>
    <template v-if="data?.user">
      <h1>Signed in</h1>
      <pre>{{ JSON.stringify(data.user, null, 2) }}</pre>
      <a href="/logout">Sign out</a>
    </template>
    <template v-else>
      <h1>Signed out</h1>
      <!-- A plain link, not NuxtLink: this route redirects to another site. -->
      <a href="/login">Sign in with IdRa</a>
    </template>
  </main>
</template>

npm run dev