Wednesday, May 21, 2025

SQL Learning: A Step-by-Step Guide for Beginners

SQL Learning: A Step-by-Step Guide for Beginners

Learning SQL (Structured Query Language) is an essential skill for anyone working with databases. This step-by-step guide will take you from the absolute basics to more advanced concepts, with examples to help you practice along the way.

Phase 1: Understanding Databases and SQL Fundamentals

Step 1: What is a Database?

  • Definition: A database is an organized collection of structured data stored electronically
  • RDBMS: Relational Database Management Systems (like SQL Server, MySQL, PostgreSQL) organize data into tables
  • Tables: Collections of related data organized in rows and columns
  • Relationships: How tables connect to each other (one-to-one, one-to-many, many-to-many)

Step 2: SQL Basics

  • What is SQL: Structured Query Language - the standard language for interacting with databases
  • SQL dialects: Different database systems (SQL Server, MySQL, Oracle, etc.) have slight variations
  • SQL operations: CRUD operations (Create, Read, Update, Delete)

Step 3: Setting Up Your Learning Environment

  • Choose a database system: For beginners, SQLite, MySQL, or SQL Server Express are good options
  • Install a database client: Tools like MySQL Workbench, SQL Server Management Studio, or DBeaver
  • Create your first database:
CREATE DATABASE LearnSQL;
USE LearnSQL;

Phase 2: Creating and Manipulating Database Objects

Step 4: Creating Tables

  • Basic syntax:
CREATE TABLE Customers (
    CustomerID INT PRIMARY KEY,
    FirstName VARCHAR(50) NOT NULL,
    LastName VARCHAR(50) NOT NULL,
    Email VARCHAR(100),
    Phone VARCHAR(20)
);
  • Data types: Common types include INT, VARCHAR, DATE, DECIMAL, BOOLEAN
  • Constraints: Rules applied to data columns (PRIMARY KEY, FOREIGN KEY, NOT NULL, UNIQUE, DEFAULT)

Step 5: Modifying Tables

  • Adding columns:
ALTER TABLE Customers
ADD Address VARCHAR(200);
  • Modifying columns:
ALTER TABLE Customers
ALTER COLUMN Phone VARCHAR(30);
  • Deleting columns:
ALTER TABLE Customers
DROP COLUMN Address;

Step 6: Creating Relationships Between Tables

  • Foreign keys:
CREATE TABLE Orders (
    OrderID INT PRIMARY KEY,
    CustomerID INT,
    OrderDate DATE,
    TotalAmount DECIMAL(10,2),
    FOREIGN KEY (CustomerID) REFERENCES Customers(CustomerID)
);

Phase 3: Basic Data Manipulation

Step 7: Inserting Data

  • Single row insert:
INSERT INTO Customers (CustomerID, FirstName, LastName, Email)
VALUES (1, 'John', 'Smith', 'john.smith@example.com');
  • Multiple row insert:
INSERT INTO Customers (CustomerID, FirstName, LastName, Email)
VALUES 
    (2, 'Jane', 'Doe', 'jane.doe@example.com'),
    (3, 'Robert', 'Johnson', 'robert.j@example.com');

Step 8: Basic Queries with SELECT

  • Selecting all columns:
SELECT * FROM Customers;
  • Selecting specific columns:
SELECT FirstName, LastName, Email FROM Customers;
  • Using WHERE for filtering:
SELECT * FROM Customers WHERE LastName = 'Smith';

Step 9: Updating Data

  • Basic update:
UPDATE Customers
SET Email = 'new.email@example.com'
WHERE CustomerID = 1;
  • Multiple column update:
UPDATE Customers
SET Email = 'updated@example.com', Phone = '555-1234'
WHERE CustomerID = 2;

Step 10: Deleting Data

  • Deleting specific rows:
DELETE FROM Customers WHERE CustomerID = 3;
  • Safety practice: Always test with SELECT before DELETE:
