How to Implement Serverless User Authentication in your React Projects
React has given developers great leverage to deploy enterprise applications across many different devices. This framework has opened the door to writing stateful, beautiful UIs for many application developers.
A common issue that many web-based projects will eventually have to consider is how to handle individual user authentication. We are all familiar with websites that hide user-related data and processes behind a sign-in page; users sign in if they have an account, if not, they can create one. Manually implementing this kind of framework for your individual project can be difficult or insecure. Today I’ll demonstrate to you how easy this is with the easybase-react library. The framework we will implement utilizes a serverless technology stack that is ready for production.
1. Install library
In your project directory, type the following command:
npm install easybase-reactMore information on this package is available on Github. If you don’t know how to create a new react project and would like to learn, take a look at create-react-app.
2. Create Easybase Project
If you don’t already have one, create an account on easybase.io (don’t worry, it’s free). Once you’re logged in, navigate to ‘Projects’ and click the ‘create project’ button. Give this project an identification tag and click ‘create’.
Within this menu you can also specify which tables a user will have the ability to read or write from (we’ll delve further into users). You can set the project’s permissions to read/write all records of a table or just user associated records. User associated records are records that were created or edited by that signed-in user. You can manually associate a record to a user in the easybase row drawer by opening a table and clicking a specific row.
3. Put ebconfig in your project directory
Click the ‘download’ button within your newly created project and place this file in the root of your react project.
├── src/
│ ├── App.js
│ ├── index.js
│ └── ebconfig.js
├── assets/
├── package.json
└── ...4. Wrap Your Components in the EasybaseProvider
Be sure to fulfill the ebconfig prop with your downloaded token.
5. Create a Pattern For Users to Sign In/Sign Up
The EasebaseProvider component will grant all child nodes access to the useEasybase hook. This provides functions such as signIn, signUp, isUserSignedIn, and other user state related function. Read the GitHub documentation here.
Here’s a basic example granting users the ability to sign in or sign up to your React project. (Users will be automatically authenticated if they have previously signed in on that device in the past 24 hours)
The basic idea here is that we use the isUserSignedIn() to determine whether to show our sign-up view or sign-in view. You should use this with React’s code splitting for even faster load times.
If signUp() runs successfully, a new users will be visible in the ‘Users’ tab on Easybase. Also, use the onSignIn function to automatically run a function when a user is authenticated via signIn() or automatically.
Note that a user’s attributes can be edited in the ‘Users’ tab of Easybase and also get/set via the useEasybase hook as well. User attributes simply correspond to an object mapping keys to a string.
Authenticated users now have the ability to read/write records in your configured collections. It’s important to understand that these functions relating to your collections will only work on a signed in instance. Easybase’s React database library is powerful and easy to integrate into your projects and works extremely well with user authentication. Read more here. Here’s a basic example of using a Easybase Frame() on an authenticated instance:
Using the easybase-react framework to handle your projects authentication and data querying makes managing your projects much easier and much more cost-effective. Check out the docs for more information on the Easybase React authentication framework.
Conclusion
The React library for Easybase.io provides developers with the ability to streamline their project backend processes visually. The free-tier covers almost all use cases and makes serverless frameworks and scalable databases accessible for developers of all kind.
Also, live analytics for your new project can be viewed in the ‘Usage’ tab in the Easybase web application. It is at this location that you can view project volume, data transfer, etc. in an organized manner.
Feel free to comment any questions or inquiries! I’ll be sure to get back to you.
Take a look at a walkthrough with Easybase + React here.
Read more: serverless technology.
If you build it, they will come.
