airbadge

airbadge

None

Stars: 84

Visit
 screenshot

Airbadge is a Stripe addon for Auth.js that provides an easy way to create a SaaS site without writing any authentication or payment code. It integrates Stripe Checkout into the signup flow, offers over 50 OAuth options for authentication, allows route and UI restriction based on subscription, enables self-service account management, handles all Stripe webhooks, supports trials and free plans, includes subscription and plan data in the session, and is open source with a BSL license. The project also provides components for conditional UI display based on subscription status and helper functions to restrict route access. Additionally, it offers a billing endpoint with various routes for billing operations. Setup involves installing @airbadge/sveltekit, setting up a database provider for Auth.js, adding environment variables, configuring authentication and billing options, and forwarding Stripe events to localhost.

README:

logo

Stripe + Auth.js + SvelteKit

This project provides an easy way to create a SaaS site.

It is a Stripe addon for Auth.js.

Launch a SaaS app without writing any authentiction or payment code!

Features

  • Integrated Payment: Stripe Checkout is built into the signup flow.
  • Authentication: Over 50 OAuth options (Google, Apple, GitHub...), provided by Auth.js.
  • Authorization: Routes and UI can be restricted based on subscription.
  • Self-service account management: Changing or canceling plans is accessible via /billing/portal.
  • Webhook handling: All Stripe webhooks are handled for you.
  • Trials & Free plans: Checkout can be skipped for free plans or trials.
  • Session data: Subscription and plan data is included in the session.
  • Open source: https://github.com/joshnuss/airbadge
  • BSL Licence: Free to use. With optional paid features.

Authorization

Conditional UI

Conditionally display components based on the user's subscription status.

Two component wrappers are provided:

  • <NonSubscriber/>: Display content when user doesn't have a subscription.
  • <Subscriber/>: Display content when user has a subscription. Can also filter by plan or payment state.

Examples

<script>
  import { Subscriber, NonSubscriber } from '@airbadge/sveltekit'
</script>

<!-- show to all subscribers -->
<Subscriber>
  <p>Welcome back subscriber!</p>
</Subscriber>

<!-- show to unpaid subscribers -->
<Subscriber unpaid>
  <p>Whoops, we couldn't collect a payment.</p>

  <a href="/billing/portal">Upgrade</a>
</Subscriber>

<!-- show to subscribers with canceled subscriptions -->
<Subscriber canceled>
  <p>Your account has been canceled</p>
  <a href="/billing/checkout">Sign up</a>
</Subscriber>

<!-- show to subscribers on the "pro" plan -->
<Subscriber plan="pro">
  You're on the Pro plan!!
</Subscriber>

<!-- show to subscribers on the "pro" or "enterprise" plan -->
<Subscriber plans={["pro", "enterprise"]}>
  You're a real player!!
</Subscriber>

<!-- show to non-subscribers -->
<NonSubscriber>
  <a href="/billing/checkout">Sign up</a>
</NonSubscriber>

Restricting Routes

Guards are helper functions that can restrict access to a route based on the subscription status or plan:

// in +page.server.js
import { nonSubscriber, member } from '@airbadge/sveltekit'

// route is for subscribers only (including canceled, or late on payment)
export const load = subscriber(callback)

// route is for fully paid subscribers only
export const load = subscriber.active(callback)

// route is for past due subscribers only
export const load = subscriber.pastDue(callback)

// route is for unpaid subscribers only
export const load = subscriber.unpaid(callback)

// route is for trailing subscribers only
export const load = subscriber.trialing(callback)

// route is for subscribers that have canceled their subscription
export const load = subscriber.canceled(callback)

// route is for subscribers on the "pro" plan
export const load = subscriber.plan('pro', callback)

// route is for subscribers on the "pro" or "enterprise" plans
export const load = subscriber.plans(['pro', 'enterprise'], callback)

// route is for non-subscribers only
export const load = nonSubscriber(callback)

Billing Endpoint

This package provides a /billing endpoint, similar to how Auth.js provides a /auth endpoint.

The following routes are provided:

  • /billing/checkout: Redirect current user to a Stripe checkout session.
  • /billing/portal: Opens the billing portal for the current signed-in user.
  • /billing/cancel: Cancels the current user's subscription.
  • /billing/webhooks: Handles all Stripe webhooks for you.
  • /billing/plans: List plans in json format.
  • /billing/modify: Modify the current user's billing plan.
  • /billing/checkout/complete: Handles post-checkout housekeeping.

Setup

Install @airbadge/sveltekit:

pnpm i -D @airbadge/sveltekit

Setup a database provider for Auth.js. For example, follow instructions for Prisma:

https://authjs.dev/reference/adapter/prisma

Add environment variables to .env:

PUBLIC_STRIPE_KEY=pk_...
SECRET_STRIPE_KEY=sk_...
DOMAIN=http://localhost:5173
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/auth_stripe_sveltekit_dev?schema=public"

Configure authentication and billing options in src/hooks.server.js:

import { SvelteKitAuth } from '@airbadge/sveltekit'

// use any OAuth provider (or multiple)
import GitHub from '@auth/core/providers/github'

// import prisma client for Auth.js's database adapter
import { PrismaClient } from '@prisma/client'

// init database client
const db = new PrismaClient()

// add Auth.js + Stripe handler
// API is similar to Auth.js
export const handle = SvelteKitAuth({
  // configure database adapter
  adapter: PrismaAdapter(db),

  // configure OAuth providers
  providers: [
    GitHub({
      clientId: env.GITHUB_ID,
      clientSecret: env.GITHUB_SECRET
    })
  ],

  // configure list of plans.
  plans: [
    { id: 'basic', name: 'Basic', price: 1000, default: true },
    { id: 'pro', name: 'Pro', price: 2500 }
    { id: 'enterprise', name: 'Enterprise', price: 10000 }
  ]
})

Forward Stripe events to localhost:

stripe listen --forward-to localhost:5173/billing/webhooks

License

BSL - Business Software License.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for airbadge

Similar Open Source Tools

For similar tasks

For similar jobs