-- First run this to check what will be deleted
SELECT * FROM Customers WHERE LastName = 'Johnson';
-- Then run the delete if the results match expectations
DELETE FROM Customers WHERE LastName = 'Johnson';

Phase 4: Intermediate Querying

Step 11: Advanced Filtering with WHERE

  • Comparison operators: =, <>, <, >, <=, >=
SELECT * FROM Orders WHERE TotalAmount > 100;
  • Logical operators: AND, OR, NOT
SELECT * FROM Customers 
WHERE (LastName = 'Smith' OR LastName = 'Doe')
AND NOT Email IS NULL;
  • BETWEEN operator:
SELECT * FROM Orders
WHERE OrderDate BETWEEN '2023-01-01' AND '2023-12-31';
  • IN operator:
SELECT * FROM Customers
WHERE CustomerID IN (1, 3, 5);
  • LIKE operator (for pattern matching):
-- Find all customers whose last name starts with 'S'
SELECT * FROM Customers WHERE LastName LIKE 'S%';

-- Find all customers whose email contains 'example'
SELECT * FROM Customers WHERE Email LIKE '%example%';

Step 12: Sorting Results with ORDER BY

  • Basic sorting:
SELECT * FROM Customers ORDER BY LastName;
  • Multiple column sorting:
SELECT * FROM Customers ORDER BY LastName, FirstName;
  • Direction (ascending/descending):
SELECT * FROM Orders ORDER BY TotalAmount DESC;

Step 13: Limiting Results

  • SQL Server and PostgreSQL:
SELECT TOP 5 * FROM Customers;
  • MySQL and SQLite:
SELECT * FROM Customers LIMIT 5;

Step 14: Grouping Results with GROUP BY

  • Basic grouping:
SELECT CustomerID, COUNT(*) AS OrderCount
FROM Orders
GROUP BY CustomerID;
  • Common aggregate functions: COUNT, SUM, AVG, MIN, MAX
SELECT 
    CustomerID,
    COUNT(*) AS OrderCount,
    SUM(TotalAmount) AS TotalSpent,
    AVG(TotalAmount) AS AverageOrder,
    MIN(TotalAmount) AS SmallestOrder,
    MAX(TotalAmount) AS LargestOrder
FROM Orders
GROUP BY CustomerID;
  • Filtering groups with HAVING:
SELECT CustomerID, COUNT(*) AS OrderCount
FROM Orders
GROUP BY CustomerID
HAVING COUNT(*) > 5;

Phase 5: Joining Tables

Step 15: Inner Joins

  • Basic inner join:
SELECT c.FirstName, c.LastName, o.OrderID, o.OrderDate
FROM Customers c
INNER JOIN Orders o ON c.CustomerID = o.CustomerID;

Step 16: Outer Joins

  • Left outer join:
SELECT c.FirstName, c.LastName, o.OrderID, o.OrderDate
FROM Customers c
LEFT JOIN Orders o ON c.CustomerID = o.CustomerID;
  • Right outer join:
SELECT c.FirstName, c.LastName, o.OrderID, o.OrderDate
FROM Customers c
RIGHT JOIN Orders o ON c.CustomerID = o.CustomerID;
  • Full outer join:
SELECT c.FirstName, c.LastName, o.OrderID, o.OrderDate
FROM Customers c
FULL OUTER JOIN Orders o ON c.CustomerID = o.CustomerID;

Step 17: Self Joins

  • Joining a table to itself (Example with employees and managers):
CREATE TABLE Employees (
    EmployeeID INT PRIMARY KEY,
    Name VARCHAR(100),
    ManagerID INT
);

SELECT e.Name AS Employee, m.Name AS Manager
FROM Employees e
LEFT JOIN Employees m ON e.ManagerID = m.EmployeeID;

Phase 6: Subqueries and Advanced Concepts

Step 18: Subqueries

  • Subquery in WHERE:
SELECT * FROM Customers
WHERE CustomerID IN (
    SELECT DISTINCT CustomerID 
    FROM Orders 
    WHERE TotalAmount > 1000
);
  • Subquery in SELECT:
