Hono

const config = {
  clientId: "YOUR_CLIENT_ID", // Client ID from auth.civic.com
  redirectUrl: 'https://your-backend.com/auth/callback' // change to your domain when deploying
};

import { cors } from 'hono/cors';

app.use(
  cors({
    origin: [
      "http://localhost:5173", // frontend (local development)
      "http://localhost:3020", // backend (local development)
      "https://abc123.ngrok.io", // ngrok tunnel (for cross-origin testing)
      "https://your-frontend.com", // production frontend
    ],
    credentials: true, // Allow cookies to be sent cross-origin
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowHeaders: ['Content-Type', 'Authorization', 'Cookie'],
    exposeHeaders: ['Set-Cookie'],
  }),
);

# Terminal 1: Start your backend
npm start

# Terminal 2: Create HTTPS tunnel to your backend
ngrok http 3020
# Use the https://abc123.ngrok.io URL as your backend URL

# Terminal 3: Create HTTPS tunnel to your frontend
ngrok http 5173
# Use the https://xyz456.ngrok.io URL as your frontend URL

import { Context } from 'hono';
import { getCookie, setCookie, deleteCookie } from 'hono/cookie';
import { CookieStorage, CivicAuth } from '@civic/auth/server';

class HonoCookieStorage extends CookieStorage {
  constructor(private c: Context) {
    // Detect if we're running on HTTPS (production) or HTTP (localhost)
    const isHttps = c.req.header('x-forwarded-proto') === 'https' || 
                    c.req.url.startsWith('https://');

    super({
      secure: isHttps, // Use secure cookies for HTTPS
      sameSite: isHttps ? "none" : "lax", // none for HTTPS cross-origin, lax for localhost
      httpOnly: false, // Allow frontend JavaScript to access cookies
      path: "/", // Ensure cookies are available for all paths
    });
  }

  async get(key: string) {
    return getCookie(this.c, key) ?? null;
  }

  async set(key: string, value: string): Promise<void> {
    setCookie(this.c, key, value, this.settings);
  }

  async delete(key: string): Promise<void> {
    deleteCookie(this.c, key);
  }
}

// Middleware to attach CookieStorage and civicAuth API to each request
app.use('*', async (c, next) => {
  const storage = new HonoCookieStorage(c)
  c.set('storage', storage);
  c.set('civicAuth', new CivicAuth(storage, config));
  return next();
});

import { buildLoginUrl } from '@civic/auth/server';

app.get('/', async (c) => {
  const url = await c.get('civicAuth').buildLoginUrl();

  return c.redirect(url.toString());
});

app.get('/auth/callback', async (c) => {
  const code = c.req.query('code') as string
  const state = c.req.query('state') as string

  try {
    const result = await c.get('civicAuth').handleCallback({
      code,
      state,
      req: c.req,
    });

    if (result.redirectTo) {
      return c.redirect(result.redirectTo);
    }

    if (result.content) {
      return c.html(result.content);
    }

    return c.json({ error: "Internal server error" }, 500);
  } catch (error) {
    return c.redirect("/?error=auth_failed");
  }
});

import { buildLogoutRedirectUrl } from '@civic/auth/server';

app.get('/auth/logout', async (c) => {
  try {
    const urlString = await c.get('civicAuth').buildLogoutRedirectUrl({
      postLogoutRedirectUrl: 'https://your-frontend.com/' // Optional: where to redirect after logout
    });
    await c.get('civicAuth').clearTokens();

    // Convert to URL object to modify parameters
    const url = new URL(urlString);
    // Remove the state parameter to avoid it showing up in the frontend URL
    url.searchParams.delete("state");

    return c.redirect(url.toString());
  } catch (error) {
    console.error("Logout error:", error);
    // If logout URL generation fails, clear tokens and redirect to home
    await c.get('civicAuth').clearTokens();
    return c.redirect("/");
  }
});

import { isLoggedIn } from '@civic/auth/server';

const authMiddleware = async (c: Context, next: Function) => {
  if (!(await c.get('civicAuth').isLoggedIn())) return c.text('Unauthorized', 401);
  return next();
};

// Apply authentication middleware to any routes that need it
app.use('/admin/*', authMiddleware);

import { user } from '@civic/auth/server';

app.get('/admin/hello', async (c) => {
  const user = await c.get('civicAuth').getUser();
  return c.text(`Hello, ${user?.name}!`);
});

import { CivicAuth } from "@civic/auth/vanillajs";

// Configure client to use your backend for login URLs
const authClient = await CivicAuth.create({
  loginUrl: "https://your-backend.com/auth/login-url", // Your backend endpoint
});

// Now authentication works through your backend
const { user } = await authClient.startAuthentication();

app.get("/auth/login-url", async (c) => {
  const loginUrl = await c.get('civicAuth').buildLoginUrl();
  return c.json({ loginUrl: loginUrl.toString() });
});

const config = {
  clientId: "YOUR_CLIENT_ID", // Client ID from auth.civic.com
  redirectUrl: 'https://your-backend.com/auth/callback', // OAuth callback URL
  postLogoutRedirectUrl: 'https://your-frontend.com/', // Where to redirect after logout (Optional)
  loginSuccessUrl: 'https://your-frontend.com/', // Optional: redirect Single Page Applications back to frontend after auth (optional)
  oauthServer: 'https://auth.civic.com/oauth' // Optional: OAuth server URL (for development/testing) 
};