This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, install dependencies:

pnpm install

Next, set your URL. This can be local host on development and should be your domain on prod.

NEXT_PUBLIC_URL

Supabase

Then set up Supabase:

Create a new Supabase project and configure your keys in the .env file accordingly

DATABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
NEXT_PUBLIC_SUPABASE_URL
SUPABASE_SERVICE_ROLE

Drizzle

Now set up drizzle:

Drizzle is set up already in the app > db directory. In the db > schema.ts file configure the user_profile table to your liking. The fields that can be removed are annotated with a comment

Run migrations

npx drizzle-kit generate
npx drizzle-kit migrate

Supabase Trigger

Set up a function and trigger in Supabase to automatically create a new user profile when a user signs up.

Create Function in Supabase UI. (In your project, open the menu, then Database, then Functions)

Function return type = trigger Advanced settings switch type of security to SECURITY DEFINER

BEGIN
    INSERT INTO public.user_profile (user_id, created_at, updated_at)
    VALUES (NEW.id, now(), now());
    RETURN NEW;
END;

Create trigger in SQL editor

CREATE TRIGGER trigger_name
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION function_name();

Google Oauth

Then, set up Google Auth:

Follow the supabase guide to set up your Google Oauth. All you need to do is create project in google cloud and configure the variables in supabase https://supabase.com/docs/guides/auth/social-login/auth-google

Resend

Finally, set up resend for emails

Create a resend account and configure your domain and email address. Create and api key and add it to your env.

RESEND_API_KEY
NOREPLY_EMAIL # This is the main email address your app should send emails from. Make sure this is configured in Resend as well

Stripe

Set up a stripe account and add your API keys

STRIPE_SECRET_KEY
STRIPE_PUBLIC_KEY

Create webhook that route to the following URLs:

Route: www.APPURL.com/api/stripe/payment Allowed Events:

"checkout.session.completed", "customer.subscription.created", "customer.subscription.updated", "customer.subscription.deleted", "invoice.paid"

Route: www.APPURL.com/api/stripe/products Allowed Events:

"product.created", "product.updated", "price.created", "price.updated", "price.deleted", "product.deleted"

Add the webhook secret variable

STRIPE_WEBHOOK_SECRET

Add your products in stripe and they will carry over into your database. When in test mode you will need to use the stripe-cli to route the test events

!!Important DB Structure Note:

The database structure assumes a users can only make a single one time purchase. If a user were to make a 2nd 1 time purchase the original DB row will be updated with the new purchase data.

The database structure assumes a user can only have one subscription. If a user buys a 2nd subscription, and or cancels then renews a subscription. The original DB row will be updated with the new subscription data.

The database structure assumes a user can either have a subscription or a one time purchase but not both. The original DB row will be updated with the new purchase data

Final Touches

You will want to review all the pages for boilerplate text. The name "APP" is in the files listed below and should be replaced with your actual app name. This is also the time to review the copy on the sites pages and change them accordingly

Files with "APP" name:

login > page.tsx register > page.tsx components > emails > confirm-account-email.tsx components > emails > reset-password-email.tsx lib > supabase > utils > auth-actions.tsx