Set up OAuth authentication

// app/providers.tsx
"use client";

import { PassageProvider } from "@passage-cl/react";
import type { ClientConfig } from "@passage-cl/react";
import { ClientId, RedirectUri } from "@passage-cl/react/universal";

// Module scope: the provider builds a new client whenever `config` changes
// identity, so do not rebuild it on every render.
const config: ClientConfig = {
  clientId: ClientId(process.env.NEXT_PUBLIC_COINLIST_CLIENT_ID!),
  redirectUri: RedirectUri(process.env.NEXT_PUBLIC_COINLIST_REDIRECT_URI!),
  getAccessToken: async () => {
    const res = await fetch("/api/coinlist/oauth/access-token", {
      credentials: "include",
    });
    // 204: there is no session.
    if (res.status === 204) return null;
    // Anything else that is not a token: the SDK could not find out. Throw.
    if (!res.ok) {
      throw new Error("GET /api/coinlist/oauth/access-token failed");
    }
    const data = (await res.json()) as { value: string; expiresAt: string };
    return {
      value: data.value,
      expiresAt: new Date(data.expiresAt),
    };
  },
  onSessionExpired: async () => {
    // The user's CoinList session ended: send them back to sign in.
    window.location.assign("/?session=expired");
  },
};

export function Providers({ children }: { children: React.ReactNode }) {
  return <PassageProvider config={config}>{children}</PassageProvider>;
}

<PassageProvider config={config} locale={params.locale}>{children}</PassageProvider>

"use client";

import { CoinListSignInCardContainer } from "@passage-cl/react";

export function SignInPanel() {
  return <CoinListSignInCardContainer />;
}

// app/oauth/coinlist/callback/page.tsx
"use client";

import { useCompleteOAuth } from "@passage-cl/react";
import type { CompleteOAuthFailureReason } from "@passage-cl/react";
import { useRouter } from "next/navigation";

export default function CoinListCallbackPage() {
  const router = useRouter();

  useCompleteOAuth({
    async postOAuthComplete({ code, codeVerifier }) {
      const res = await fetch("/api/coinlist/oauth/complete", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ code, codeVerifier }),
      });
      return res.ok;
    },
    onFailure(reason: CompleteOAuthFailureReason) {
      router.replace(`/?error=${encodeURIComponent(reason)}`);
    },
    onSuccess() {
      router.replace("/");
    },
  });

  return (
    <div className="flex min-h-screen items-center justify-center">
      <p>Completing sign-in…</p>
    </div>
  );
}

// app/api/coinlist/oauth/complete/route.ts
import { NextResponse } from "next/server";
import { AuthorizationCode, CodeVerifier } from "@passage-cl/react/universal";

import { passageServer } from "@/lib/passage-server";

interface CompleteOAuthRequest {
  code: string;
  codeVerifier: string;
}

export async function POST(req: Request) {
  const body: CompleteOAuthRequest = await req.json();
  const { code, codeVerifier } = body;

  if (typeof code !== "string" || typeof codeVerifier !== "string") {
    return NextResponse.json({ error: "missing_fields" }, { status: 400 });
  }

  const response = NextResponse.json({ ok: true });

  await passageServer(response).auth.completeOAuth({
    code: AuthorizationCode(code),
    codeVerifier: CodeVerifier(codeVerifier),
  });

  return response;
}

// app/api/coinlist/oauth/access-token/route.ts
import { passageServer } from "@/lib/passage-server";
import { copyCookiesFromTo } from "@/lib/session-store";
import type { OAuthAccessToken } from "@passage-cl/react/universal";
import { NextResponse } from "next/server";

export async function GET() {
  const cookieSink = new NextResponse(null, { status: 204 });
  let token: OAuthAccessToken | null;
  try {
    token = await passageServer(cookieSink).auth.getAccessToken();
  } catch (error) {
    // CoinList's token endpoint or the network failed. Not a logout.
    console.error(error);
    return new NextResponse(null, { status: 503 });
  }
  if (token == null) {
    return cookieSink;
  }

  const response = NextResponse.json({
    value: token.value,
    expiresAt: token.expiresAt.toISOString(),
  });
  copyCookiesFromTo(cookieSink, response);
  return response;
}

// app/api/coinlist/oauth/logout/route.ts
import { passageServer } from "@/lib/passage-server";
import { NextResponse } from "next/server";

export async function POST() {
  const response = NextResponse.json({ ok: true });
  await passageServer(response).auth.logout();
  return response;
}