DEV Community

loading...
Cover image for Adding Serverless User Authentication to Your React Projects

Adding Serverless User Authentication to Your React Projects

mbagley1020 profile image Michael Bagley Originally published at codeburst.io ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

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 Easybase Project

Creating Easybase Project gif

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
└── ...
Enter fullscreen mode Exit fullscreen mode

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.

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

Discussion (6)

pic
Editor guide
Collapse
shaijut profile image
Shaiju T • Edited

Is Serverless authentication good in real project ? Authentication happens multiple times , as more calls hit your serverless function the more you pay, so your serverless hosting bill may become costly . isn't ?

Collapse
fmgordillo profile image
Facundo Martin Gordillo

it's good in the first authentication, but might need another service that serves as "validation", but tbh i have no idea, I'm investigating the same thing as you

Collapse
dilan_ozkaynak profile image
Dilan Ozkaynak

Informative walkthrough. Will be coming back to this.

Collapse
mbagley1020 profile image
Michael Bagley Author

Great to hear!

Collapse
huncyrus profile image
huncyrus

This article show none-to-little about serverless authentication, it is in fact just an advertisement.

Collapse
fmgordillo profile image
Facundo Martin Gordillo

it's called "clickbait" lol