Forem: Paulo "Heres"

Authentication vs Authorization: The API Injection Mistake You Might Be Making

Paulo "Heres" — Thu, 17 Apr 2025 12:10:27 +0000

When building secure APIs, developers often put a lot of effort into authentication—verifying the identity of a user. But what about authorization—deciding what that user is allowed to do?

Ignoring or misconfiguring authorization is one of the most common security oversights in backend development. Even with a strong authentication system (like JWTs), attackers can inject API calls and access data or perform actions they shouldn't.

Let’s break down the difference, then look at a real example of what can go wrong—and how to fix it.

✅ Authentication vs 🚫 Authorization

Concept	What it Does	Example
Authentication	Confirms who you are	Login with email and password
Authorization	Confirms what you can do	Check if the user is allowed to edit a post

In short:

Authentication answers: “Is this user really John?”
Authorization answers: “Is John allowed to do this?”

🔑 Common Setup: JWT Authentication

A common practice is to use JWT (JSON Web Token) to authenticate users. When a user logs in, the backend generates a JWT that includes some payload—usually the user’s ID or role.

Here’s an example payload:

{
  "user_id": "12345",
  "role": "user",
  "iat": 1713308160,
  "exp": 1713344160
}

This token is signed and sent to the frontend. The client includes it in API requests:

GET /api/orders/98765
Authorization: Bearer eyJhbGciOi...

On the backend, you might decode the token, extract user_id, and trust it blindly:

const userId = decodedToken.user_id;
const orderId = req.params.order_id;

const order = await db.orders.findById(orderId);
return res.json(order);

❌ What’s Wrong Here?

The backend checks that the user is authenticated—but not whether they own the order.

Any user with a valid token can try this:

GET /api/orders/any-other-user-id
Authorization: Bearer eyJhbGciOi...

This is an authorization failure. You're trusting the JWT, but you're not checking whether the user is authorized to access that specific record.

This opens the door to API injection attacks—where attackers manipulate API endpoints and access or modify other users’ data.

🛡️ How to Fix It

You must verify both:

The user is authenticated (JWT is valid)
The user is authorized (owns this resource or has permission)

✅ Example with Authorization Check:

const userId = decodedToken.user_id;
const orderId = req.params.order_id;

const order = await db.orders.findById(orderId);

if (!order || order.user_id !== userId) {
  return res.status(403).json({ error: "Unauthorized" });
}

return res.json(order);

This way, even if a user tries to inject a different order_id, they’ll be denied access unless the order belongs to them.

🔐 Pro Tip: Don’t Trust the Client

Even if the frontend is “locked down,” never rely on the client to enforce rules like:

Hiding buttons for admin-only actions
Sending only their own user_id in the request

The client can be modified, spoofed, or reverse-engineered. All critical access rules must be validated on the backend.

Final Thoughts

Authentication gets you in the door.
Authorization decides what you’re allowed to do once inside.

If you only implement authentication, you’re trusting every user with a key to the building. Without proper authorization, they might still wander into rooms they shouldn’t be in.

Audit your routes. Build role-based or resource-based access checks. Assume nothing from the frontend.

And always remember: a valid JWT does not mean unlimited access.

How I Landed My First Job as a Jr Fullstack Developer

Paulo "Heres" — Sun, 06 Apr 2025 18:30:09 +0000

Getting your first developer job is tough. There’s no sugar-coating it. It feels like everyone wants "junior developers" with 3+ years of experience. But hey—I'm here to tell you it is possible, and I want to share how I landed my first role as a Junior Fullstack Developer. Maybe it'll help someone who's on the same path.

TL;DR

I interned at Thomson Reuters, which gave me some industry exposure.

But what really helped was building Proof of Concepts (POCs) every weekend to sharpen my coding and debugging skills.

I regularly opened random GitHub projects just to understand them—and see if I could tweak or improve them.

I focused on going deep into a few core languages instead of spreading myself too thin.

Being a Program Assistant (PA) also played a huge role. Helping first-year students made me better at reading code, explaining it, and thinking critically.

Internships Are Great—but Don’t Stop There

My internship at Thomson Reuters was a great first step. I got a taste of real-world development, learned how teams collaborate, and became more comfortable with version control, agile workflows, and deadlines.

But internships are short, and honestly, they can only teach you so much. What made the biggest difference for me was what I did outside of that experience.

Weekend POCs: Small Projects, Big Impact

Every weekend, I made it a goal to build something small—a Proof of Concept (POC). It didn’t need to be polished or complete, but it had to solve a problem or test a new idea.

Sometimes it was an API that scraped data. Other times it was a basic frontend app with a cool UI feature I saw online. These mini-projects pushed me to Google harder, debug better, and get more comfortable jumping between backend and frontend.

I wasn’t just writing code—I was learning how to think like a developer.

GitHub: My Favorite Study Tool

One of the best pieces of advice I can give: pick a random project on GitHub, open it, and try to figure out what’s going on.

Look at the file structure, read the README, try running it locally, and then break it. Yep—break it on purpose. Change stuff and see what happens. This not only improved my understanding of how real-world projects are built, but it also helped me become less afraid of code that wasn’t mine.

Reading and understanding other people’s code is a superpower.

Depth > Breadth

I used to feel pressured to learn everything: Python, JavaScript, TypeScript, Go, Rust, etc. But at some point, I realized I was skimming the surface of everything and mastering none.

