Users are the pillar of almost all apps. And all of them are used to sign up, receive a welcome mail, log in, and use your app. These steps seem pretty trivial and should not be a challenge for most developers, but since users are so central in an app, what we expose to them as functions are just the tip of the iceberg of what needs to be implemented.
We need to ensure that their passwords are stored securely, and we need to restrict their access to limited application parts. The welcome email can take some time to set up and ensure that it is delivered and not going directly to spam. And all these small things become time-consuming to implement and maintain. Time, that I prefer to spend on the core features of my apps.
At Nebulr all of us have past experience working with very high-paced product development and we have built many products repeatedly. When we started Nebulr with the goal of building products systematically it was rather natural to build components and modules that we can reuse in all our apps.
This blog will introduce you to Nblocks, and in 10 minutes, you will have the following features for both your front end and back end.
- A nice signup flow
- Login
- Forgot password
- User management
- Backend functionality to restrict and secure parts of your application
What we’ll cover here exists in a condensed format in this quickstart. If you go to the link you will notice that the quickstart covers a backend and frontend part. For the backend, we are using NestJS in this case and React for the frontend. To follow along you can run the following two commands to create blank projects.
nest new my-backend npx create-react-app my-frontend --template typescript
Now step into your backend project. And follow steps 1-3 in the quickstart. What you will do is use our npx script to download Nblocks packages. This script will also create a workspace in the Nblocks service where your users will be stored.
When you are done start your backend with the command npm run start. If everything runs smoothly you should see the log message “Nest application successfully started”. The front end part is pretty similar. Do steps 1-3 in the frontend quickstart.
What is important is to make sure that you start your React app on port 8080 since some links that are generated by default will point to localhost:8080. You can configure this later to your liking.
When your front end starts you can go to localhost:8080. You should get directed to a login screen which means that everything is set up correctly. This means that your app has noticed that no user is logged in and sends you to the login screen.
You can now try the signup flow by creating a new account and then log in to the app.
The default login screen & the signup screen
Once you have logged in you see a welcome screen. In this screen, there is a link to a user management screen where you can invite additional users to the app. This is a feature that is necessary if you have team-based applications. One thing you will notice is the column ”Role”. For your application, you will be able to define roles and assign them to different users. We will show you this in a future blog post.
You are all done and your app is ready for users. You saved a lot of time creating backend and frontend code signing up, logging in, forgetting the password, user management, and securing your app. You also saved lots of time figuring out how to integrate with a mail service and setting up your domain correctly so it won’t be detected as spam.
The features you have after running the quickstart will cover whether you have an app where individuals log in or if you have a team-based app where users can invite others.
But there is so much more that you can do from here. We built Nblocks so that you have just as much control as if you would develop everything yourself. You can modify the looks to your liking or change backend-specific parts using our core API.
If you take a look at our developer centre you have tutorials, blogs, and videos on many other topics such as:
Getting your app ready for payments
- How to configure your app
- Customising logo and branding
- and much more.
We build Nblocks based on our own needs and hope it will benefit you as well. If you have any questions, thoughts, or feedback please feel free to reach out on our discord channel or from our website. We would love to hear from you 🙂