How to build a login form, using C# and SQL

I recently picked up a weekly C# course, and, since I find it interesting, I take my time during the weekend to expand on what is discussed there.

For example, this week we were taught how to create a login form:

Now I’m not here to complain about the design, but the code we used is what bugged me. I know that the purpose of the lesson was to teach us how to open other forms and how to use pictureBoxes, not how to actually create a good login form, but it was so.. unrealistic.

As such, I decided to look into how to create a login form which actually logs you in and has somewhat of a database, you know?

Here’s how to do it:

In order to set up a login form, we need to create what is called a SQL database. To create it, you..

Open the Server Explorer located on the left of the screen, right click Data Connections, then Add Connection. Select the data source as “Microsoft SQL Server Database File”
Then you press Browse and select the location where you want to save the DB. It is good practice to keep your DB in a separate folder.

There we go! Now our DB is up and running. The only problem is that it is currently empty. We need to add the login info (Username/Password) to the DB. In order to do this, we’ll be creating a table:

Right click the Tables folder to create a table.

After creating the table, you’ll be greeted with this:

Our fancy table editor

Here is where we’ll add the types of data we’re going to store in our table. For this tutorial, we’ll be using:

  • username, type varchar[50]: where the usernames will be stored. The type varchar simply means “a string of characters of variable length”.
  • password, also type varchar[50].

VERY IMPORTANT: For the sake of simplicity, I will not go through secure password keeping in this tutorial. I will be tackling this issue in a later post, which I will link to here. Please do NOT actually store your passwords in plaintext.

After adding the columns, press the Update button to add them to the DB, then press Update Database. After that, right click the Tables folder and Refresh it so that the table now shows up in the DB.

For now, we’ll be adding a few usernames and passwords manually, in order to test logging in. I repeat, do NOT store passwords in plaintext in actual projects! Hash & salt your passwords!

Test usernames and passwords added. Press Shift+Alt+R to refresh the table.

That’s it for setting up the database. Now, let’s get to the fun part! Actually coding the login button!

We’ll need to find the Connection String of the Database so we can connect our Login Form to it. You can find it by right clicking the DB name and pressing properties:

Here it is, in the Properties tab.

Here’s how we’re making it work:

As you might have noticed, we’re using quite a few new elements here:

  • The SqlConnection creates a new connection to the DB using a Connection String.
  • With the SqlDataAdapter we communicate between the Sql DB and the DataTable.
  • In the DataTable we’re going to place what entries from the DB match what text the user entered in the username/password fields.
  • Finally, using the sda.Fill(dtbl); we’ll add the entries which match the query sent to the DB (=which elements in the table have the username and password the user wrote in the textBoxes) into the newly made DataTable.

After doing these operations, if there’s at least 1 row in the DataTable (meaning there is a match found with the same username and password in the database) we allow the connection.

Now, we can log in. But how about registering? That’s a bit more tricky. We need to establish a connection to the SQL Server, and issue a query which inserts a new row into our table.

But, before that, we should make sure that there is no one with the same username already registered :)

The logic is the same as when checking the login creditentials, but this time we only look for a matching username in our table.

Now that that’s out of the way, let’s look into adding a new row into the DB!

This is a bit complicated. The way it works is:

  1. Write the query in the commString, where @val1 and @val2 are the user/password combination which is going to be added later.
  2. Connect to the database and create a new SqlCommand(this is safer because now we have control over the input so we can sanitize it)
  3. Add the username and password in place of the val1, val2. This way we can avoid people writing SQL code in the textboxes and deleting my database.
  4. Open the connection and execute the query.

That’s it! Now we’ve got an actual working login system, allowing for registration and which does not “forget” the registered accounts after closing the application.

Next time we’ll go through some security measures that can(and should) be added to our login form (hashing + salting passwords, further prevention of SQL injections).

You can find the code of this project here.

If this has been of any help to you, please press the ❤ button!