SELECT 
    c.CustomerID,
    c.FirstName,
    c.LastName,
    (SELECT COUNT(*) FROM Orders o WHERE o.CustomerID = c.CustomerID) AS OrderCount
FROM Customers c;

Step 19: Common Table Expressions (CTE)

  • Basic CTE:
WITH HighValueCustomers AS (
    SELECT CustomerID, SUM(TotalAmount) AS TotalSpent
    FROM Orders
    GROUP BY CustomerID
    HAVING SUM(TotalAmount) > 5000
)
SELECT c.FirstName, c.LastName, h.TotalSpent
FROM Customers c
JOIN HighValueCustomers h ON c.CustomerID = h.CustomerID;

Step 20: Views

  • Creating a view:
CREATE VIEW CustomerOrders AS
SELECT 
    c.CustomerID,
    c.FirstName,
    c.LastName,
    o.OrderID,
    o.OrderDate,
    o.TotalAmount
FROM Customers c
JOIN Orders o ON c.CustomerID = o.CustomerID;
  • Using a view:
SELECT * FROM CustomerOrders WHERE TotalAmount > 500;

Phase 7: Database Administration Basics

Step 21: Indexes

  • Creating an index:
CREATE INDEX idx_customer_lastname ON Customers(LastName);
  • Unique index:
CREATE UNIQUE INDEX idx_customer_email ON Customers(Email);

Step 22: Transactions

  • Basic transaction:
BEGIN TRANSACTION;

UPDATE Accounts SET Balance = Balance - 100 WHERE AccountID = 1;
UPDATE Accounts SET Balance = Balance + 100 WHERE AccountID = 2;

COMMIT TRANSACTION;
-- If something goes wrong: ROLLBACK TRANSACTION;

Step 23: Stored Procedures

  • Creating a simple stored procedure:
CREATE PROCEDURE GetCustomerOrders
    @CustomerID INT
AS
BEGIN
    SELECT * FROM Orders WHERE CustomerID = @CustomerID;
END;
  • Executing a stored procedure:
EXEC GetCustomerOrders @CustomerID = 1;

Phase 8: Practical Projects

Step 24: Build a Complete Database

Create a fully normalized database for a small business with multiple tables:

  • Customers
  • Products
  • Orders
  • OrderItems
  • Employees
  • Categories

Step 25: Write Complex Queries

Practice writing complex queries like:

  • Sales reports by region
  • Inventory tracking
  • Customer purchasing patterns
  • Employee performance metrics

Step 26: Database Maintenance Tasks

Learn practical maintenance:

  • Backup and restore
  • Check database integrity
  • Update statistics
  • Rebuild indexes

Learning Resources

Online Tutorials and Courses

  • W3Schools SQL Tutorial
  • SQLZoo
  • Khan Academy's SQL Course
  • Codecademy SQL Courses
  • SQL Bolt

Practice Platforms

  • LeetCode (Database section)
  • HackerRank SQL challenges
  • SQL Fiddle
  • DB Fiddle

Books

  • "SQL Queries for Mere Mortals" by John Viescas
  • "Learning SQL" by Alan Beaulieu
  • "SQL Cookbook" by Anthony Molinaro

Tips for Success

  1. Practice regularly: SQL is learned through regular practice
  2. Start with simple queries: Master the basics before moving to complex queries
  3. Use real-world scenarios: Try to solve problems related to real business needs
  4. Review and optimize: Regularly review your SQL code to find better ways to write queries
  5. Join SQL communities: Participate in forums and communities to learn from others
  6. Read documentation: Different database systems have different features, so check the documentation

Remember, becoming proficient in SQL takes time and practice. Start small, be patient, and gradually tackle more complex problems as your understanding improves.


Happy SQL Learning!

Thursday, May 15, 2025

