you want a Register/Login system with a dashboard connected to a database. Let’s break this down step by step so you can implement it cleanly.

Tech Stack Options

You can build this with many stacks. Here are two common ones:

• PHP + MySQL (classic, simple to host)

• Node.js + Express + MongoDB/MySQL (modern, flexible)

I’ll show you a basic PHP + MySQL example since it’s straightforward.

Project Structure

/project
   +-- db.php          # Database connection
   +-- register.php    # Registration form + logic
   +-- login.php       # Login form + logic
   +-- dashboard.php   # Protected page
   +-- logout.php      # End session

Database Setup (MySQL)

CREATE DATABASE user_system;

USE user_system;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

db.php (Database Connection)

connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

register.php

prepare($sql);
    $stmt->bind_param("ss", $username, $password);

    if ($stmt->execute()) {
        echo "Registration successful! Login";
    } else {
        echo "Error: " . $stmt->error;
    }
}
?>


  Username: 

  Password: 

  Register

login.php

prepare($sql);
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($row = $result->fetch_assoc()) {
        if (password_verify($password, $row['password'])) {
            $_SESSION['username'] = $username;
            header("Location: dashboard.php");
            exit();
        } else {
            echo "Invalid password.";
        }
    } else {
        echo "No user found.";
    }
}
?>


  Username: 

  Password: 

  Login

dashboard.php

Welcome to Dashboard, !
Logout

logout.php

With this setup:

• Users can register ? stored in DB with hashed password.

• Users can login ? verified against DB.

• Successful login ? redirected to dashboard.

• Session ensures only logged-in users see dashboard.

• Logout clears session.

1) Database — SQL Script

Create a Users table to store user info:

CREATE TABLE [dbo].[Users] (
    [Id] INT IDENTITY(1,1) PRIMARY KEY,
    [UserName] NVARCHAR(256) NOT NULL UNIQUE,
    [Email] NVARCHAR(256) NULL,
    [PasswordHash] NVARCHAR(MAX) NOT NULL,
    [CreatedAt] DATETIME2 NOT NULL DEFAULT SYSUTCDATETIME()
);

2) ASP.NET Core Web API (Backend)

Assumptions:

• .NET 8 or later

• Using EF Core for DB access

• Using PasswordHasher to hash passwords

• Using JWT Bearer tokens

a) appsettings.json (add your connection string and JWT settings)

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=YOUR_SQL_SERVER;Database=YourDb;Trusted_Connection=True;"
  },
  "JwtSettings": {
    "Key": "ReplaceWithAStrongSecretKey_AtLeast_32_Chars",
    "Issuer": "YourApp",
    "Audience": "YourAppUsers",
    "ExpiryMinutes": 60
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information"
    }
  },
  "AllowedHosts": "*"
}

b) Models

Models/User.cs

public class User
{
    public int Id { get; set; }
    public string UserName { get; set; } = null!;
    public string? Email { get; set; }
    public string PasswordHash { get; set; } = null!;
    public DateTime CreatedAt { get; set; }
}

DTOs/RegisterDto.cs

public class RegisterDto
{
    public string UserName { get; set; } = null!;
    public string Password { get; set; } = null!;
    public string? Email { get; set; }
}

DTOs/LoginDto.cs

public class LoginDto
{
    public string UserName { get; set; } = null!;
    public string Password { get; set; } = null!;
}

c) AppDbContext

Data/AppDbContext.cs

using Microsoft.EntityFrameworkCore;

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions options) : base(options) { }

    public DbSet Users => Set();

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity()
            .HasIndex(u => u.UserName)
            .IsUnique();

        base.OnModelCreating(modelBuilder);
    }
}

d) JWT Service

Services/JwtService.cs

using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using Microsoft.Extensions.Options;
using Microsoft.IdentityModel.Tokens;

public class JwtSettings
{
    public string Key { get; set; } = null!;
    public string Issuer { get; set; } = null!;
    public string Audience { get; set; } = null!;
    public int ExpiryMinutes { get; set; }
}

public interface IJwtService
{
    string GenerateToken(User user);
}

public class JwtService : IJwtService
{
    private readonly JwtSettings _settings;
    private readonly byte[] _key;

    public JwtService(IOptions options)
    {
        _settings = options.Value;
        _key = Encoding.UTF8.GetBytes(_settings.Key);
    }

    public string GenerateToken(User user)
    {
        var claims = new[]
        {
            new Claim(JwtRegisteredClaimNames.Sub, user.Id.ToString()),
            new Claim(JwtRegisteredClaimNames.UniqueName, user.UserName),
            new Claim("username", user.UserName)
        };

        var creds = new SigningCredentials(new SymmetricSecurityKey(_key), SecurityAlgorithms.HmacSha256);

        var token = new JwtSecurityToken(
            issuer: _settings.Issuer,
            audience: _settings.Audience,
            claims: claims,
            expires: DateTime.UtcNow.AddMinutes(_settings.ExpiryMinutes),
            signingCredentials: creds
        );

        return new JwtSecurityTokenHandler().WriteToken(token);
    }
}

e) Auth Controller

Controllers/AuthController.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;

[ApiController]
[Route("api/[controller]")]
public class AuthController : ControllerBase
{
    private readonly AppDbContext _db;
    private readonly IJwtService _jwt;
    private readonly IPasswordHasher _passwordHasher;

    public AuthController(AppDbContext db, IJwtService jwt, IPasswordHasher passwordHasher)
    {
        _db = db;
        _jwt = jwt;
        _passwordHasher = passwordHasher;
    }

