Next.js · Pages Router

npm install @andco/sdk @andco/sdk-react

import { AndcoProvider } from "@andco/sdk-react";
import type { AndcoBrowserOptions } from "@andco/sdk/browser";
import type { AppProps } from "next/app";

const clientOptions: AndcoBrowserOptions = {
  clientId: process.env.NEXT_PUBLIC_ANDCO_CLIENT_ID!,
  redirectTo: process.env.NEXT_PUBLIC_APP_ORIGIN!,
  initialScopes: ["openid", "email", "profile"],
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AndcoProvider clientOptions={clientOptions}>
      <Component {...pageProps} />
    </AndcoProvider>
  );
}

import { useAndcoSession } from "@andco/sdk-react";

export default function Account() {
  const session = useAndcoSession();
  if (session === undefined) return <p>Cargando…</p>;
  return session ? <p>{session.user.email}</p> : <p>Sin sesión</p>;
}

import type { NextApiRequest, NextApiResponse } from "next";
import { andco } from "~/lib/andco";
import { storeTransaction } from "~/lib/session-cookie";

export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
  const { data: request, error } = await andco.oauth.createAuthorizationRequest({
    redirectTo: `${process.env.APP_ORIGIN}/api/andco/callback`,
    scopes: ["openid", "email", "profile"],
  });
  if (error) return res.status(500).json({ error: error.code });

  storeTransaction(res, request);
  res.redirect(request.authorizationUrl.href);
}

import type { NextApiRequest, NextApiResponse } from "next";
import { andco } from "~/lib/andco";
import { readTransaction, writeSessionCookie } from "~/lib/session-cookie";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const request = readTransaction(req);
  if (!request) return res.status(400).json({ error: "missing transaction" });

  const { data: session, error } = await andco.oauth.exchangeCallback({
    callbackUrl: new URL(req.url!, process.env.APP_ORIGIN),
    request,
  });
  if (error) return res.status(400).json({ error: error.code });

  writeSessionCookie(res, session);
  res.redirect("/");
}

import type { NextApiRequest, NextApiResponse } from "next";
import type { AndcoAuthorizationRequest, AndcoSession } from "@andco/sdk";

const SESSION_COOKIE = "andco_session";
const TRANSACTION_COOKIE = "andco_tx";

function cookieHeader(name: string, value: string, maxAge: number): string {
  return `${name}=${encodeURIComponent(value)}; HttpOnly; Path=/; Max-Age=${maxAge}; SameSite=Lax; Secure`;
}

export function storeTransaction(res: NextApiResponse, request: AndcoAuthorizationRequest): void {
  const serialized = JSON.stringify({ ...request, authorizationUrl: request.authorizationUrl.href });
  res.setHeader("Set-Cookie", cookieHeader(TRANSACTION_COOKIE, serialized, 600));
}

export function readTransaction(req: NextApiRequest): AndcoAuthorizationRequest | null {
  const raw = req.cookies[TRANSACTION_COOKIE];
  if (!raw) return null;
  const parsed = JSON.parse(raw);
  return { ...parsed, authorizationUrl: new URL(parsed.authorizationUrl) };
}

export function sessionFromCookie(req: NextApiRequest): AndcoSession | null {
  const raw = req.cookies[SESSION_COOKIE];
  if (!raw) return null;
  try {
    return JSON.parse(raw) as AndcoSession;
  } catch {
    return null;
  }
}

export function writeSessionCookie(res: NextApiResponse, session: AndcoSession): void {
  const maxAge = Math.max(0, session.expiresAt - Math.floor(Date.now() / 1000));
  res.setHeader("Set-Cookie", cookieHeader(SESSION_COOKIE, JSON.stringify(session), maxAge));
}

import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
import { andco } from "~/lib/andco";
import { sessionFromCookie, writeSessionCookie } from "~/lib/session-cookie";
import { isExpired } from "@andco/sdk";

export const getServerSideProps = (async ({ req, res }) => {
  let session = sessionFromCookie(req);
  if (!session) return { redirect: { destination: "/api/andco/authorize", permanent: false } };

  if (isExpired(session) && session.refreshToken) {
    const refreshed = await andco.oauth.refresh(session.refreshToken);
    if (refreshed.error) return { redirect: { destination: "/api/andco/authorize", permanent: false } };
    session = refreshed.data;
    writeSessionCookie(res, session);
  }

  const { data, error } = await andco.with(session).rest.http.GET("/accounts");
  return { props: { accounts: error ? [] : data.data } };
}) satisfies GetServerSideProps;

export default function Accounts({ accounts }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <ul>
      {accounts.map((account) => (
        <li key={account.id}>{account.name}</li>
      ))}
    </ul>
  );
}