SQL Server's Intelligent Query Processing Enhancements

 SQL Server's Intelligent Query Processing (IQP) framework has seen significant improvements in recent versions, particularly in SQL Server 2022 and the 2024 preview. These features collectively aim to improve query performance automatically without requiring code changes.

Key Intelligent Query Processing Enhancements

Parameter Sensitive Plan Optimization (PSP)

  • Addresses the "parameter sniffing" problem by automatically maintaining multiple cached execution plans for the same query
  • The query optimizer intelligently selects the most appropriate plan based on input parameter values
  • Reduces the need for manual query hints or plan guides
  • Particularly valuable for queries where different parameter values require drastically different execution strategies

Cardinality Estimation Improvements

  • Enhanced statistical modeling for more accurate row count predictions
  • Better handling of correlated columns and complex predicates
  • Improved histogram analysis for skewed data distributions
  • More accurate estimations for expressions and functions

Memory Grant Feedback

  • Adaptive memory allocation that learns from previous executions
  • Prevents both under-allocation (causing expensive spills to disk) and over-allocation (wasting memory)
  • Works for both batch and row mode execution
  • Now supports concurrent query executions and persists feedback across server restarts

Batch Mode on Rowstore

  • Extends batch processing benefits (traditionally limited to columnstore indexes) to rowstore tables
  • Automatically applied to eligible complex queries on traditional tables
  • Significant performance boosts for analytical queries without requiring index changes

Degree of Parallelism (DOP) Feedback

  • Dynamically adjusts parallelism based on past query execution metrics
  • Prevents both under-parallelization (not using available resources) and over-parallelization (wasting resources on coordination)
  • Adapts to varying server workloads

Interleaved Execution

  • Optimizes plans with multi-statement table-valued functions (MSTVFs)
  • Pauses optimization, executes parts of the query to get accurate cardinality, then resumes optimization
  • No longer requires explicit recompile hints

Query Store Improvements

  • Enhanced performance insights with more granular metrics
  • Better plan forcing mechanisms
  • Improved query wait statistics for bottleneck identification
  • Automatic plan correction capabilities for identifying and fixing regression-prone queries

These improvements work together as part of SQL Server's commitment to "it just works better" query processing, requiring minimal administrator intervention while delivering substantial performance benefits.

Tuesday, May 13, 2025

Microsoft Visual Studio 2010 install the NuGet Package Manager

 In Microsoft Visual Studio 2010, NuGet package management was not built-in by default—you have to install the NuGet Package Manager extension manually. Here's how you can do it:


๐Ÿ› ️ Step-by-Step: Install NuGet in Visual Studio 2010

  1. Open Visual Studio 2010.

  2. Go to:
    Tools > Extension Manager

  3. In the Extension Manager:

    • Click on Online Gallery

    • Search for "NuGet Package Manager"

    • Click Download and follow the installation prompts.

  4. Restart Visual Studio 2010 after installation.


๐Ÿ“ฆ Adding a NuGet Package to a Project

After NuGet is installed:

  1. Right-click on your project in Solution Explorer

  2. Select "Manage NuGet Packages..."

  3. In the NuGet window:

    • Search for the package you want

    • Click Install

Friday, May 9, 2025

The Ultimate Angular Performance Checklist: 2024 Edition

 If I had to recommend just one must-read blog post for Angular developers in 2024, I'd suggest "The Ultimate Angular Performance Checklist: 2024 Edition" by Minko Gechev (who leads the Angular team at Google).

This comprehensive guide covers:

  • Angular signals and their performance benefits compared to traditional change detection
  • Zone.js-less applications and the new developer experience
  • Hybrid rendering strategies with SSR and hydration
  • Code-splitting best practices with standalone components
  • Angular's compiler optimizations and how to leverage them
  • Memory leak prevention techniques specific to Angular
  • Build-time optimizations with esbuild and the new build system
  • Practical performance measurement using Angular DevTools

What makes this post particularly valuable is that it provides concrete code examples for each optimization technique, real-world performance metrics, and guidance on when to apply each approach based on application size and complexity.

