One Click Subscribe on Everynews

One Click Subscribe on Everynews · cho.sh

sendMagicLink: async (
  { email, url, token }: { email: string; url: string; token: string },
  request?: Request
) => Promise<void>

auth.signIn.magicLink(
  options: { email: string; callbackURL?: string },
  fetchOptions?: RequestInit
)

typescript

// Custom token generation
const token = crypto.randomUUID();
await redis.set(`sub_token:${token}`, { email, alertId }, { ex: 300 });

// Custom verification endpoint
app.post("/api/verify-subscription/:token", async (req) => {
  const data = await redis.get(`sub_token:${req.params.token}`);
  if (!data) return error("Invalid token");

  // Create user and subscription
  const user = await createUser(data.email);
  await createSubscription(user.id, data.alertId);

  // Create session
  const session = await createSession(user.id);
  return { success: true, session };
});

typescript

// Database schema
const subscriptionIntents = pgTable("subscription_intents", {
  id: text("id")
    .primaryKey()
    .default(sql`gen_random_uuid()`),
  token: text("token").notNull().unique(),
  email: text("email").notNull(),
  alertId: text("alert_id").notNull(),
  alertName: text("alert_name").notNull(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
  expiresAt: timestamp("expires_at").notNull(),
});

// Store intent before magic link
const token = generateToken();
await db.insert(subscriptionIntents).values({
  token,
  email,
  alertId,
  alertName,
  expiresAt: new Date(Date.now() + 5 * 60 * 1000),
});

// Retrieve in sendMagicLink
const intent = await db.query.subscriptionIntents.findFirst({
  where: and(
    eq(subscriptionIntents.token, token),
    gt(subscriptionIntents.expiresAt, new Date()),
  ),
});

typescript

// Encode intent in URL
const params = new URLSearchParams({
  type: "subscription",
  alertId: alert.id,
  alertName: alert.name,
});

await auth.signIn.magicLink({
  email,
  callbackURL: `/verify?${params.toString()}`,
});

// Parse in sendMagicLink
const url = new URL(magicLinkUrl);
const isSubscription = url.searchParams.get("type") === "subscription";
const alertName = url.searchParams.get("alertName");

typescript

// Client-side implementation
await auth.signIn.magicLink(
  {
    email,
    callbackURL: `/subscriptions/success?alertId=${alert.id}`,
  },
  {
    headers: {
      "X-Subscription-Flow": "true",
      "X-Alert-Id": alert.id,
      "X-Alert-Name": encodeURIComponent(alert.name),
    },
  },
);

// Server-side handling
sendMagicLink: async ({ email, url }, request) => {
  const isSubscription = request?.headers.get("x-subscription-flow") === "true";
  const alertName = request?.headers.get("x-alert-name");

  if (isSubscription && alertName) {
    // Send subscription email
  } else {
    // Send regular email
  }
};

Criteria	Custom Auth	DB Storage	URL Params	Headers
Security	❌❌	✅	❌	✅
Simplicity	❌	❌	✅	✅
Maintainability	❌❌	❌	✅	✅
Performance	✅	❌	✅	✅
User Experience	✅	✅	❌	✅
Total Score	2	2	3	5

One Click Subscribe on Everynews

The Fix (2 clicks, no drama)

But how

Better Auth Framework Limitations

Option 1: Custom Authentication Flow

Option 2: Database-Backed Intent Storage

4.2.2 Implementation Design

Option 3: URL Parameter Passing

Option 4: HTTP Headers via Fetch Options (Selected)

Selected Solution

Decision Matrix

Rationale

Trade-offs Accepted