How to setup React User Authentication with Vault Vision Now

FastAuth, a developer-first user authentication solution for React apps, solves a key security need for developers to secure their apps.

React downloads have increased over the previous five years from one million to 16 million daily, in line with NPM trends. React’s expansion is due to its adaptability as a robust frontend framework that pairs well with developer community highlighted by 191k stars and 10.5 million recognized developers, as well as backend systems Applications for React on Github. React developers can quickly integrate and manage user authentication using Vault Vision’s technology.

The rapid deployment of new React apps coincides with shoddy implementation of inadequate authentication systems. The cost of a data breach increased from $3.86 million to $4.24 million in 2021, according to IBM, which is the highest cost in the report’s 17-year history. Remote work has also resulted in an increase in password data breaches, with an average cost of $1.07 million and 20% of breaches attributable to the most common first attack vector—compromised credentials. Given React’s expansion and grip as the framework of choice for services like Airbnb, Dropbox, and Instagram, Vault Vision’s “FastAuth” solution for React apps is a no-brainer for any developer looking to increase growth in their user registration and login flow.

With WebAuthn, OAuth2, FIDO2, and an official OpenID Connect (OIDC) connection, the user authentication platform from Vault Vision provides total security. Vault Vision is a developer-ready platform that prioritizes privacy above tracking scripts and third-party cookies. It is dedicated to data portability and open source SDKs. Vault Vision gives developers and SaaS businesses a “Forever Free” plan with the option to quickly expand up to enterprise level services. This makes user authentication easy to get started with.

Vault Vision’s authentication platform uses passwordless login to protect applications from unauthorized access like phishing attempts, XSS and CSRF attacks, password spray attempts and brute force attacks. Our user authentication platform uses open-source standards, which give a freedom to use open-source libraries rather than specific SDKs. This article highlights the process of adding user authentication to a React app using Vault Vision’s open source React boilerplate starter kit. The steps to setup React user authentication are as follows

Step 1: Navigate to vaultvision.com and click on Get Started to create a new account.

Step 2: To create a new account, enter information such as name, email address, and password. A Fido security token is normally used, but in this blog, account creation will be done using password, as people are more familiar with passwords. After registering, you will be directed to the application management getting started wizard.

Step 3: Enter the Company name and click on Create My Tenant. A tenant with the name company-name.wikey.io will be created. Tenant held all users for the react app, and registered users in that tenant will be able to access the applications linked to the tenant.

Step 4: Under the tenant tab, enter company’s name again and upload the desired logo by clicking the “upload your logo” button. Click on Next.

Step 5: On the Application tab, create a Single Page Web App, enter an application name, and leave all other options as default. Click on Next.

Step 6: Under the Customize tab, confirm that all options are marked as checked to keep all options as default. Click on Next.

Step 7: Account setup has successfully completed under the Done tab. Copy and save all the environment variables as *.env files. These variables are required to connect our react app to vaultvision.

Step 8: Navigate to the vault GitHub repository at https://github.com/vaultvision/react-boilerplate-vv. By clicking on code and copying the GitHub URL, you can clone this repository.

Step 9: Open the console and enter “git clone https://github.com/vaultvision/react-boilerplate-vv.git.” 

Step 10: After downloading the application, run the following commands to install it:

cd react-boilerplate.vv/

npm install –legacy-peer-deps

Step 11: To launch the application, copy the *.env file to the react-boilerplate folder and run the command npm start.

Step 12: Open a web browser and enter the URL localhost:3000; you will notice that the homepage already has a login and register button.

Step 13: Click on login and enter the login credentials to get access to the account.

Step 14: After following the aforementioned steps, gaining access to the dashboard and profile pages will be granted. An example of an ID token and access token on a sample profile page that you can use for future API calls or whatever the application requires.