uixmat / firestarta

Next.js SaaS boilerplate with NextAuth, Prisma, Supabase, Shadcn/ui & Lemon Squeezy Subscriptions

A Next.js SaaS Boilerplate

This repository serves as a starting point (or boilerplate) for any Next.js SaaS project that requires user authentication and management and subscription payments. It currently uses Prisma with a Postgres database and is being built out using shadcn/ui components besides custom sass components when needed.

Live 👉 Firestarta.dev

Note

Now using yarn 4.1.0 through Corepack.

The stack

Changes or additions to teh stack will be updated here

• Next.js
• NextAuth
• Typescript
• Prisma
• Supabase (Postgres)
• Lemon Squeezy (Subscriptions)
• Sass
• shadcn/ui
• Lucide icons

Features

Features are developed in no specific order

• App directory
• Route Groups
• Intercepting & Parallel Routes
• CSR/SSR
• Subscriptions with Lemon Squeezy
• Basic SEO
• User Profiles
• Account Pages
• Custom Components
• Light/Dark Modes temporarily removed
• Responsive Design
• Light mode (Theme)
• Dasboard layouts
• Cookies
• Internationalisation (Multi-lingual)
• Custom errors
• Loading states loading.tsx
• Sitemap
• Manifest
• Blog

Preview

Setup

Create a .env.local file and generate NextAuth secret using:

openssl rand -base64 32

.env.local

NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000

GITHUB_SECRET=
GITHUB_ID=

DATABASE_URL=

LEMONSQUEEZY_STORE_ID=
LEMONSQUEEZY_API_KEY=
LEMONSQUEEZY_WEBHOOK_SECRET=

Set up GitHub Authentication

Tip

To setup Github visit https://github.com/settings/apps to create a new app. the callback URL should be: [origin]/api/auth/callback/[provider] as stated in the NextAuth documentation.

Getting Started

npx prisma migrate dev --name init
yarn dev

Open http://localhost:3000 with your browser to see the result.

firestarta's Issues

Modal bug

Bug exists where after opening modal (user profiles) you can no longer click on anything.

Duplicate code in lib/auth/auth.ts

Hi,
Duplicate code in src/lib/auth/auth.ts
line 50-52,
if (token?.userId) { (session.user as CustomUser).id = token.userId as string; }

lines 56-..
if (token?.userId) { (session.user as CustomUser).id = token.userId as string; ...

Add Clerk as auth provider

Would it be possible to retro fit Clerk's user management (signup/signin/profile) with the existing auth code?

I ran into some trouble (more skill limitations) trying to add auth providers to the existing Github provider but am running in to so many errors that I wondered if it would not be easier to integrate Clerk into your implementation which is fully managed auth?

I would do this myself and create a PR but I am not confident enough to do this without undoing your good work with Lemon Squeezy, which is why I came to fork :) .

Have you got something like Clerk on your roadmap or any advice on how to integrate Clerk with this?

Thanks for the awesome work and killer template!

Nothing happens when clicking "manage subscription"

The button Manage Subscription seems to do nothing when the user is loggued

Edit: it's due to userSubscriptions, as if we change by the following code it works (but the variable name isn't correct, it would be better to either correct the variable init, or to change the logic, both would be ok.

{userSubscriptions ? (

) : (
Manage Subscription
)}

Modal breaks layout.tsx

Including the modal in layout.tsx is breaking the build process after adding next-intl routing.

Build error

Failed to compile.
21:31:58.206 |  
21:31:58.206 | src/app/[locale]/layout.tsx
21:31:58.207 | Type error: Layout "src/app/[locale]/layout.tsx" has an invalid "default" export:
21:31:58.207 | Type "{ children: ReactNode; modal: ReactNode; params: { locale: string; }; }" is not valid.
21:31:58.207 |  
21:31:58.302 | error Command failed with exit code 1.
21:31:58.303 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
21:31:58.322 | Error: Command "yarn run build" exited with 1
21:31:58.993

Hydration Errors

There is a known issue with <ThemeProvider /> and <ThemeSwitcher /> causing hydration errors. They will not affect the website in production or prevent it from deploying but should receive some attention at a later date.

Callback error OAuthAccountNotLinked

Hi Matt... thanks for the template. New to React and still figuring things out.

Deployed the template correctly to Vercel at https://mystoryheroapp.vercel.app/.

First time i signin (on a fresh install, 0 users in the db), i get a "Callback" error on the callback URL.
But, I now have 1 record in users table.

When I refresh and try again, I'm getting an OAuthAccountNotLinked when calling back from GitHub OAuth.

0 records in accounts and subscriptions tables.

Many thanks.

Delete account

Delete account button on the account page is not working.