Create login for ASP.Net Web App

Creating the page & HTML

Create a new `Razor Page` and call it `login`. In the HTML for the page add the following form to allow the user to enter their username and password:

	<h1 class="display-4">Login</h1>

	<form method="post">
		Username:<input type="Text" name="user">
		Password:<input type="password" name="password">
		<input type="submit">
	</form>

Connecting the database

Now go to the `loginModel` section (right click the page and select goto PageModel). Inside the loginModel class add the following to handle the database connection:

		string connection = "server=localhost;user=root;database=test;port=3306;password=usbw;";

		public MySqlConnection GetConnection
		{
			get
			{
				return new MySqlConnection(connection);
			}
		}

Handle the submitted data

Now add a new method to the loginModel class:

public LocalRedirectResult OnPost()
{

    return LocalRedirect("/login");
}

Now add the code into our new method, make sure it is before the return line:

connection.Open();

using var Command = new MySqlCommand("SELECT * FROM test where username=@u and password=@p", connection);
Command.Parameters.AddWithValue("@u", Request.Form["user"]);
Command.Parameters.AddWithValue("@p", Request.Form["password"]);
using var reader = Command.ExecuteReader();

This code will open the database connection, it then creates a command with the correct sql to retrieve the login details of the user. the `@u` and `@p` are parameters and are replaced by the information from the form. Finally this will execute the command and fill the reader with the retrieved data.

Now, after the `Command.ExecuteReader()` command we need to handle the data returned. Add this code:

			if(reader.HasRows)
			{
				HttpContext.Session.SetString("_user", Request.Form["user"]);
				return LocalRedirect("/Index");
			}
			connection.Close();

This final code will add the user to the current session, this is so we can check if they are currently logged in. If login was successful it redirects to the index page.

Index / Home Page

You could adapt the index page to:

• only show logout when user is logged in
• only show register & login when no user is currently logged in