Roll your own authenticator app with KeystoneJS and React - pt 2

In part 1 of this series we built out a basic backend using KeystoneJS. In this part we will go ahead and start a new React frontend that will interact with our backend. We will be using Vite. Let’s get started. Make sure you are in the authenticator folder and run the following: $ yarn create vite@latest yarn create v1.22.21 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "[email protected]" with binaries: - create-vite - cva ✔ Project name: … frontend ✔ Select a framework: › React ✔ Select a variant: › TypeScript Scaffolding project in /home/Mike Conrad/projects/authenticator/frontend... Done. Now run: cd frontend yarn yarn dev Done in 10.20s. Let’s go ahead and go into our frontend directory and get started: ...

January 10, 2024 · 4 min · 749 words · Mike Conrad

Roll your own authenticator app with KeystoneJS and React

In this series of articles we are going to be building an authenticator app using KeystoneJS for the backend and React for the frontend. The concept is pretty simple and yes there are a bunch out there already but I recently had a need to learn some of the ins and outs of TOTP tokens and thought this project would be a fun idea. Let’s get started. Step 1: Init keystone app Open up a terminal and create a blank keystone project. We are going to call our app authenticator to keep things simple. ...

January 3, 2024 · 4 min · 794 words · Mike Conrad