At Gigasheet, the big data spreadsheet, security and user experience are top priorities when building and deploying our web application. In case you aren't familiar with Gigasheet, it's a free tool for viewing files online and exploring big data. One of the ways we ensure security priorities are met is by utilizing Auth0 for authentication and authorization.
Recently, we decided to upgrade from Auth0.js to Auth0 React SDK for our React-based web application. We had been using the Auth0.js library for some time but had noticed it took a bit of work to get it to flow with a React application and even then, it wasn’t ideal. Because of this, the developer experience didn’t feel quite right.
In this blog, we will explore the How To and the Benefits of moving from Auth0.js to Auth0 React SDK. Hopefully, you can learn from our experience!
Why Upgrade to Auth0 React SDK?
Goals of Upgrading from Auth0.js
We had some presumptions about what upgrading to the React SDK might hold for us. We hoped that by using the react hooks offered by the SDK, our developer experience would improve. We also hoped this would allow us to refactor the code that handled our authentication.
The solution we had for authentication was hitting a callback URL too many times, which resulted in an awkward loading phase. We thought that if we could improve the authentication piece of our application, we’d be able to increase our speed in authenticating.
Upgrading from Auth0.js to Auth0 React SDK
For us, upgrading from Auth0.js to Auth0 React SDK was a relatively straightforward process but It's recommended to check the Auth0 React SDK documentation and the specific version of your SDK to ensure a smooth transition.
It's also worth noting that, depending on the complexity of your application and the extent of your use of Auth0.js, the upgrade process may require more significant changes.
Here are the general steps we took to upgrade your application:
- Start by installing the Auth0 React SDK in your application by running the command npm install @auth0/auth0-react or yarn add @auth0/auth0-react.
- Once the SDK is installed, you'll need to replace the Auth0.js library with the Auth0 React SDK in your application. This will typically involve removing the Auth0.js import statements and replacing them with the appropriate Auth0 React SDK imports.
- After replacing Auth0.js with the Auth0 React SDK, you'll need to update your application's code to use the new SDK. This will include using the new hooks and components provided by the SDK, as well as updating any existing code that uses Auth0.js.
The Results of the Upgrade to Auth0 React SDK
Our presumptions were correct and our work paid off. We noticed the following upsides.
Better performance
The Auth0 React SDK is optimized for performance which has led to a faster and smoother user experience for our users. We managed to reduce our authentication time by about a second. This is particularly important for our application which handles a sizable number of users and performs complex authentication and authorization tasks.
Security
The Auth0 React SDK still includes built-in security features such as the automatic token refresh that the Auth0.js library had, which has helped to improve the security of our application. Additionally, regular updates to the SDK address the latest security threats and vulnerabilities, providing peace of mind that our application is using the most up-to-date security practices.
Improved developer experience
The Auth0 React SDK is built with React developers in mind and provides more seamless integration with the React ecosystem. This has resulted in a more intuitive and straightforward implementation of Auth0 features. Such features include the ability to use hooks to log in, log out, and check if someone is authenticated within our React application.
Final Thoughts on Auth0 React SDK
The benefits we’ve seen by swapping to Auth0’s React SDK have been remarkable and we are seeing first-hand the benefits Auth0 claims. If you want to see it in action, sign up for a free account at Gigasheet. Upload a file to explore, or just check out an existing data set from our Data Community!
We look forward to growing our application with Auth0 as our identity platform!
The ease of a spreadsheet with the power of a data warehouse.