    [HttpPost("register")]
    public async Task Register([FromBody] RegisterDto model)
    {
        if (await _db.Users.AnyAsync(u => u.UserName == model.UserName))
            return BadRequest(new { message = "Username already exists." });

        var user = new User
        {
            UserName = model.UserName,
            Email = model.Email,
            CreatedAt = DateTime.UtcNow
        };
        user.PasswordHash = _passwordHasher.HashPassword(user, model.Password);

        _db.Users.Add(user);
        await _db.SaveChangesAsync();

        return Ok(new { message = "User created successfully." });
    }

    [HttpPost("login")]
    public async Task Login([FromBody] LoginDto model)
    {
        var user = await _db.Users.SingleOrDefaultAsync(u => u.UserName == model.UserName);
        if (user == null) return Unauthorized(new { message = "Invalid credentials." });

        var verify = _passwordHasher.VerifyHashedPassword(user, user.PasswordHash, model.Password);
        if (verify == PasswordVerificationResult.Failed) return Unauthorized(new { message = "Invalid credentials." });

        var token = _jwt.GenerateToken(user);

        return Ok(new { token });
    }

    [HttpGet("profile")]
    public async Task Profile()
    {
        var userIdClaim = User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier) ??
                          User.FindFirst(JwtRegisteredClaimNames.Sub);

        if (userIdClaim == null) return Unauthorized();

        if (!int.TryParse(userIdClaim.Value, out int userId)) return Unauthorized();

        var user = await _db.Users.FindAsync(userId);
        if (user == null) return NotFound();

        return Ok(new { user.Id, user.UserName, user.Email, user.CreatedAt });
    }
}

Note: Profile endpoint is protected — see middleware setup.

f) Program.cs (minimal hosting)

var builder = WebApplication.CreateBuilder(args);

// config
builder.Services.Configure(builder.Configuration.GetSection("JwtSettings"));
builder.Services.AddScoped();
builder.Services.AddSingleton, PasswordHasher>();

builder.Services.AddDbContext(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

builder.Services.AddControllers();

// JWT Auth
var jwtSettings = builder.Configuration.GetSection("JwtSettings").Get();
var key = Encoding.UTF8.GetBytes(jwtSettings.Key);

builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
    options.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateIssuer = true,
        ValidateAudience = true,
        ValidateLifetime = true,
        ValidateIssuerSigningKey = true,
        ValidIssuer = jwtSettings.Issuer,
        ValidAudience = jwtSettings.Audience,
        IssuerSigningKey = new SymmetricSecurityKey(key)
    };
});

builder.Services.AddAuthorization();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseSwagger();
app.UseSwaggerUI();

app.UseHttpsRedirection();
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

app.Run();

g) EF Core migration (run in terminal)

dotnet tool install --global dotnet-ef   # if not installed
dotnet ef migrations add InitUsers
dotnet ef database update

3) Angular (Frontend)

Assumptions:

• Angular 15+ (HttpClient available)

• Create Angular app and add @auth0/angular-jwt optionally for token helper (but not required)

• We'll create AuthService, AuthInterceptor, RegisterComponent, LoginComponent, DashboardComponent

a) auth.service.ts

src/app/services/auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { Observable } from 'rxjs';

interface AuthResponse { token: string; }

@Injectable({ providedIn: 'root' })
export class AuthService {
  private api = 'https://localhost:5001/api/auth';
  constructor(private http: HttpClient) {}

  register(payload: { userName: string; password: string; email?: string }) {
    return this.http.post(`${this.api}/register`, payload);
  }

  login(payload: { userName: string; password: string }) : Observable {
    return this.http.post(`${this.api}/login`, payload).pipe(
      tap(res => {
        localStorage.setItem('jwt', res.token);
      })
    );
  }

  logout() {
    localStorage.removeItem('jwt');
  }

  getToken() {
    return localStorage.getItem('jwt');
  }

  isAuthenticated() {
    return !!this.getToken();
  }
}

b) auth.interceptor.ts (attach token)

src/app/interceptors/auth.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { AuthService } from '../services/auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private auth: AuthService) {}

  intercept(req: HttpRequest, next: HttpHandler) {
    const token = this.auth.getToken();
    if (token) {
      const cloned = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
      return next.handle(cloned);
    }
    return next.handle(req);
  }
}

Register the interceptor in app.module.ts providers:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './interceptors/auth.interceptor';

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

c) register.component.ts (simple)

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  template: `
    
Register
    

      
      
      
      Register
    
    
{{message}}
  `
})
export class RegisterComponent {
  userName = ''; password = ''; email = ''; message = '';
  constructor(private auth: AuthService, private router: Router) {}

  register() {
    this.auth.register({ userName: this.userName, password: this.password, email: this.email })
      .subscribe({
        next: () => this.router.navigate(['/login']),
        error: err => this.message = err?.error?.message || 'Registration failed'
      });
  }
}

d) login.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  template: `
    
Login
    

      
      
      Login
    
    
{{message}}
  `
})
export class LoginComponent {
  userName = ''; password = ''; message = '';
  constructor(private auth: AuthService, private router: Router) {}

  login() {
    this.auth.login({ userName: this.userName, password: this.password })
      .subscribe({
        next: () => this.router.navigate(['/dashboard']),
        error: err => this.message = err?.error?.message || 'Login failed'
      });
  }
}

e) dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dashboard',
  template: `
    
Dashboard
    

      
Welcome, {{profile.userName}}
      
Email: {{profile.email}}
    
    Logout
  `
})
export class DashboardComponent implements OnInit {
  profile: any;
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://localhost:5001/api/auth/profile')
      .subscribe(res => this.profile = res, err => console.error(err));
  }

  logout() {
    localStorage.removeItem('jwt');
    window.location.href = '/login';
  }
}

f) Routing (basic)

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent }
];

For production you should add route guards to protect /dashboard.