Sunday, May 4, 2025

SOLID Principles in .NET Core

 The SOLID principles are fundamental object-oriented design principles that help create more maintainable, flexible, and scalable software. Let me explain how each principle applies in .NET Core:

Single Responsibility Principle (SRP)

A class should have only one reason to change, meaning it should have only one job or responsibility.

In .NET Core, you might implement this by:

  • Separating your controllers from your business logic
  • Using dedicated service classes for specific operations
  • Creating focused repository classes for data access

Open/Closed Principle (OCP)

Software entities should be open for extension but closed for modification.

.NET Core supports this through:

  • Interfaces and dependency injection
  • Abstract base classes
  • Extension methods
  • Middleware pipeline architecture

Liskov Substitution Principle (LSP)

Objects of a superclass should be replaceable with objects of subclasses without affecting program correctness.

In .NET Core:

  • Properly implement interface contracts
  • Use inheritance carefully
  • Leverage polymorphism through DI container

Interface Segregation Principle (ISP)

Clients should not be forced to depend on interfaces they don't use.

Implement in .NET Core by:

  • Creating focused, granular interfaces
  • Using composition of interfaces rather than large, monolithic ones
  • Leveraging .NET Core's built-in DI container for registration

Dependency Inversion Principle (DIP)

High-level modules should not depend on low-level modules; both should depend on abstractions.

.NET Core has excellent support through:

  • Built-in dependency injection container
  • Interface-based programming
  • Factory patterns

Saturday, April 19, 2025

What's New in Angular

 Angular has been evolving steadily with several significant updates in recent releases. Here are the key new features and improvements from the most recent versions:

Angular 17 (Late 2023)

  • Standalone APIs by default: New projects now use standalone components by default
  • Improved developer experience: New application starter with interactive CLI setup
  • Built-in control flow: New @if, @for, @switch syntax replacing *ngIf and *ngFor
  • Deferred loading: @defer block for lazy loading components
  • Server-side rendering improvements: Hydration is now on by default
  • Signals API improvements: More reactive programming capabilities
  • View transitions API: For smoother page transitions
  • New application builder: Based on Vite/esbuild instead of webpack

Angular 16 (May 2023)

  • Signals: Introduction of a new reactive primitive
  • Server-side rendering: Enhanced hydration support
  • Angular CLI: Further improvements with faster builds
  • Required inputs: Ability to mark @Input() fields as required
  • Self-closing tags: Support for components without content
  • Standalone components: Continued development of standalone API
  • Reactor: Early preview of new reactivity model

Angular 15 (November 2022)

  • Standalone components stable: No longer experimental
  • Directive composition API: Reuse directive behavior
  • Image directive: Automated image optimization
  • NgOptimizedImage: Performance improvements for images
  • esbuild support: Faster builds
  • Functional router guards: Simplified routing protection

Active Development Areas

Angular is currently focusing on several areas for future releases:

  1. Reactivity model enhancements: Expanding signals throughout the framework
  2. Performance improvements: Making Angular applications even faster
  3. Developer experience: Simplifying API usage and reducing boilerplate
  4. Build tooling: Moving away from webpack toward more modern build tools
  5. SSR and hydration: Enhanced server-side rendering capabilities

Looking ahead, Angular 18 is expected to bring further stabilization of signals and new features building on the reactive architecture introduced in recent versions.

Tuesday, April 15, 2025

Angular CLI Commands Cheat Sheet (2025 Edition)

 

⚡️ Angular CLI Commands Cheat Sheet

๐Ÿ“ฆ Project Setup

CommandDescription
ng new <project-name>Create a new Angular project
ng add <package>Add a package and run schematics (e.g., @angular/material)
ng configView or set config values in angular.json
ng analyticsEnable or disable analytics

๐Ÿš€ Serve & Build

CommandDescription
ng serveServe the app locally with hot reload
ng serve --port=4201Serve app on a custom port
ng buildBuild app for production
ng build --configuration=developmentBuild in dev mode
ng build --watchRebuild on file changes

