Supabase & Lemon Squeezy magic link integration

In the realm of online sales, the journey from seller to buyer is often marked by complexities. However, with the strategic fusion of Supabase and Lemon Squeezy, a new paradigm emerges, simplifying this journey for both parties.

How it works

To create a plot, a seller (X) puts their product for sale on Lemonsqueezy and a buyer (Y) purchases it. We use the Lemon Squeezy API KEY and a magic link form with Supabase to check if the buyer's email is linked to the purchase. If it is, a magic link is sent to the buyer's email for product access.

Create your store

To create your store, go to Lemon Squeezy. Follow the steps explained there to add your first product. Get the API KEY by going to Settings > API tab from the Store panel and creating one.

Create project

npx create-next-app@latest

Add environment variables

  LEMON_SQUEEZY_KEY=
  NEXT_PUBLIC_SUPABASE_URL=
  NEXT_PUBLIC_SUPABASE_ANON_KEY=

After creating the project and adding environment variables, include Supabase.

npm i @supabase/ssr @supabase/supabase-js

Include the following files in lib > supabase in the main directory of your project.

• client ↗
• server ↗
• middleware ↗

Now I will create a magic link form and then the API file. Then we will include the pages that will be shown to the user who will log in with the magic link.

magic-link-form.tsx

"use client";

import { useState } from "react";

export default function MagicLinkForm() {
  const [email, setEmail] = useState("");

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

The code takes user input in the form of an email address and sends it to /api/customers?email= to check if the user has made any purchases through the Lemon Squeezy API.

app/api/customers/route.ts

import { createClient } from "@/lib/supabase/server";

const BASE_URL = "https://course-onurhan.vercel.app";

export async function GET(request: Request) {
  const supabase = createClient();
  const { searchParams } = new URL(request.url);
  const email = searchParams.get("email");

  if (!email) {

The email template sent to the user does not have the information we want by default. For this, I need to edit the Magic link content as follows.

<h2>Magic Link</h2>

<p>Follow this link to login:</p>
<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=magiclink">Log In</a></p>

After completing these steps, we can now move on to the next step. The user who clicks on the Log In button in the email will be directed to the verification page. Now I am going to build this verification page.

app/auth/confirm/route.ts

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { type EmailOtpType } from "@supabase/supabase-js";
import { cookies } from "next/headers";
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const token_hash = searchParams.get("token_hash");
  const type = searchParams.get("type") as EmailOtpType | null;
  const next = searchParams.get("next") ?? "/";

After that, you can now offer your logged-in user the opportunity to view any page and content using Supabase stuffs.

While writing this post I was inspired by @emilkowalski's story of creating the Video course platform project. I would like to express my gratitude to him. Check out his project.