So I switched gears. I chose a few languages (JavaScript/TypeScript for frontend, Node.js for backend), and went deep. I learned the ins and outs, wrote unit tests, explored frameworks, and even contributed to open source.

It’s better to be solid in a few things than shallow in many.

Teaching Is Learning (Being a PA Helped a Lot)

As a Program Assistant helping first-year students, I got better at breaking down problems and explaining concepts clearly. To teach something well, you have to understand it deeply. So I spent more time reading code, preparing examples, and anticipating questions.

This unexpectedly boosted my own learning, especially when I had to debug someone else’s work or guide them through logic step-by-step.

Final Thoughts

If you're trying to land your first dev job, my biggest advice is: don’t just study code—live in it. Build things. Break things. Read code that’s not yours. Teach someone if you can.

And remember, even the best developers started where you are now—curious, confused, and coding one weekend at a time.

Good luck, and happy coding! 🚀

Scroll SVG Path with Framer Motion

Paulo "Heres" — Sat, 15 Feb 2025 20:31:16 +0000

Hello! Over the past few days, I’ve been diving into the world of SVG path animations that respond to user scroll input.

While the concept is fascinating, I found the original documentation a bit challenging to follow. So, I decided to break it down and share my learnings in this post. If you’ve ever wanted to create a scroll-based SVG path animation, this guide is for you. Let’s get started!

What Are SVG Path Animations?

SVG (Scalable Vector Graphics) path animations allow you to animate the drawing of a path, creating effects like lines being drawn or shapes being revealed. When combined with scroll-based interactions, these animations can add a dynamic and engaging touch to your website.

In this tutorial, we’ll use Framer Motion, a powerful animation library for React, to create an SVG path animation that unfolds as the user scrolls.

The Code Breakdown

Let’s walk through the code step by step to understand how it works.

1. Setting Up the Environment

First, ensure you have Framer Motion installed in your React project. If not, you can install it using:
First, ensure you have Framer Motion installed in your React project. If not, you can install it using:

npm install framer-motion

2. Importing Required Modules

We’ll need a few tools from Framer Motion to make this work:

import { useScroll, useTransform, motion } from "framer-motion";
import { useRef } from "react";

useScroll: Tracks the scroll progress of a target element.
useTransform: Maps the scroll progress to a value we can use for animation.
motion: Provides animated components like motion.svg and motion.path.

3. Creating the Component

Here’s the main component that handles the animation:

export default function Flower() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["0.1 end", "0.7 end"],
  });

  const pathLength = useTransform(scrollYProgress, [0, 1], [0, 1]);

  return (
    <div ref={ref} className="w-full pt-10 md:pt-20">
      <motion.svg
        className="w-full"
        viewBox="0 0 1000 1000"
        preserveAspectRatio="xMidYMid meet"
        xmlns="http://www.w3.org/2000/svg"
      >
        <motion.path
          style={{ pathLength }}
          strokeWidth={2}
          stroke="black"
          fill="none"
          d="M1.25,240.24c4.39-38.39..." //use your own svg path!
        />
      </motion.svg>
    </div>
  );
}

Key Points:

useRef: Creates a reference to the container element, which we’ll track for scroll progress.
useScroll: Tracks the scroll progress of the referenced element. The offset property defines when the animation starts and ends relative to the viewport.
useTransform: Maps the scroll progress (scrollYProgress) to a pathLength value between 0 and 1. This controls how much of the path is visible.
motion.path: The SVG path element that gets animated. The pathLength property is dynamically updated based on the scroll progress.

4. Customizing the SVG Path

The d attribute in the element defines the shape of the path. Replace the placeholder d value with your own SVG path data. You can generate this using tools like SVG Path Editor or export it from design software like Figma or Illustrator.

How It Works

As the user scrolls, the scrollYProgress value changes from 0 to 1.
This value is mapped to the pathLength property of the element.
The pathLength property controls how much of the path is visible, creating the effect of the path being drawn.

Tips for Customization

**Adjust the Offset:** Change the offset values in useScroll to control when the animation starts and ends.

**Add Multiple Paths:** You can animate multiple paths by adding more <motion.path> elements and mapping their pathLength to different scroll ranges.

**Experiment with Styles:** Customize the stroke, strokeWidth, and fill properties to match your design.

Final Thoughts

Scroll-based SVG path animations are a great way to add interactivity and visual interest to your website. With Framer Motion, the process becomes straightforward and highly customizable. I hope this guide helps you get started with your own animations. If you have any questions or want to share your creations, feel free to reach out!

Happy coding! 🎉

High Order Function !== Closure

Paulo "Heres" — Mon, 08 Jan 2024 19:23:01 +0000

TL;DR

Every closure is a higher-order function, but not every higher-order function is a closure. To be a closure, the inner function has to have access to the parameter of the outer function.

Closures and higher-order functions may appear similar, but they have a key differentiation between them (someone I know didn't pass a recent interview for a summer job because he couldn't explain it!). Enough talk, let's get straight to the point:

What are Closures?!
Closures are inner functions that can access the parameters of outer functions. In the example below, the innerFunction can access and use the val parameter from the outerFunction.

function outerFunction(val) {
  return function innerFunction(anotherValue) {
    return `${val} ${anotherValue}`;
  };
}

What are Higher-Order Functions?
Similar to closures, higher-order functions are a structure of a function, but they do not necessarily have to be closures.

function outerFunction(val) {
  return function innerFunction(anotherValue) {
    return `${anotherValue}`;
  };
}

I hope that this may help you! 😁