๐Ÿ›  Generate Code (Schematics)

CommandDescription
ng generate component <name> or ng g c <name>Generate a component
ng g s <name>Generate a service
ng g m <name>Generate a module
ng g d <name>Generate a directive
ng g p <name>Generate a pipe
ng g i <name>Generate an interface
ng g guard <name>Generate a route guard
ng g class <name>Generate a TypeScript class

๐Ÿ“‚ Routing & Modules

CommandDescription
ng g module <name> --routingGenerate a module with routing
ng g component <name> --module=appRegister component in specific module
ng g module <name> --standaloneGenerate a standalone module/component (Angular 17+)

๐Ÿงช Testing

CommandDescription
ng testRun unit tests with Karma
ng test --watch=falseRun tests once and exit
ng e2eRun end-to-end tests (with Protractor or Cypress setup)

๐Ÿ“ˆ Linting, Format, & Analysis

CommandDescription
ng lintRun lint checks (ESLint if configured)
ng lint --fixAuto-fix lint errors
ng doc <keyword>Open Angular docs (e.g., ng doc directive)

๐Ÿ“ค Deployment & Misc

CommandDescription
ng deployDeploy via configured builder (e.g., Firebase, Netlify)
ng updateUpdate Angular CLI and core packages
ng versionShow Angular versions
ng helpList all CLI commands
ng cache cleanClear Angular build cache

๐Ÿ’ก Tips

  • Use --dry-run on any ng g command to preview changes.

  • Use --skip-tests if you don’t want spec files generated.

  • Combine flags like:
    ng g c user/profile --standalone --flat

How Generative AI is Transforming Angular Developers

 

๐Ÿง  1. Component Generation

  • Prompt to Code: With tools like GitHub Copilot, Codeium, or ChatGPT, Angular devs can write prompts like:

    "Create a responsive login form using Angular reactive forms with validation."

  • AI instantly scaffolds the component, HTML, styles, and even imports.

  • Saves time on boilerplate and encourages best practices.


๐Ÿ“ฆ 2. Service & HTTP Logic Automation

  • AI can auto-generate:

    • Angular services for REST APIs.

    • Proper use of HttpClient, RxJS, and error handling.

    • Token-based auth interceptors.

  • Result: Consistent, DRY, and secure data-fetching code.


๐Ÿ’… 3. Template & UI Design Help

  • Generate HTML/CSS for:

    • Material Design UI components.

    • Responsive layouts using Flexbox/Grid.

  • Prompt example:

    "Design a product card with Angular Material with an image, title, and 'Add to cart' button."

  • You can even use AI to:

    • Convert Figma designs into Angular components.

    • Suggest better UX/UI patterns.


๐Ÿ”„ 4. Two-Way Binding & State Management

  • AI can suggest optimal use of:

    • [(ngModel)] bindings.

    • @Input() / @Output() for parent-child communication.

    • State libraries like NgRx, Akita, or Signal-based state (Angular v17+).

  • Example: "Set up NgRx to manage user authentication state."


๐Ÿงช 5. Test Case Generation (Jasmine/Karma)

  • AI can:

    • Generate unit tests for components, pipes, and services.

    • Create mock data and testing modules.

  • Prompt:

    "Write Jasmine unit tests for an Angular login form component."

  • This massively reduces QA effort.


๐Ÿ“„ 6. Documentation & Code Comments

  • AI can:

    • Add inline comments to complex component logic.

    • Generate Markdown docs for services/components.

    • Help with documenting custom decorators, directives, and modules.


๐Ÿ› 7. Debugging & Refactoring Help

  • Explain error messages like:

    "NG0900: Error trying to diff '[object Object]'."

  • Suggests fixes or better patterns (e.g., using trackBy in *ngFor).

  • Can refactor legacy AngularJS or old Angular 2+ code into the latest best practices.


