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 library. The framework we will implement utilizes a ( ). This architecture will give our project the ability to call user authentication processes directly from our front-end code. easybase-react serverless technology stack learn more about serverless app development 1. Install library In your project directory, type the following command: npm install easybase-react More information on this package is available on . If you don't know how to create a new react project and would like to learn, . Github take a look at create-react-app 2. Create Easybase Project If you don't already have one, create an account on (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'. easybase.io 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 prop with your downloaded token. ebconfig 5. Create a Pattern For Users to Sign In/Sign Up The component will grant all child nodes access to the useEasybase hook. This provides functions such as , , , and other user state related function. . EasebaseProvider signIn signUp isUserSignedIn 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 to determine whether to show our sign-up view or sign-in view. You should use this with for even faster load times. isUserSignedIn() React’s code splitting If runs successfully, a new users will be visible in the ‘Users’ tab on Easybase. Also, use the function to automatically run a function when a user is authenticated via or automatically. signUp() onSignIn signIn() Note that a user’s attributes can be edited in the ‘Users’ tab of Easybase and also get/set via the hook as well. User attributes simply correspond to an object mapping keys to a string. useEasybase 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. . Here’s a basic example of using an Easybase on an authenticated instance: Read more here Frame() Using the framework to handle your projects authentication and data querying makes managing your projects much easier and much more cost-effective. easybase-react 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 (also known as Function-as-a-Service). This resource demonstrates . cloud functions 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. Previously published at https://codeburst.io/how-to-implement-serverless-user-authentication-in-your-react-projects-5e5e881178b1

Using Reddit & Twitter to Make Your README More Effective

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Using Reddit & Twitter to Make Your README More Effective

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Using Reddit & Twitter to Make Your README More Effective

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps