Take-Home Assessment

Frontend NextJs app handeling authentication

live demo ↗

Report Bug  ·  Request Feature

Introduction:

---

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

🔑 Assessment Requirements:

---

REQUIRED FEATURES:

• ✔ 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.

STRETCH FEATURES:

• ✔ 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.

BONUS FEATURES:

• ✔ Mimics InCard authentication and home page styles.

• ✔ Includes toast notifications for user-friendly feedback.

• 👨‍💻 Includes a suite of demo end-to-end tests.

(back to top)