⚙️ 8. DevOps & Angular CLI

  • Generate or optimize:

    • angular.json, tsconfig.json, package.json.

    • Docker files for Angular apps.

    • Deployment configs (Firebase, Netlify, Vercel, AWS).


๐Ÿงฉ 9. Code Consistency & Style Enforcement

  • AI tools help enforce:

    • Linting rules (eslint, prettier).

    • Naming conventions.

    • Folder structures for scaling Angular apps.


๐Ÿ’ก 10. Learning & Upskilling

  • Junior Angular devs can learn in real-time by:

    • Asking AI to explain concepts like observables, ngZone, or ChangeDetectionStrategy.OnPush.

    • Getting feedback on architectural decisions.


๐ŸŒŸ Bonus: AI + Angular Tools You Can Try

  • GitHub Copilot – inline code gen and completions.

  • ChatGPT – natural language to Angular components/services.

  • Codeium / Cody / Tabnine – free code assistants.

  • Polarr AI for UI Generation – image/UI to code experiments.

Sunday, April 13, 2025

Build a Secure Login System with .NET Core + Angular

 Creating a secure login system with .NET Core (Backend) and Angular (Frontend) involves implementing industry best practices for authentication, such as JWT (JSON Web Tokens), password hashing, and role-based access control.

Here's a high-level breakdown of what to implement:

๐Ÿ” Backend (.NET Core) – Secure API with JWT

Tools/Packages:

  • .NET 7 or later

  • Microsoft.AspNetCore.Authentication.JwtBearer

  • EntityFrameworkCore

  • AutoMapper

  • FluentValidation (optional for DTO validation)

✅ Backend Features

  1. User Registration

    • Hash passwords using PasswordHasher<TUser>

    • Store user info in a SQL database (e.g., SQL Server)

  2. Login & JWT Generation

    • Authenticate credentials

    • Return JWT token on successful login

  3. Secure Endpoints

    • Use [Authorize] attribute

    • Role-based authorization via claims

  4. Token Validation

    • Middleware to validate JWT tokens in headers

  5. Refresh Token (Optional for extra security)


๐Ÿ”ง Sample .NET Code (Key Snippets)

Startup.cs / Program.cs (Service Config)

csharp

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme) .AddJwtBearer(options => { options.TokenValidationParameters = new TokenValidationParameters { ValidateIssuer = true, ValidateAudience = true, ValidateLifetime = true, ValidateIssuerSigningKey = true, ValidIssuer = config["Jwt:Issuer"], ValidAudience = config["Jwt:Audience"], IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(config["Jwt:Key"])) }; });

Generate JWT Token

csharp

public string GenerateToken(ApplicationUser user) { var claims = new[] { new Claim(JwtRegisteredClaimNames.Sub, user.UserName), new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()) }; var creds = new SigningCredentials( new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config["Jwt:Key"])), SecurityAlgorithms.HmacSha256); var token = new JwtSecurityToken( issuer: _config["Jwt:Issuer"], audience: _config["Jwt:Audience"], claims: claims, expires: DateTime.Now.AddMinutes(30), signingCredentials: creds); return new JwtSecurityTokenHandler().WriteToken(token); }

๐ŸŒ Frontend (Angular) – Login UI + Token Handling

✅ Angular Features

  1. Login Form with Angular Reactive Forms

  2. AuthService to manage token-based login

  3. Http Interceptor to append JWT token to HTTP requests

  4. Route Guards to restrict access to secure routes


๐Ÿ”ง Angular Key Snippets

AuthService.ts

ts

login(credentials: any): Observable<any> { return this.http.post('https://your-api-url/api/auth/login', credentials) .pipe(tap((res: any) => { localStorage.setItem('token', res.token); })); } isLoggedIn(): boolean { return !!localStorage.getItem('token'); }

Auth Interceptor

ts

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const token = localStorage.getItem('token'); if (token) { req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }); } return next.handle(req); }

Route Guard

ts

canActivate(): boolean { return this.authService.isLoggedIn(); }