I was tasked with building a web application to manage basic authentication. To meet this requirement, I opted to use Next.js and TypeScript, ensuring support for both server-side and client-side rendering and strong typing.
Authentication and session management were implemented using NextAuth library, utilizing JWT tokens with a maximum age of 3 minutes, users can renew their tokens with a single click; however, if the time elapses, they will prompted to reauthenticate.
Notably, the application's UI matches that of InCard.
Note
For Authentication you can use the following for both username and password:
incard
-
✔ Includes at least two pages: login and home.
-
✔ Ensures functionality (e.g., successful login redirects users to the home page).
-
✔ Implements modern form validation.
-
✔ Handles errors effectively (e.g., incorrect details entered or session expiry).
-
✔ Fully responsive website.
-
✔ Deployed version of the solution.
-
✔ Supports both Server-Side Rendering (SSR) and Client-Side Rendering (CSR).
-
✔ Maintains persistent session (login status retained on page reload).
-
✔ Provides both protected & unprotected pages.
-
✔ Automatically redirects to the login page upon session expiry.
-
✔ Includes a suite of demo unit and integration tests.
-
✔ Mimics InCard authentication and home page styles.
-
✔ Includes toast notifications for user-friendly feedback.
-
👨💻 Includes a suite of demo end-to-end tests.