@peak-digital/auth-nuxt

@peak-digital/auth-nuxt

Explicitly imported Nuxt 3/4 browser composable for PEAK Auth PKCE. No Nuxt module registration is needed. It has no runtime dependencies and can be constructed during SSR; call start and complete only in the browser.

npm install @peak-digital/auth-nuxt

Wrap it in your application's composable:

import { usePeakAuth as createPeakAuth } from '@peak-digital/auth-nuxt';
import type { PeakAuthConfig } from '@peak-digital/auth-nuxt';

type LocalSession = { access_token: string; expires_at: string };
export const useAppSignIn = () => {
  const api = useApi(); // your existing API client / base URL
  const auth = useAuthStore(); // your existing local session store
  return createPeakAuth<LocalSession>({
    storageKey: 'my_app_peak_signin',
    getConfig: () => api('/auth/peak/config') as Promise<PeakAuthConfig>,
    exchange: body => api('/auth/peak/login', { method: 'POST', body }) as Promise<LocalSession>,
    onSession: async session => {
      // Application-owned adapter: persist local session and hydrate current user.
      // If hydration fails, clear the session before rethrowing.
      await auth.acceptSession(session);
    },
  });
};

acceptSession above is an application adapter to implement, not a package method. Tournament's adapter should retain its existing token/expires_at storage, fetchUser call and failure cleanup. Cookie-based apps can use their existing cookie flow instead. The package never writes localStorage or interprets roles/session expiry.

Login button: await useAppSignIn().start('/tournaments') from its click handler.

PEAK returns silently when the user is already signed in to PEAK. After your app's own sign-out, call start(redirect, { prompt: 'select_account' }) so the user can pick or switch accounts instead.

Callback page script:

const route = useRoute();
const { complete } = useAppSignIn();
const error = ref('');
onMounted(async () => {
  const query = { ...route.query };
  window.history.replaceState(window.history.state, '', route.path);
  try { await navigateTo(await complete(query), { replace: true }); }
  catch (e) { error.value = e instanceof Error ? e.message : 'Sign-in failed'; }
});

Display error and a link back to sign-in in your own UI. Allow the callback page through local auth middleware. Configure exactly the same redirect URI in PEAK and your backend.

The flow uses Web Crypto S256, random state and verifier, and tab-scoped sessionStorage. Pending state is consumed before processing a callback, expires after ten minutes, and cannot be replayed. One pending login per storage key/tab is supported. Callback errors require restarting sign-in. Return destinations are local paths; login/auth callbacks and unsafe redirects fall back to /. Browser crypto requires a secure context (HTTPS or localhost).

Profile link

Users edit their name, email, password and two-factor in PEAK Auth, not in each app. usePeakAuth returns profileUrl(returnTo?) and openProfile(returnTo?), built from the same getConfig used for sign-in, so apps need no extra code or settings:

const { openProfile } = useAppSignIn();
openProfile();      // back to the current page
openProfile('/');   // back to the app's home page

The link is <PEAK site>/profile?client_id=<clientId>&return_to=<url>, where the PEAK site is the origin of authorizeUrl. returnTo must stay on the app's own origin (relative paths are resolved; anything else falls back to /). PEAK shows a "Back to

Available since 0.2.0; requires a PEAK Auth server with the /profile page.