Introduction

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 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-react

More 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 EasybaseProject

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 documentation here.

Heres 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 Reacts 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 users 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. Its important to understand that these functions relating to your collections will only work on a signed in instance. Easybases React database library is powerful and easy to integrate into your projects and works extremely well with user authentication. Read more here. Heres a basic example of using an 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.

Furthermore, this serverless technology works particularly well with cloud functions (also known as Function-as-a-Service). This resource demonstrates how to easily deploy cloud functions with Easybase + React.

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.