0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · درس

تنفيذ استراتيجية JWT

ادمج JSON Web Tokens (JWT) للمصادقة عديمة الحالة، مع تغطية إنشاء الرموز والتحقق منها.

تنفيذ استراتيجية JWT درس مجاني في Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit. هذا هو الدرس 2 من أصل 6. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack (App Router + Server Actions)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 6 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What is a JSON Web Token (JWT)?

Welcome! In this lesson, we'll dive into JSON Web Tokens (JWTs), a popular method for securing APIs.

  • JWTs are compact, URL-safe means of representing claims to be transferred between two parties.
  • They are often used for stateless authentication, meaning the server doesn't need to store session information.
  • This makes APIs more scalable and easier to manage, especially in distributed systems.

JWT's Three Main Parts

A JWT is essentially a long string, but it's structured into three distinct parts, separated by dots (.):

  1. Header: Contains metadata about the token itself (e.g., type of token, signing algorithm).
  2. Payload: Contains the actual claims or data about the user and additional properties.
  3. Signature: Used to verify the token's integrity and authenticity.

Each part is Base64Url-encoded.

Header & Payload in Detail

Let's look closer at the first two parts:

  • Header: Typically contains two fields:"alg" (algorithm, e.g., HS256) and "typ" (type, which is JWT).
  • Payload: This is where you put your data, known as 'claims'. Common claims include:
    • sub (subject): Usually the user ID.
    • exp (expiration time): When the token expires.
    • iat (issued at): When the token was issued.
    • Custom claims: Any other data you need, like "username" or "role".

The Cryptographic Signature

The signature is the crucial third part that ensures security:

  • It's created by taking the encoded header, the encoded payload, a secret key, and the algorithm specified in the header.
  • This combination is then cryptographically hashed.
  • Why is it important? If anyone tries to tamper with the header or payload, the signature verification will fail, indicating the token is invalid or has been altered.
  • The secret key must be kept confidential on the server side!

NestJS and JWTs

NestJS provides excellent support for integrating JWTs, leveraging the power of the jsonwebtoken library under the hood.

We'll primarily use the @nestjs/jwt package, which offers a JwtModule and JwtService to handle token generation and verification seamlessly within your application.

First, you'll need to install the package if you haven't already:

npm install @nestjs/jwt passport-jwt --save

Configuring the JwtModule

To use JWTs in NestJS, you need to import and configure the JwtModule in your application's module (e.g., AppModule or a dedicated AuthModule).

The most important option is the secret key, which is used to sign and verify tokens.

import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';

@Module({
  imports: [
    JwtModule.register({
      secret: 'yourSuperSecretKey',
      signOptions: { expiresIn: '60s' }, // e.g., 60s, 7d, 1h
    }),
  ],
  // ... other providers, controllers
})
export class AppModule {}

Generating a JWT in NestJS

Once JwtModule is configured, you can inject JwtService into your services to generate (sign) new tokens. The sign() method takes a payload (usually an object) and creates the JWT string.

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(private jwtService: JwtService) {}

  async signIn(user: any): Promise<string> {
    const payload = { username: user.username, sub: user.userId };
    return this.jwtService.sign(payload); // Signs with configured secret & options
  }
}

Code Demo: Token Generation

Let's see how a token is generated conceptually. This example uses the underlying jsonwebtoken library directly, similar to how NestJS does it.

Run this code to see a JWT being created:

// To run this, install 'jsonwebtoken':
// npm install jsonwebtoken --save

const jwt = require('jsonwebtoken');

const payload = {
  sub: 'user123',
  username: 'coder_kit'
};

const secret = 'mySuperSecretKey123'; // Keep this secret safe!

// Sign the token with an expiration of 1 hour
const token = jwt.sign(payload, secret, { expiresIn: '1h' });

console.log('--- Generated JWT ---');
console.log(token);
console.log('\nThis token is valid for 1 hour.');

Verifying a JWT in NestJS

When a client sends a JWT, your server needs to verify it. The JwtService.verify() method checks several things:

  • Is the signature valid (i.e., was it signed with our secret)?
  • Has the token expired?
  • Are there any other validation rules specified?

If valid, it returns the decoded payload. If invalid, it throws an error.

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(private jwtService: JwtService) {}

  async verifyToken(token: string): Promise<any> {
    try {
      const payload = this.jwtService.verify(token);
      return payload; // Token is valid, return its data
    } catch (error) {
      // Token is invalid or expired
      throw new Error('Invalid or expired token');
    }
  }
}

Code Demo: Token Verification

Here's how token verification works. You can use the token generated in the previous step (or the example provided) and see it being verified.

Remember, the secret used for verification MUST be the same one used for signing!

// To run this, install 'jsonwebtoken':
// npm install jsonwebtoken --save

const jwt = require('jsonwebtoken');

// IMPORTANT: Replace with a REAL token you generated,
// or use this example token (signed with 'mySuperSecretKey123')
const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c2VyMTIzIiwidXNlcm5hbWUiOiJjb2Rlcl9raXQiLCJpYXQiOjE3MDcwOTMyMTMsImV4cCI6MTcwNzE3OTYxM30.4i-J_q_e_x_a_m_p_l_e_s_i_g_n_a_t_u_r_e_f_o_r_d_e_m_o'; 

const secret = 'mySuperSecretKey123'; // Must match the signing secret!

console.log('--- Attempting to Verify Token ---');
try {
  const decoded = jwt.verify(testToken, secret);
  console.log('Token is VALID!');
  console.log('Decoded Payload:');
  console.log(decoded);
} catch (error) {
  console.error('Token is INVALID or EXPIRED!');
  console.error('Error:', error.message);
}

JWT Concept Check

You've learned about the three main parts of a JWT. Which of the following components is primarily responsible for ensuring the token's integrity (that it hasn't been tampered with)?

Recap: JWT Essentials

Great job! You've covered the fundamentals of JWTs:

  • What they are: Compact, stateless tokens for authentication.
  • Their structure: Header, Payload, and Signature.
  • Key concepts: How the signature protects integrity and the role of the secret key.
  • NestJS integration: Using @nestjs/jwt to configure, sign, and verify tokens.

Next, we'll explore how to protect routes using Guards and implement role-based access control!

الأسئلة الشائعة

هل درس «تنفيذ استراتيجية JWT» مجاني؟

نعم — نص درس «تنفيذ استراتيجية JWT» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack (App Router + Server Actions)، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack (App Router + Server Actions) 6 دروس في المجموع.

ماذا ستتعلم في «تنفيذ استراتيجية JWT»؟

ادمج JSON Web Tokens (JWT) للمصادقة عديمة الحالة، مع تغطية إنشاء الرموز والتحقق منها. تتمرن على Next.js 15 Fullstack (App Router + Server Actions) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack (App Router + Server Actions)؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack (App Router + Server Actions) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 6.

كم من الوقت يستغرق درس «تنفيذ استراتيجية JWT»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack (App Router + Server Actions) هذا؟

نعم. كل درس في Next.js 15 Fullstack (App Router + Server Actions) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. دمج NextAuth.js
  2. تنفيذ استراتيجية JWT
  3. حماية المسارات والبيانات
  4. الحراس والأدوار
  5. استراتيجيات المصادقة المخصّصة
  6. دمج Passport.js
← العودة إلى Next.js 15 Fullstack (App Router + Server Actions)