In our previous post we got to the point of displaying an OTP in our card component. Now it is time to refactor a bit and implement a countdown functionality to see when this token will expire. For now we will go ahead and add this logic into our Card component. In order to figure out how to build this countdown timer we first need to understand how the TOTP counter is calculated. ...
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: ...
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. ...