Create a Login App with ASP.NET on Ubuntu 22.04

Here’s a step-by-step guide to create a simple login form using ASP.NET Core (C#) and MS SQL Server with VS Code and Linux:

1. Install .NET SDK If you haven’t already, install the .NET SDK for your Linux distribution. You can find instructions on the official Microsoft website.check your dotnet version
   [codesyntax lang=”bash”]
   
   dotnet --version 8.0.405

   1 2	dotnet --version 8.0.405

   
   [/codesyntax]
2. Create a new ASP.NET Core project Open a terminal and run:
   
   dotnet new mvc -n LoginApp

   1	dotnet new mvc -n LoginApp

   
   [codesyntax lang=”bash”]
   
   satria@teddy:~/Documents/projects/aspnet$ dotnet new mvc -n LoginApp The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully. This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/8.0-third-party-notices for details. Processing post-creation actions... Restoring /home/satria/Documents/projects/aspnet/LoginApp/LoginApp.csproj: Determining projects to restore... Restored /home/satria/Documents/projects/aspnet/LoginApp/LoginApp.csproj (in 83 ms). Restore succeeded.

   1 2 3 4 5 6 7 8 9

   satria@teddy:~/Documents/projects/aspnet$ dotnet new mvc -n LoginApp The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully. This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/8.0-third-party-notices for details.   Processing post-creation actions... Restoring /home/satria/Documents/projects/aspnet/LoginApp/LoginApp.csproj:   Determining projects to restore...   Restored /home/satria/Documents/projects/aspnet/LoginApp/LoginApp.csproj (in 83 ms). Restore succeeded.

   
   [/codesyntax]

   Go to the project directory ‘LoginApp’ with ‘cd LoginApp’

3. Install required NuGet packages Run the following commands:
   [codesyntax lang=”bash”]
   dotnet add package Microsoft.EntityFrameworkCore.SqlServer dotnet add package Microsoft.EntityFrameworkCore.Design dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore

   1 2 3

   dotnet add package Microsoft.EntityFrameworkCore.SqlServer dotnet add package Microsoft.EntityFrameworkCore.Design dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore

   [/codesyntax]

   Make sure the version is match in LoginApp.csproj
   [codesyntax lang=”csharp”]

   <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.0" /> <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.0" /> <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.0"> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> <PrivateAssets>all</PrivateAssets> </PackageReference> </ItemGroup>

   1 2 3 4 5 6 7 8

   <ItemGroup>     <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.0" />     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.0" />     <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="8.0.0">       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>       <PrivateAssets>all</PrivateAssets>     </PackageReference>   </ItemGroup>

   [/codesyntax]

4. Set up the database connection Open appsettings.json and add the connection string:
   [codesyntax lang=”text”]
   "ConnectionStrings": { "DefaultConnection": "Server=localhost;Database=LoginApp;User Id=your_username;Password=your_password;TrustServerCertificate=True;" },

   1 2 3

   "ConnectionStrings": {     "DefaultConnection": "Server=localhost;Database=LoginApp;User Id=your_username;Password=your_password;TrustServerCertificate=True;"   },

   [/codesyntax]
   Note: I need to add ‘TrustServerCertificate=True;’

5. Create ApplicationDbContext Create a new file ApplicationDbContext.cs
   [codesyntax lang=”csharp”]
   using Microsoft.AspNetCore.Identity.EntityFrameworkCore; using Microsoft.EntityFrameworkCore; namespace LoginApp { public class ApplicationDbContext : IdentityDbContext { public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options) { } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13

   using Microsoft.AspNetCore.Identity.EntityFrameworkCore; using Microsoft.EntityFrameworkCore;   namespace LoginApp {     public class ApplicationDbContext : IdentityDbContext     {         public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)             : base(options)         {         }     } }

   [/codesyntax]

6. Update Program.cs Replace the content of Program.cs:
   [codesyntax lang=”csharp”]
   using LoginApp; using Microsoft.AspNetCore.Identity; using Microsoft.EntityFrameworkCore; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllersWithViews(); builder.Services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"))); builder.Services.AddIdentity<IdentityUser, IdentityRole>() .AddEntityFrameworkStores<ApplicationDbContext>(); var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); app.UseAuthorization(); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); // Initialize the database using (var scope = app.Services.CreateScope()) { var services = scope.ServiceProvider; try { var context = services.GetRequiredService<ApplicationDbContext>(); context.Database.EnsureCreated(); await DbInitializer.Initialize(services); } catch (Exception ex) { var logger = services.GetRequiredService<ILogger<Program>>(); logger.LogError(ex, "An error occurred while seeding the database."); } } app.Run();

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

   using LoginApp; using Microsoft.AspNetCore.Identity; using Microsoft.EntityFrameworkCore;   var builder = WebApplication.CreateBuilder(args);   // Add services to the container. builder.Services.AddControllersWithViews();   builder.Services.AddDbContext<ApplicationDbContext>(options =>     options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));   builder.Services.AddIdentity<IdentityUser, IdentityRole>()     .AddEntityFrameworkStores<ApplicationDbContext>();   var app = builder.Build();   // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) {     app.UseExceptionHandler("/Home/Error");     app.UseHsts(); }   app.UseHttpsRedirection(); app.UseStaticFiles();   app.UseRouting();   app.UseAuthentication(); app.UseAuthorization();   app.MapControllerRoute(     name: "default",     pattern: "{controller=Home}/{action=Index}/{id?}");   // Initialize the database using (var scope = app.Services.CreateScope()) {     var services = scope.ServiceProvider;     try     {         var context = services.GetRequiredService<ApplicationDbContext>();         context.Database.EnsureCreated();         await DbInitializer.Initialize(services);     }     catch (Exception ex)     {         var logger = services.GetRequiredService<ILogger<Program>>();         logger.LogError(ex, "An error occurred while seeding the database.");     } }   app.Run();

   [/codesyntax]

7. Create Login Model Create Models/LoginModel.cs:
   [codesyntax lang=”csharp”]
   using System.ComponentModel.DataAnnotations; namespace LoginApp.Models { public class LoginModel { [Required] [EmailAddress] public string Email { get; set; } = string.Empty; [Required] [DataType(DataType.Password)] public string Password { get; set; } = string.Empty; [Display(Name = "Remember me?")] public bool RememberMe { get; set; } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   using System.ComponentModel.DataAnnotations;   namespace LoginApp.Models {     public class LoginModel     {         [Required]         [EmailAddress]         public string Email { get; set; } = string.Empty;           [Required]         [DataType(DataType.Password)]         public string Password { get; set; } = string.Empty;           [Display(Name = "Remember me?")]         public bool RememberMe { get; set; }     } }

   [/codesyntax]

8. Create Account Controller Create Controllers/AccountController.cs:
   [codesyntax lang=”csharp”]
   using LoginApp.Models; using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.Mvc; namespace LoginApp.Controllers { public class AccountController : Controller { private readonly SignInManager<IdentityUser> _signInManager; public AccountController(SignInManager<IdentityUser> signInManager) { _signInManager = signInManager; } [HttpGet] public IActionResult Login() { return View(); } [HttpPost] public async Task<IActionResult> Login(LoginModel model) { if (ModelState.IsValid) { var result = await _signInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, lockoutOnFailure: false); if (result.Succeeded) { return RedirectToAction("Index", "Home"); } ModelState.AddModelError(string.Empty, "Invalid login attempt."); } return View(model); } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

   using LoginApp.Models; using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.Mvc;   namespace LoginApp.Controllers {     public class AccountController : Controller     {         private readonly SignInManager<IdentityUser> _signInManager;           public AccountController(SignInManager<IdentityUser> signInManager)         {             _signInManager = signInManager;         }           [HttpGet]         public IActionResult Login()         {             return View();         }           [HttpPost]         public async Task<IActionResult> Login(LoginModel model)         {             if (ModelState.IsValid)             {                 var result = await _signInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, lockoutOnFailure: false);                 if (result.Succeeded)                 {                     return RedirectToAction("Index", "Home");                 }                 ModelState.AddModelError(string.Empty, "Invalid login attempt.");             }             return View(model);         }     } }

   [/codesyntax]

9. Create Login View Create Views/Account/Login.cshtml:
   [codesyntax lang=”html4strict”]
   @model LoginApp.Models.LoginModel <h2>Login</h2> <form asp-action="Login" method="post"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="Email"></label> <input asp-for="Email" class="form-control" /> <span asp-validation-for="Email" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Password"></label> <input asp-for="Password" class="form-control" /> <span asp-validation-for="Password" class="text-danger"></span> </div> <div class="form-group"> <div class="checkbox"> <label> <input asp-for="RememberMe" /> @Html.DisplayNameFor(m => m.RememberMe) </label> </div> </div> <button type="submit" class="btn btn-primary">Log in</button> </form>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   @model LoginApp.Models.LoginModel   <h2>Login</h2>   <form asp-action="Login" method="post">     <div asp-validation-summary="ModelOnly" class="text-danger"></div>     <div class="form-group">         <label asp-for="Email"></label>         <input asp-for="Email" class="form-control" />         <span asp-validation-for="Email" class="text-danger"></span>     </div>     <div class="form-group">         <label asp-for="Password"></label>         <input asp-for="Password" class="form-control" />         <span asp-validation-for="Password" class="text-danger"></span>     </div>     <div class="form-group">         <div class="checkbox">             <label>                 <input asp-for="RememberMe" /> @Html.DisplayNameFor(m => m.RememberMe)             </label>         </div>     </div>     <button type="submit" class="btn btn-primary">Log in</button> </form>

   [/codesyntax]

10. Set up the database. Create a new database ‘LoginApp’
11. Add a test user Create DbInitializer.cs:
    [codesyntax lang=”csharp”]
    using Microsoft.AspNetCore.Identity; namespace LoginApp { public static class DbInitializer { public static async Task Initialize(IServiceProvider serviceProvider) { var userManager = serviceProvider.GetRequiredService<UserManager<IdentityUser>>(); string email = "admin@example.com"; string password = "Admin123!"; if (await userManager.FindByEmailAsync(email) == null) { var user = new IdentityUser { UserName = email, Email = email }; await userManager.CreateAsync(user, password); } } } }

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

    using Microsoft.AspNetCore.Identity;   namespace LoginApp {     public static class DbInitializer     {         public static async Task Initialize(IServiceProvider serviceProvider)         {             var userManager = serviceProvider.GetRequiredService<UserManager<IdentityUser>>();               string email = "admin@example.com";             string password = "Admin123!";               if (await userManager.FindByEmailAsync(email) == null)             {                 var user = new IdentityUser { UserName = email, Email = email };                 await userManager.CreateAsync(user, password);             }         }     } }

    [/codesyntax]
    Note: it’ll create a new dummy user with
    email: admin@example.com
    password: Admin123!

12. Run the application Execute:
    dotnet run

    1	dotnet run

13. Navigate to http://localhost:5000/Account/Login in your browser.
    
14. create some navigation menus (login, logout, etc) on the homepage
    Create a new file called _NavBar.cshtml in the Views/Shared folder with the following content:
    [codesyntax lang=”html4strict”]
    @using Microsoft.AspNetCore.Identity @inject SignInManager<IdentityUser> SignInManager @inject UserManager<IdentityUser> UserManager <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">LoginApp</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a> </li> @if (SignInManager.IsSignedIn(User)) { <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Logout">Logout</a> </li> } else { <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Register">Register</a> </li> } </ul> </div> </div> </nav>

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

    @using Microsoft.AspNetCore.Identity @inject SignInManager<IdentityUser> SignInManager @inject UserManager<IdentityUser> UserManager   <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">     <div class="container">         <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">LoginApp</a>         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"                 aria-expanded="false" aria-label="Toggle navigation">             <span class="navbar-toggler-icon"></span>         </button>         <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">             <ul class="navbar-nav flex-grow-1">                 <li class="nav-item">                     <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>                 </li>                 @if (SignInManager.IsSignedIn(User))                 {                     <li class="nav-item">                         <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Logout">Logout</a>                     </li>                 }                 else                 {                     <li class="nav-item">                         <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a>                     </li>                     <li class="nav-item">                         <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Register">Register</a>                     </li>                 }             </ul>         </div>     </div> </nav>

    [/codesyntax]

    Now, let’s include this partial view in your layout file. Open the Views/Shared/_Layout.cshtml file and add the following line just after the opening <body> tag:
    [codesyntax lang=”html4strict”]

    <body> <partial name="_NavBar" /> <!--header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container-fluid"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">LoginApp</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </li> </ul> </div> </div> </nav> </header--> <!-- ... existing content ... --> </body>

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    <body>     <partial name="_NavBar" />     <!--header>         <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">             <div class="container-fluid">                 <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">LoginApp</a>                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"                         aria-expanded="false" aria-label="Toggle navigation">                     <span class="navbar-toggler-icon"></span>                 </button>                 <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">                     <ul class="navbar-nav flex-grow-1">                         <li class="nav-item">                             <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>                         </li>                         <li class="nav-item">                             <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>                         </li>                     </ul>                 </div>             </div>         </nav>     </header-->     <!-- ... existing content ... --> </body>

    [/codesyntax]
    Note: I need to remove the default <header> tag to use the new partial navbar

15. create controller for account logout
    modify Controllers/AccountController.cs
    [codesyntax lang=”csharp”]
    using LoginApp.Models; using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.Mvc; namespace LoginApp.Controllers { public class AccountController : Controller { ... [HttpPost] public async Task&lt;IActionResult&gt; Login(LoginModel model) { ... } [HttpPost] [ValidateAntiForgeryToken] public async Task&lt;IActionResult&gt; Logout() { await _signInManager.SignOutAsync(); return RedirectToAction("Index", "Home"); } } }

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    using LoginApp.Models; using Microsoft.AspNetCore.Identity; using Microsoft.AspNetCore.Mvc;   namespace LoginApp.Controllers {     public class AccountController : Controller     {         ...           [HttpPost]         public async Task<IActionResult> Login(LoginModel model)         {            ...         }           [HttpPost]         [ValidateAntiForgeryToken]         public async Task<IActionResult> Logout()         {             await _signInManager.SignOutAsync();             return RedirectToAction("Index", "Home");         }     } }

    [/codesyntax]

    Now, let’s update the _NavBar.cshtml partial view to use a form for the logout action, as it should be a POST request. Update the logout link in the _NavBar.cshtml file like this:
    [codesyntax lang=”html4strict”]
    

    // ... existing code ... @if (SignInManager.IsSignedIn(User)) { &lt;li class="nav-item"&gt; &lt;form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right"&gt; &lt;button type="submit" class="btn btn-link navbar-btn navbar-link"&gt;Logout&lt;/button&gt; &lt;/form&gt; &lt;/li&gt; } // ... existing code ...

    1 2 3 4 5 6 7 8 9 10

    // ... existing code ... @if (SignInManager.IsSignedIn(User)) {     <li class="nav-item">         <form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">             <button type="submit" class="btn btn-link navbar-btn navbar-link">Logout</button>         </form>     </li> } // ... existing code ...

    
    [/codesyntax]
    at the end of this file, add this javascript
    [codesyntax lang=”html4strict”]
    
    &lt;script&gt; $(function() { $('#logoutForm').on('click', function(e) { e.preventDefault(); $(this).submit(); }); }); &lt;/script&gt;

    1 2 3 4 5 6 7 8

    <script>     $(function() {         $('#logoutForm').on('click', function(e) {             e.preventDefault();             $(this).submit();         });     }); </script>

    
    [/codesyntax]
16. Add controller for registration and forgot password?