Create me Register Login to go dashboard with database

Question

Rajesh Gami · Answer

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 .

Create me Register Login to go dashboard with database

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)