Assignment 2.3: Blog - Backend
by Tomas Trescak· Authentication and Authorisation

0 / 1750 XP
The external project has not been reviewed yet
Please follow instructions below to submit your project

ℹ️ Instructions

It is time to implement the third part of this assignment. This time, you will implement both applications' backends and validate authentication procedures using JWT.

⚙️ Setup

We need to set up the application first, prepare the database and modify test scripts.

Database

Make sure that schema.prisma in packages/db is complete with all the fields from Post.  Once you are happy with the changes, push the changes with pnpm db:push. You can gradually add these fields once you start completing the requirements.

Tests

For assignment two, we faked the login with a cookie, but now we will implement the backend login and jwt token issue. For this, we need to modify some test scripts dealing with authorisation. 

auth.setup.ts

First, find the file auth.setup.ts in the tests/playwright package, comment on the second assignment authorisation, and uncomment the third assignment authorisation. Your file should look like following:

import { test as setup } from "@playwright/test";
import fs from "fs";

setup(
  "authenticate assignment 3",
  { tag: "@a3" },
  async ({ playwright }) => {
    const authFile = ".auth/user.json";

    const apiContext = await playwright.request.newContext();

    await apiContext.post("/api/auth", {
      data: JSON.stringify({ password: "123" }),
      headers: {
        "Content-Type": "application/json",
      },
    });

    await apiContext.storageState({ path: authFile });
  },
);

auth.ts

Second, find the file auth.ts in the apps/admin package, residing in the src/utils folder. This library is responsible for checking whether the token provided is part of the cookies and whether it is valid. This time we validate the content of the token, issued by the JWT package. Make sure to delete the assignment 2 functionality and uncomment assignment 3 functionality. The file should look like following:

import jwt from "jsonwebtoken";
import { env } from "@repo/env/admin"
import { cookies } from "next/headers";

export async function isLoggedIn() {
  const userCookies = await cookies();

  // check that auth_token cookie exists and is valid
  
  const token = userCookies.get("auth_token")?.value;
  return token && jwt.verify(token, env.JWT_SECRET || "");
}

🧪 Running Tests

Run your tests with a new command:

turbo dev:test-3

🎯 Goals

  • ✅ Make sure all your tests pass (both from first and second assignment)
  • ✅ Make the app look as good as you can
  • ✅  You must be able to explain any code in the codebase and your reviews
  • 💬 Validate, discuss and approve all pull requests in your second project

💼 Requirements

This time, you have only few requirements, so make sure to make your app as complete and good looking as you can!. The end to end test correspond to these requirements.

💡Idea! Create a new issue in your repository, where you can track the completion of these items. Just copy-paste them into the Github issue and mark them as complete as you go. Make sure you copy the source from README.md

BACKEND / CLIENT

  • Data is loaded from the database backend
  • Data filtering is done server side and only filtered data is sent to client
  • Each visit of the page increases the post "views" count by one
  • User can "like" the post on the detail screen, NOT on the list screen (hint, create the /api/likes/route.ts route and implement the needed handlers)
  • Liking the post increases the like count by one
  • User can like the post only once (use IP)
  • User can unlike the post, decreasing the like post by one

BACKEND / ADMIN / AUTHORISATION

For these two requirements we do not have End 2 End tests and will be checked manually.

  • The password is checked on server in the /api/auth/route.ts route
    • The POST method is used for login
    • The DELETE method is used for logout
  • The admin home page checks for the presence of JWT token and verifies it, if the token does not exist or is invalid, displays the login control.

BACKEND / ADMIN / LIST SCREEN

  • Logged in user can activate / deactivate a post clicking on the activate button, automatically saving changes

BACKEND / ADMIN / UPDATE SCREEN

  • Logged in user can save changes to database, if the form is validated

BACKEND / ADMIN / CREATE SCREEN

  • Logged in user can create a new post to the database, if the form is validated

💣 BONUS

  • Views do not increase if user have visited the page in the last hour
  • For likes, implement a comprehensive fingerprinting mechanism, since IP approach is problematic when multiple users have the same public facing IP address
  • Move the code to PostgreSQL and simplify the queries
  • Deploy to Vercel

 

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners

Join the discussion to ask questions, share your thoughts, and discuss with other learners
Setup
React Fundamentals
10 points
Next.js
10 points
Advanced React
Databases
10 points
React Hooks
Authentication and Authorisation
10 points
APIs
CI/CD and DevOps
Testing React
Advanced Topics