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
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)
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
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
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
Turn on "Enable External Domain for SaaS Application" setting in the App Location screen.
Paste your NGrok URL in the input box for Application External Domain
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.