Authentication is a vital part of applications. After all, we wouldn’t want to give just anyone access to push the Big Red Button, would we? It’s essential to be able to ensure your application users are who they purport to be. Additionally, not all users are created equally. Some users should have the ability to do things that others should not. Managing all of this is an essential part of application development. That said, it can be a bit boring and potentially insecure to roll your own authentication. On a recent episode of React Wednesday, we sat with Swizec Teller, creator of useAuth, and many books, training materials, and courses on technology. During the show, he live-coded an app and added authentication in just a few minutes. What’s more, he used the documentation as the guide, so you know the docs are good!
Image may be NSFW.
Clik here to view.
The trick with authentication is designing a system that handles all of the specific cases for security. How to store passwords, handle password change requests, and keep user roles are a few examples that come to mind. The “best practices” for authentication are published and available online. Following them, however, requires a substantial amount of effort to build from scratch. Swizec’s useAuth library extracts the complexity and provides a simple way for application developers to integrate authentication and roles-based access by implementing a specific React hook.
Image may be NSFW.
Clik here to view.
The useAuth library provides users, login forms, redirects, state sharing between components, and other authentication processes. Providing security and authentication components and processes through a React Hooks integration simplifies, adding, and supporting authentication in your application. It bears mentioning the useAuth library allows you to control the visual representations of the pages, forms, and components. You’ll be able to ensure branding and theming remain consistent across your application. If you choose to use an OAuth provider, naturally, that provider branding will show in the authentication, but that’s the point, isn’t it? Reassure the user of the processing entity, so they stay comfortable with the process of entering their credentials.
Adding Authentication to an App in 10 minutes or less
Swizec demonstrated how to incorporate useAuth into a new application in less than 10 minutes. While that time is impressive, it’s more impressive that he could do that while TJ and I asked him questions. As mentioned, he used the useAuth documentation as the guide, so you can rest assured it’ll be your trusted resource for your auth integration.
Image may be NSFW.
Clik here to view.
What Providers does useAuth support?
At 13:54, TJ asked Swizec about what providers are supported. Swizec said he started the project on Auth0 and has plans in the near future to add support for additional authentication providers.
Auth0 supports the following types of authentication:
- Username/Password
- Social Login
- Passwordless
Additionally, Auth0 provides a database to hold your user information. Auth0 has reporting to show you who logged in, logged out, and other audit information. Auth0 also provides an easy to use roles workflow where you can create, add, assign, and remove roles for your application.
Swizec did an impromptu demonstration of creating roles, assigning them to a user, then having the application respond to the role. Adding this functionality into the application took just 3 or 4 minutes. You can follow along at 16:04. As I saw this, I could imagine the amount of work one could avoid by not having to build out admin screens to handle user management tasks like this.
Image may be NSFW.
Clik here to view.
The Tradeoff Between Secure and Hassle
The old saying that “the only secure computer is one turned off, in a locked room, with no network access” is still valid. There is a balance between usability and security that you should find for your specific use case. Swiz mentioned one of his companies implemented a “Receive your login password as a one-time-use password via email” process. It was the top source of user churn. Their users preferred the convenience of a username and password over the security of a one-use password.
While much could be debated about the best type of authentication, there isn’t much room for debate that a homegrown authentication system will have more security issues and problems than an authentication system provided by a major authentication provider. The authentication provider has spent the time implementing the best practices and testing needed to ensure their systems do not have gaping security holes.
I always feel more secure using an OAuth login that uses a provider I already trust, like Google or Twitter, rather than creating yet another username and password combination to maintain. Like everyone else in the world, my information has been stolen by nefarious hackers in a data breach. Large providers aren’t immune to data breaches nor lapses in security, but I rest assured they have better systems than the random eCommerce site asking me to “Create an Account.” They also have obtained the expertise to build and test an authentication system.
Image may be NSFW.
Clik here to view.
How to find Swizec
We very much appreciated our time with Swizec Teller. He’s a very bright, helpful, articulate, and smart professional who spends a substantial amount of time helping the community. He’s authored several books, many articles and videos, and technology courses. Here are some places you can find him on the Internet. He’s a great guy and one we’d like to have back on the show one day.
- Swizec Teller Website
- Swizec Teller LinkedIn
- Swizec Teller Twitter
- Swizec Teller YouTube
- Swizec Teller Github
Swizec Teller Books:
The post Making Authentication in React Apps Easy with useAuth appeared first on Digital Primates.