SaaSBox
Search…
Create a NextJS SaaS application in 30 minutes
Create a fully functional SaaS example with authentication, subscriptions, database and a user dashboard built with React / NextJS in 30 minutes for free.
This guide shows how to make a standalone full-stack application residing in your app.yourdomain.com address a fully functional, complete SaaS.
Check out the video demo below for all the essential steps and the final result!
Create a NextJS SaaS application in 30 minutes - The entire tutorial with key steps and end result
Functionality you get:
  • User login, sign up, password reset
  • Marketing pages
  • Pricing page and subscriptions
  • User dashboard based on React/NextJS living in app.yourdomain.com (Running on Vercel)
  • Optional database (based on Google Cloud Firestore (Firebase))
While your React / NextJS application will deliver the core logic of your service that you can independently develop, SaaSBox will handle the authentication of your NextJS app (login, sign up, password reset, user profile React component), as well as subscriptions (creating editing plans with nocode, users subscribing to plans)

Setup Requirements

Pre-requisites:

Get a SaaSBox account by signing up at https://saasbox.net and make sure to set up for a free plan at https://saasbox.net/pricing.
Install npm and NodeJS.

Getting Started

Clone this repo that has a sample dashboard application that has been pre-integrated with SaaSBox authentication package (npm install sbox-auth-next)
Clone the NextJS application starter template at: (TODO: This step currently requires a TailwindUI license, and will be updated with an open source version soon)
1
git clone [email protected]:getsaasbox/saasbox-sample-nextjs-react-app.git
Copied!

Install the NextJS application dependencies:

1
cd saasbox-sample-nextjs-react-app
2
npm install
Copied!

Set up SaaSBox Environment Variables:

NextJS typically uses a file .env.local for environment variables. Edit it as follows using the information from below:
1
// .env.local
2
// Add values WITHOUT "" quotes.
3
SAASBOX_APP_ID=<application id>
4
SAASBOX_API_KEY=<api key>
5
SAASBOX_JWT_SECRET=<JWT secret>
6
NEXTJS_PUBLIC_SAASBOX_DOMAIN=https://nextjs-react-saas.saasbox.net
7
SAASBOX_DOMAIN=https://nextjs-react-saas.saasbox.net
Copied!
You may obtain the above information as below.

Your JWT

Your JWT secret is found on the Outbound JWT Secret screen. Generate one if it doesn't exist.

Your Application ID and API Key

Your application ID is listed above and API key is listed in the bottom part of the page

SaaSBox Domain:

This is the domain that you have set up from the "Domain" > "Subdomain" tab for your application. On the free plan you may use any available subdomain, e.g. your-application.saasbox.net. On Paid plans you may set up your own domain with https support.

Run your NextJS application:

npm run dev
You should see your application compile and show a similar screen on your terminal as follows:
At this point we are done setting up our standalone SaaS dashboard application based on React/NextJS.

Setup NGrok Tunnel

NGrok will enable your application running on your developer machine (localhost) to be accessible from the Internet. This includes sending and receiving requests to and from your SaaSBox application living in https://your-app.saasbox.net
  • Sign up to ngrok at ngrok.com
  • Go through Setup & Installation at dashboard.ngrok.com
As of today the setup includes:
  1. 1.
    Download ngrok-version.zip on your local computer.
  2. 2.
    Open up a terminal and unzip ngrok-version.zip. You will now see the ngrok executable in the current directory.
  3. 3.
    Set up your auth token issuing the command:
    ./ngrok authtoken <your token>
  4. 4.
    Run Ngrok:
    ./ngrok http 3000
  5. 5.
    Take a note of the tunnel address that has been created and shown on your terminal, e.g.:
    https://c00b-47-224-207-237.ngrok.io -> http://localhost:3000

Why do we do this again?

Your NextJS application running on http://localhost:3000 will be accessible on the internet at the tunnel endpoint created at https://c00b-47-224-207-237.ngrok.io

Setup SaaSBox to redirect logged in users to your application

This step will create the connection from https://your-application.saasbox.net to your standalone application running at https://localhost:3000, using the NGrok tunnel we created, e.g. in this example at the temporary address https://c00b-47-224-207-237.ngrok.io
Your users will log in, sign up and subscribe to plans at https://your-application.saasbox.net and then be redirected to your standalone dashboard.
Let's set this up:
Setting up the connection from SaaSBox to Your app
  1. 1.
    Turn on "Enable External Domain for SaaS Application" setting in the App Location screen.
  2. 2.
    Paste your NGrok URL in the input box for Application External Domain
  3. 3.
    Save.
This setting will make sure that any logged in user will be sent to your application, instead of the user dashboard area inside SaaSBox.

Visiting your SaaS with logged in user and plan information

You can now visit your standalone application hosted at localhost:3000 as a logged in user from your SaaSBox application residing in https://your-application.saasbox-net. Let's take a look at an example for how it works.
Step 1: Visit your application and log in.
Step 2: Press the Go To App button in the lower left side of your dashboard.
As the administrator you are redirected to your admin dashboard and need to explicitly press the Go To App button to go to your application.
Standard users will be directly sent to your application after login or sign up.
Step 3: Thats it! You should now be in your standalone SaaS application, with the logged in user information shown in the lower left bottom profile area, and the subscription plan information is also available to your application in the user object.
Last modified 13d ago