DEV Community: حذيفة

Write a JWT Login Test Using Cypress

حذيفة — Sat, 13 Dec 2025 20:50:07 +0000

Testing JWT Authentication in a React + Laravel Clothes Store with Cypress

After spending two weeks trying to create dashboard tests for our React and Laravel e-commerce application, I hit a major roadblock: authentication. Since our application uses stateless API communication, JWT (JSON Web Tokens) with Laravel Sanctum handles authentication. Here's how I successfully implemented Cypress tests for this setup.

Understanding the Authentication Flow

The login functionality comprises:

Backend: Laravel Sanctum for JWT generation
Frontend: Axios interceptors + React Context for token management
Protection: Dashboard pages wrapped in an authentication context

Backend: Laravel Auth Controller

The key authentication endpoints:

class AuthController extends Controller
{
    public function login(LoginRequest $request): JsonResponse
    {
        if (!Auth::attempt($request->only('email', 'password'))) {
            return $this->error(null, 'Invalid credentials', 401);
        }

        $user = $request->user();
        $token = $user->createToken('auth_token')->plainTextToken;

        return $this->success([
            'user' => $user,
            'token' => $token
        ], 'User logged in successfully.');
    }
}

Route::prefix('auth')->group(function () {
    Route::post('login', [AuthController::class, 'login']);
    Route::get('me', [AuthController::class, 'me']);
});

Frontend: React Authentication Context

The AuthContext manages user state and token storage:

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  const bootstrapAuth = useCallback(async () => {
    const token = localStorage.getItem("token");
    if (!token) {
      setLoading(false);
      return;
    }

    try {
      const { data } = await authApi.me();
      setUser(data.data);
    } catch {
      localStorage.removeItem("token");
      setUser(null);
    } finally {
      setLoading(false);
    }
  }, []);

  async function login(credentials) {
    const { data } = await authApi.login(credentials);
    localStorage.setItem("token", data.data.token);
    setUser(data.data.user);
  }

  if (loading) return <ClothesLoader />;

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Axios Interceptors for Token Management

The interceptor automatically attaches tokens to protected requests:

export const privateClient = axios.create({
  baseURL: import.meta.env.VITE_LARAVEL_APP_API_URL,
  headers: { "Content-Type": "application/json" },
});

privateClient.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Dashboard Route Protection

Protected routes check authentication before loading:

export const Route = createFileRoute("/_dashboard")({
  beforeLoad: ({ context }) => {
    if (!context.auth?.user) {
      throw redirect({ to: "/login" });
    }
  },
  component: DashboardLayout,
});

Implementing Cypress Login Command

The key insight: create a custom Cypress command that mimics the exact authentication flow. This command uses cy.session() to cache login state across tests:

Cypress.Commands.add("login", () => {
  cy.session("admin-session", () => {
    cy.request("POST", `${Cypress.env('apiUrl')}/auth/login`, {
      email: Cypress.env("email"),
      password: Cypress.env("password"),
    }).then((response) => {
      const token = response.body.data.token;
      const user = response.body.data.user;

      cy.window().then((win) => {
        win.localStorage.setItem("token", token);
        win.localStorage.setItem("user", JSON.stringify(user));
      });

      cy.intercept("GET", `${Cypress.env('apiUrl')}/auth/me`, {
        statusCode: 200,
        body: { data: user, message: "User fetched successfully." }
      }).as("getMe");

      cy.visit("/");
      cy.wait("@getMe");
    });
  }, {
    cacheAcrossSpecs: true,
    validate: () => {
      cy.window().then((win) => {
        expect(win.localStorage.getItem("token")).to.exist;
      });
    }
  });
});

Configuration

Set up environment variables in cypress.config.js:

module.exports = defineConfig({
  env: {
    email: 'admin@example.com',
    password: 'securePassword123',
    apiUrl: 'http://clothes-store.test/api/v1'
  },
  e2e: {
    baseUrl: 'http://localhost:5173',
  },
})

Using the Login Command in Tests

Now you can easily authenticate in any test:

describe("Add Product Page", () => {
  beforeEach(() => {
    cy.login();
    cy.visit("/dashboard/products/add");
    cy.contains("Add New Product").should("be.visible");
  });

  it("successfully creates a new product", () => {
    // Test implementation...
  });
});

