BlitzTypes

BlitzTypes

Authentication

For Blitztypes, I aimed to create a comprehensive, secure, and professional authentication mainly for learning purposes. To achieve this, I implemented JWT (JSON Web Token) authentication, which is widely regarded as the gold standard in web development. ASP.NET Identity streamlined this process, with a prebuilt JWT validator, automatic password hashing, etc.

Here's how it works:

This token called an access token is valid for 15 minutes upon logging in.

What happens after these 15 minutes? And why 15 minutes? For security reasons, a short-lived access token is highly recommended. After the initial 15 minutes, the token will expire, and the user is officially not logged in anymore. But upon failure of fetching the next user data, the server will check if the user has a valid so-called refreshToken in their cookies, which was also created upon logging in. If the hashed refreshToken is valid, the server will generate another 15-minute valid Access Token. Why a refreshToken? Since you don't want your users to have to log in again every 15 minutes, there's this longer-lived refreshToken, which is valid for a few days to weeks. The trade-off being, that you have to store this refreshToken very securely.

Frontend

Setting up the frontend was relatively straightforward. Since I went for a simple and modern design, I mainly used the Shadcn UI library, which gave me a few singular components that I could customize like Cards, Buttons, Dropdowns, etc., alongside Tailwind CSS and other libraries like recharts.js. This allowed me to quickly set up a frontend and focus on other functionalities I didn't have much experience with.

If you visit Blitztypes, you will notice that the text you're typing is not into a text input field but rather updates the text that you're seeing yourself. Enabling you to directly view your typing progress/mistakes without straining your eyes. It's a clever trick, where you hide the text input field and redirect the input focus when the user clicks in a certain place. The updating of the text works because every single character is an independent object, tracking various information such as isCorrect, color, timeStamp, etc.