Member-only story
Building Basic React Authentication
Using hooks and context with react router
I’ve been doing some contract work building app and I have the privilege of a “greenfield” when starting. I’ve chosen some of the usual suspects, React (with Hooks of course!), Styled-Components, React-Router, etc. But while developing it, I came to a problem set — one I stumble on every time: creating a basic authentication system.
To be honest, I don’t really have a standard way to do authentication in React applications. Looking back through my previous work, it seems to be a pretty mixed-bag on how I handle tokens, components, and routing for authentication. So, I have picked one of my favorite ways to manage authentication, refined it a bit, and will use this as a basis for a basic authentication system to react, using react-router.
Note: there were a number of pieces missing from this authentication that needed to be added before I used it, check out the closing notes for some ideas. But these are good first steps to get going!
Goals For This Authentication System
- Private and public routes: This application will have basic “landing” pages, which any user can visit. Along with these, signing up and logging in should be declarative public routes. On the other hand there will be many…