JavaScript / TypeScript

Next.js → @oauth42/next

The official Next.js SDK wraps NextAuth.js with OAuth42 preconfigured — OIDC discovery, PKCE, token refresh, and session cookies are all handled for you.

1. Install

npm install @oauth42/next next-auth

2. Environment variables

# .env.local
OAUTH42_CLIENT_ID=your_client_id
OAUTH42_CLIENT_SECRET=your_client_secret
OAUTH42_ISSUER=https://auth.oauth42.com
NEXTAUTH_SECRET=$(openssl rand -base64 32)
NEXTAUTH_URL=http://localhost:3000

3. NextAuth route handler

Register the redirect URI http://localhost:3000/api/auth/callback/oauth42 in your OAuth42 dashboard — this is the path NextAuth owns.

// app/api/auth/[...nextauth]/route.ts
import { createAuth } from '@oauth42/next/server';

const { handlers } = createAuth({ cookiePrefix: 'oauth42-app' });

export const { GET, POST } = handlers;

4. Middleware for automatic token refresh

// middleware.ts
import { withOAuth42Auth } from '@oauth42/next/middleware';

export default withOAuth42Auth({
  cookiePrefix: 'oauth42-app',
  publicPaths: ['/api/auth', '/auth'],
});

5. Sign users in

'use client';
import { signIn, useSession } from 'next-auth/react';

export default function LoginButton() {
  const { data: session } = useSession();

  if (session) return <p>Signed in as {session.user?.email}</p>;

  return (
    <button onClick={() => signIn('oauth42', { callbackUrl: '/dashboard' })}>
      Sign in with OAuth42
    </button>
  );
}

Other JS frameworks (Express, React SPA, Vue, etc.)

For non-Next.js apps, use a standard OIDC client library. OAuth42 is a conformant OpenID Connect provider — anything that speaks OIDC discovery works. We recommend openid-client for Node.js and oidc-client-ts for browser SPAs.

Express + openid-client example

The library handles PKCE, state, nonce, and token validation. Register your callback path (e.g. http://localhost:3000/callback) in the OAuth42 dashboard and use the same path below.

import express from 'express';
import session from 'express-session';
import * as oidc from 'openid-client';

const config = await oidc.discovery(
  new URL(process.env.OAUTH42_ISSUER),
  process.env.OAUTH42_CLIENT_ID,
  process.env.OAUTH42_CLIENT_SECRET,
);

const app = express();
app.use(session({ secret: process.env.SESSION_SECRET, resave: false, saveUninitialized: false }));

app.get('/login', async (req, res) => {
  const codeVerifier = oidc.randomPKCECodeVerifier();
  const codeChallenge = await oidc.calculatePKCECodeChallenge(codeVerifier);
  const state = oidc.randomState();

  req.session.codeVerifier = codeVerifier;
  req.session.state = state;

  const authUrl = oidc.buildAuthorizationUrl(config, {
    redirect_uri: 'http://localhost:3000/callback',
    scope: 'openid profile email',
    code_challenge: codeChallenge,
    code_challenge_method: 'S256',
    state,
  });

  res.redirect(authUrl.href);
});

app.get('/callback', async (req, res) => {
  const tokens = await oidc.authorizationCodeGrant(
    config,
    new URL(req.url, 'http://localhost:3000'),
    { pkceCodeVerifier: req.session.codeVerifier, expectedState: req.session.state },
  );
  req.session.tokens = tokens;
  res.redirect('/dashboard');
});

Browser SPA + oidc-client-ts

import { UserManager } from 'oidc-client-ts';

const userManager = new UserManager({
  authority: 'https://auth.oauth42.com',
  client_id: 'your_client_id',
  redirect_uri: window.location.origin + '/callback',
  response_type: 'code',
  scope: 'openid profile email',
});

// Trigger sign-in
await userManager.signinRedirect();

// On /callback page
const user = await userManager.signinRedirectCallback();
console.log(user.profile);

OIDC Discovery

Both SDK paths above use OIDC discovery under the hood. The OAuth42 discovery document lives at:

https://auth.oauth42.com/.well-known/openid-configuration

See OpenID Connect for details on claims, UserInfo, and ID token validation — all of which are handled by the libraries above.