Key Takeaways

Understand the authentication flow before writing tests
Use cy.session() to cache login state and speed up tests
Mock API responses that occur during authentication bootstrap
Set up environment variables for sensitive credentials
Create reusable commands for common authentication patterns

This approach reduced my test execution time by 60% and made tests more reliable by eliminating flaky login processes.

Resources

Understanding both frontend and backend authentication implementation is crucial for writing effective Cypress tests. The cy.session() command combined with proper API mocking creates a robust testing foundation for JWT-protected applications.

My First CTF Competition Experience

حذيفة — Mon, 25 Aug 2025 00:21:20 +0000

On August 23–24, 2025, a competition was launched in Laayoune by Nouniverse, in partnership with AKASEC Club at 1337 Coding School.

It was my very first experience participating in a Capture the Flag (CTF) competition. I had no prior knowledge in the field of information security, but I did bring along some of my existing skills in web development and Linux.

The Big mistake that I made, I didn't add maximum people to the team, which could lighten the load on us by distributing it among team members.
Anyway, I joined the competition with my friend Ayman, that solve one easy exercise and then disappeared (:, leaving me alone fighting against hard challenges with my windows 10 (:, while the other skilled contesters armed with kali Linux, and I am fighting with Windows 10.

Still, I managed to solve several challenges, and for others, I came very close but got stuck on the final steps.

I didn't prepare a Kali or Parrot, due to this, each time i have to install a tool, BurpSuite for web challenges. Wireshark for another challenge, HexEditor again.. may be we need a Windows distribution just for the PenTesters (:.
also, I used many online websites to win the time, python compiler, C++ compiler, Encryption & Decryption websites, DogBolt for reverse engineering.

By the end of the day, I switched to Parrot OS, booted live from a USB stick, so I keep working, I didn't sleep enough, feeling the need to win can't let you go.

I feel proud to gain these points, first teams gained between 4000 and 3000 points, they have 4 or 3 members, each one gain 1000-2000, that's why I believe that I did my best.

In the end, it was a truly valuable experience. We got the chance to meet elite experts in the field, who shared with us some of the most important insights from the very core of information security.

Custom Layout for Specific Route Group in Tanstack Router - Solution

حذيفة — Sun, 17 Aug 2025 20:26:07 +0000

if you read this issue discussion on GitHub :
Custom Layout for Specific Routes in tanstack/router #1102

you’ll see that this is a big issue. Surprisingly, such a basic feature is not available in a large project like TanStack Router. Even though the issue is marked as resolved, that’s not really the case. I tried all the suggested solutions, but none of them worked for me. I also went through the documentation and found that there’s still no official support for this. However, I managed to solve it with a workaround.

The Scenario :

I am working on a [react + vite + Tanstack Router] Project for a clothes store,
I have two type of pages :

regular pages : Home Page, Product Page, Collection Page, Search Page, Checkout Page.
Dashboard Pages : Statistics Page, CRUD Product Page, Handling Orders Page,

The regular pages anyone can navigate them, and they have layout of <NavBar /> & <Footer />
The Dashboard pages for the admin, and they have layout of <SideBar />

The routing type implemented here is the File-Based Routing.

The Problem :

when I set a custom layout for the dashboard, it wrapped by the layout of the regular pages.

The /src/routes directory Hierarchy :

\routes
|   checkout.jsx
|   collection.jsx
|   index.jsx
|   product.jsx
|   search.jsx
|   __root.jsx
|
\---dashboard
    |   index.jsx
    |   route.jsx
    |   
    \---products
            index.jsx

the src/routes/__root.jsx file :

import { createRootRoute, Outlet } from "@tanstack/react-router";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import NotFoundPage from "@/components/NotFoundPage";

export const Route = createRootRoute({
  notFoundComponent: () => <NotFoundPage />,

  component: () => {
    return (
      <div>
        <Navbar />
        <Outlet />
        <Footer />
      </div>
    );
  },
});

the /src/routes/dashboard/route.jsx file :

import { Outlet, Link, createFileRoute } from "@tanstack/react-router";
import SideBar from "@/componenets/SideBar";

export const Route = createFileRoute("/dashboard")({
  component: () => {
    return (
      <div className="flex h-screen bg-gray-50">
        <SideBar />
        <main className="flex-1 p-6 overflow-y-auto">
          <Outlet />
        </main>
      </div>
    );
  },
});

so when i browse /Dashboard/products
The Given Result :

<NavBar />
  <div className="flex h-screen bg-gray-50">
    <SideBar />
    <main className="flex-1 p-6 overflow-y-auto">
      <Outlet />
    </main>
  </div>
<Footer/>

The Wanted Result :

<div className="flex h-screen bg-gray-50">
  <SideBar />
  <main className="flex-1 p-6 overflow-y-auto">
    <Outlet />
  </main>
</div>

So How can you set a custom Layout for Dashboard Sub Pages.

The Solution :

The trick is to use conditional rendering: if the route starts with /dashboard/, it won’t be wrapped by any component.

the src/routes/__root.jsx file again, but with Conditional Rendering :

import React, { useState} from "react";
import { createRootRoute, Outlet, useLocation } from "@tanstack/react-router";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import NotFoundPage from "../components/NotFoundPage";

export const Route = createRootRoute({
  notFoundComponent: () => <NotFoundPage />,
  component: RootComponent,
});

function RootComponent() {
  const location = useLocation();
  const pathname = location.pathname;

  if (pathname.startsWith("/dashboard")) {
    return <DashboardRoute />;
  } else {
    return <RegularRoute />;
  }
}

function DashboardRoute() {
  return (
    <>
      <Outlet />
    </>
  );
}

function RegularRoute() {
  return (
    <Navbar  />
    <Outlet />
    <Footer />
  );
}

I hope this is helpful to everyone.
leave a love & a comment so more people can reach it.

My First Hackathon Experience : Pediatric health by FMPL

حذيفة — Fri, 11 Jul 2025 17:45:19 +0000

In the south of Morocco, in the city known for its desert landscapes and camels, Laâyoune City hosted a hackathon organized by the FMPL (Faculty of Medicine and Pharmacy of Laâyoune).

Around 15 teams participated, made up of students from various disciplines and institutions, including:

FMPL: Faculty of Medicine and Pharmacy of Laâyoune
ISPITS :Les Instituts Supérieurs des Professions Infirmières et Techniques de Santé
BTS: Brevet de Technicien Superieur
ESTL: Ecole Supérieure de Technologie de Laâyoune
CMC: Cité des Métiers et des Compétences

The central theme of the hackathon was Pediatric Health & Technology, a pressing topic that combines innovation and healthcare for young generations.

The Date is : 30 Jun - 01 July 2025

Before the hackathon kicked off, several conferences were held to set the stage. Here are a few of the key speakers:

Mounir Chaouki : how to manage a creative idea.
Amin Tanani : how to create a business plan.

The atmosphere :

We started the hackathon in a private room, and it wasn’t long before some teams brought in gaming equipment while others focused on their projects. A few played chess. We also gathered for some food with friends — a good excuse to join the hackathon!

After a full day of work, I spent the night sleeping in the faculty mosque — just 4 hours of rest with no blankets, mattresses, or pillows. When I woke up, my back felt like it was broken! Next time, I’ll definitely bring my own "sleep kit."

My group consists of me and my friends, all third-year students from FMPL excepting me. They are:

Faysal Lakouis
Mohammed Amine Leili
Cheikh Naama Samdani

Our idea centered around a SaaS application designed specifically for pediatric medical clinics, with a tiered paid subscription model to cater to different needs. The platform would empower clinics to manage a range of essential services, from scheduling appointments to tracking medical analyses and maintaining detailed vaccination histories. One of the standout features was the integration of interactive graphs, allowing both healthcare providers and parents to visualize and analyze the child's medical data more effectively.

I took charge of developing the Minimum Viable Product (MVP), focusing solely on the front-end using React. This allowed us to quickly prototype the user interface and create an intuitive, user-friendly experience. Meanwhile, the rest of the team focused on other critical aspects: preparing the PowerPoint presentation and fine-tuning the speech they would deliver to the jury, ensuring we could clearly communicate the application’s value and impact.

The Conclusion :

Even though we didn’t win the hackathon or place in the top three, we really enjoyed the experience. It was our first time participating, and we learned a lot from professionals with over 30 years in the industry. Their advice and insights were more valuable than any prize.

For me, the real win in a hackathon is about stealing the show — creating something that makes people say "WOW." It’s not about the tech stack or the position you finish in; what matters is how you present your project and the impression you leave.

Canvas Unleashed: Accelerating Sanity Work as AI Takes the Lead

حذيفة — Tue, 17 Jun 2025 19:01:30 +0000

Most of the time, content creators draft articles or text blocks (like product descriptions or author bios) in tools like Notion or Google Docs. To enhance the writing, they often switch to an LLM like ChatGPT or Gemini. Once the content is finalized, they copy and paste it into Sanity Studio to match the schema. This process is repetitive, time-consuming, and prone to distraction.

🎯 Imagine combining the flexibility of Sanity Studio, the organization of Notion, and the intelligence of ChatGPT—all in one tool. That’s exactly what Canvas delivers.

⚡ Canvas changes that. It brings everything into one seamless workflow. You can write, edit, and enhance your content directly in Canvas. When you're ready, the AI maps your content to your Sanity schema—no more manual copy-paste. And if needed, you can unlink the content from Canvas and continue editing it in Studio.

🧰 What Canvas Offers:

📝 1-Notes :

Instead of storing research and ideas in a separate notes app, Canvas provides a built-in notes panel. It’s perfect for brainstorming and gives the AI assistant valuable context to generate more relevant suggestions.

[add notes, images, PDFs, so you powering the context]

✍️ 2-Rich Text Editor :

A distraction-free writing space where you can draft, revise, and polish your content with the help of an embedded AI co-author.

[after powering context, you can generate suitable paragraphs, even pictures, lists and more...]

🔗 3-Automatic Content Mapping :

Once your draft is ready, you can send it directly to any connected Sanity Studio. Canvas links your free-form writing to structured content—no more tedious copy-paste loops.

[insert a new document automatically]

🛠️ And there’s more on the horizon: collaborative editing inside Canvas is coming soon, allowing teams to co-create content in real time.

✅ So go ahead and close both Notion and your LLM tab. With Canvas, all the features you need are already built in.

تسميات الباقات بين العالمية والهوية: نحو معيار عربي يعبر عنا

حذيفة — Sat, 14 Jun 2025 03:04:21 +0000

لا شك أن كثيرًا منّا قد تصفّح مواقع أجنبية تقدّم خدمات رقمية مدفوعة، ولاحظ أن هناك أسماءً شبه موحّدة تُستخدم لتصنيف العروض أو باقات الأسعار، مثل:

Basic – Standard – Pro – Premium – Ultimate

هذه المصطلحات – وإن كانت مألوفة – فإنها تفقد شيئًا من دلالتها ورونقها حين تُستعمل خارج سياقها الأصلي، أي خارج اللغة والثقافة الإنجليزية. بل العجيب أنها أصبحت معيارًا شبه عالمي، تتبنّاها مواقع وشركات ناطقة بلغات مختلفة مثل الروسية، والفرنسية، والإسبانية، وغيرها.

لكن ماذا عنّا نحن العرب؟

حين حاولنا ترجمة هذه التسميات إلى العربية، ظهرت لنا مفردات مثل:

Basic = أساسي
Standard = معياري
Pro = احترافي

لكنها جاءت مبتذلة، بلا طعم أو وقع حقيقي في الذهن العربي، وكأننا نسقط كلمات بلا روح في غير بيئتها الطبيعية.

لماذا يحدث هذا؟

السبب ليس ضعف الترجمة فقط، بل يعود إلى اختلاف الإحساس بالكلمة والمعنى الثقافي الذي تحمله. فالكلمات ليست مجرد مرادفات لغوية، بل كيانات تحمل شعورًا، وتجربة، ومكانًا في العقل والوجدان. خذ مثلًا النكتة: ما يُضحك باللغة العربية قد لا يُفهم أصلًا إذا تُرجم حرفيًا إلى الإنجليزية، والسبب هو اختلاف المرجع الثقافي والنفسي بين اللغات.

هل حان وقت تأسيس معيار عربي في تسمية الباقات؟

نعم، بكل تأكيد. لم لا نُبدع تسميات تُعبّر عن ثقافتنا؟ لماذا لا نبتكر معيارًا عربيًا موحدًا مثلما فعل الغرب مع مصطلحاتهم، مثل اتخاذهم "Lorem Ipsum" نموذجًا موحّدًا في عالم التصميم والطباعة؟

وفي هذا السياق، أعجبتني خطوة قامت بها شركة البيداء للحلول المعلوماتية، إذ وضعت تسميات عربية مبتكرة لباقاتها، تجمع بين الجاذبية والفهم السلس دون أن تقتبس من المصطلحات الغربية بشكل مباشر.

دعوة للمشاركة والإبداع

فلنحوّل هذا النقاش إلى مبادرة:

ما التسميات التي تقترحها لباقات الخدمات باللغة العربية؟
هل يمكننا الاتفاق على قالب لغوي جميل، يليق بمواقعنا ومنتجاتنا الرقمية؟

نحن لا نحتاج إلى استنساخ ما يُستخدم عالميًا، بل إلى إبداع ما يعبّر عنا نحن، بلغتنا وهويتنا وثقافتنا.

وفي المقال القادم، قد يكون من المفيد أن نناقش معًا:

هل آن الأوان لاستبدال "Lorem Ipsum" بفقرة عربية موحّدة تخدم المصممين العرب؟

Let's Design a Laurel Wreath With TailwindCSS.

حذيفة — Mon, 26 May 2025 17:38:37 +0000

Need a laurel wreath on your website?

Forget spending time in Illustrator or fiddling with SVG editors. With a simple image and a dash of TailwindCSS spices, you can create a clean, stylish badge in no time — no design software required.

The Code On codepen

If You Want a React Code :

import { BsStarFill } from 'react-icons/bs';

export default function AwardBadge() {
   return (
    <div className="relative w-40 h-40 flex items-center justify-center text-gray-500">
      <img src="https://res.cloudinary.com/dzgjkx0pm/image/upload/v1748274197/award_ox3egn.png" alt="Award" className="w-full scale-130 h-full" />

      <div className="absolute top-1 flex items-end space-x-2 text-amber-400">
        <BsStarFill size={20} />
        <BsStarFill size={40} />
        <BsStarFill size={20} />
      </div>

      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center flex flex-col items-center justify-center">
          <span className="text-sm font-bold uppercase leading-tight text-slate-600">
            MOBILE MASTERY AWARD
          </span>
      </div>

      <span className="absolute text-slate-600 bottom-4 text-sm font-semibold">2025</span>
    </div>
  );
}

Make Sure You Do : npm install react-icons

Don't forget to give us a heart 💗 on CodePen, and follow ▶.

My CodePen

BIOS Screen Using React, Redux, Tailwind !!!

حذيفة — Mon, 19 May 2025 19:03:02 +0000

BIOS Emulator Web Interface – React Edition 🚀

Before we start — if you find this project interesting, please consider giving it a ⭐️

GitHub Repo: BIOS-Emulator-Web-Interface

🔙 A Look Back: The First Version (2024)

Last year, I built a BIOS emulator as a web interface using pure HTML, CSS, and JavaScript.

While functional, it quickly became difficult to manage:

Code was large and tightly coupled
UI elements had to be manually hidden/shown based on key presses
It started behaving like a full SPA (Single Page Application)... just without a framework HAHA

🔁 The Rebuild: Moving to React (2025)

So I decided to rebuild it using React JS.

At first, it seemed simple... until I found myself diving deep into the Phoenix BIOS User Manual (PDF).

From there, it became a 10-day journey of:

Handling complex keydown events
Dynamically rendering components based on key inputs
Improving accessibility and layout with Tailwind CSS
Managing global state using Redux Toolkit
And yes — a little help from ChatGPT

Despite the added complexity, the project became far more readable, modular, and maintainable than the original version.

🧱 Project Structure Evolution

Here’s a quick comparison between the first and second versions:
Before :

After :

🧪 Try It Live

Demo:

🔗 BIOS Emulator Web Interface (GitHub Pages)

Keyboard Controls:

ArrowUp, ArrowDown, ArrowLeft, ArrowRight
Enter, Space, F1, F9, F10, Esc

💻 For best results, view on a desktop browser — it’s designed to simulate a legacy BIOS screen.

🙏 Support

If you enjoyed this project or found it helpful, please give it a star on GitHub. It means a lot and helps others discover it!

🌟 Star the repo

Thanks for reading!