5 Easy Steps To Create A React Project With Serverless User Authentication

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 (learn more about serverless app development). This architecture will give our project the ability to call user authentication processes directly from our front-end code.

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.

If you don't already have one, create an account on easybase.io (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.

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
└── ...

Be sure to fulfill the 

ebconfig

 prop with your downloaded token.

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.

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

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.