{"id":1984,"date":"2021-06-17T12:00:00","date_gmt":"2021-06-17T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/build-a-complete-app-with-asp-net-c-sql-lite-part-8\/"},"modified":"2026-07-06T18:42:22","modified_gmt":"2026-07-06T16:42:22","slug":"build-a-complete-app-with-asp-net-c-sql-lite-part-8","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/build-a-complete-app-with-asp-net-c-sql-lite-part-8\/","title":{"rendered":"Build a Complete App with ASP.Net, C#, SQL Lite \u2013 Part 8"},"content":{"rendered":"<p>In this part, we would be setting up\u00a0 the authentication, authorization, user login, registration and profile. We will cover the\u00a0 following here:<\/p>\n<ol>\n<li><a href=\"#t1\">Setup the Layout Page<\/a><\/li>\n<li><a href=\"#t2\">Setup the ASP.Net Core Identity<\/a><\/li>\n<li><a href=\"#t3\">Complete the Startup Configuration<\/a><\/li>\n<li><a href=\"#t4\">Customize the Login and Registration Layout<\/a><\/li>\n<li><a href=\"#t5\">Update Database Connections<\/a><\/li>\n<li><a href=\"#t6\">Add the Migration<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t1\">1. Setup the Layout Pages<\/strong><\/h5>\n<p>Remember that we already have a layout page for our application which contains the navigation sidebar and other components. However, we would like to have a different layout for these pages:<\/p>\n<ul>\n<li>Login page<\/li>\n<li>Registration Page<\/li>\n<li>Password Reset Page<\/li>\n<\/ul>\n<p>The reason for this is because these pages should be accessible without any authentication. So they don&#8217;t contain the sidebar\u00a0 or header. You can check them out from the original template we downloaded.<\/p>\n<p>Follow the steps below to set up the Layout:<\/p>\n<p><strong>Step 1<\/strong> &#8211; Create a new layout page in the Shared folder by duplicating the _Layout.cshtml page. Name it _LayoutLogin.cshtml<\/p>\n<p>We would later customize this page using the Login.html page from out downloaded template.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t2\">2. Setup ASP.NET Core Identity<\/strong><\/h5>\n<p>Follow the steps below to add ASP.NET Core Identity:<\/p>\n<p><strong>Step 1<\/strong> &#8211; Right-click on your project and choose Add &gt; New Scaffolded Item<\/p>\n<p><strong>Step 2<\/strong> &#8211; In the Window that appears, Choose Identity and click Add<\/p>\n<p><strong>Step 3<\/strong> &#8211; In the selections, check Account\/Login, Logout, Register, ResetPassword as AccessDenied. See the figure below. Also check &#8216;Use SQL Lite instead of SQL Server&#8217;<\/p>\n<p><strong>Step 4<\/strong> &#8211; In the Layout selected at the upper section of the page, click and select the <em>_LayoutLogin.cshtml<\/em> we created earlier.<\/p>\n<p><strong>Step 5<\/strong>\u00a0&#8211; In the Add Identity Window, click on the + sign to add a new Context. Repeat to add a new User class.<\/p>\n<p>The final window with all the selections is shown below:<\/p>\n<figure id=\"attachment_14719\" aria-describedby=\"caption-attachment-14719\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-14719\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register-300x200.jpg\" alt=\"Add Identity Selection for Login and Register\" width=\"300\" height=\"200\" srcset=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register-300x200.jpg 300w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register-1024x684.jpg 1024w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register-768x513.jpg 768w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register-700x465.jpg 700w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register-600x401.jpg 600w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register-272x182.jpg 272w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Add-Identity-Selection-for-Login-and-Register.jpg 1403w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-14719\" class=\"wp-caption-text\">Add Identity Selection for Login and Register<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><strong>Step 6<\/strong> &#8211; Click on Add<\/p>\n<p>After a few seconds, the Identity is successfully added to the application. So if you look at the solution explorer, you will see a new folder called Areas. This contains all the necessary artifact for user identity as selected.\u00a0 Expand and check the content of this folder.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t3\">3. Complete the Startup Configuration<\/strong><\/h5>\n<p>There are a few more configuration we have to make to enable authentication in our application. Follow the steps:<\/p>\n<p><strong>Step 1<\/strong> &#8211; Open the <em>Startup.cs<\/em> file. In the ConfigureServices method add the support for Razor page like so:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">services.AddRazorPages();\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 2<\/strong> &#8211; In the Configure method, enable useAuthentication() just before the useAuthorization() line<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">app.UseAuthentication();\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 3<\/strong> &#8211; Inside useEndpoints call, added the following:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">endpoints.MapRazorPages();\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>At this point you can launch the application and visit \/identity\/account\/login. You will see the login page. Do same for registration.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t4\">4. Customize the Login and Registration Pages<\/strong><\/h5>\n<p>First, we would now use the Login.html page to customize the LoginLayout.cshtml page. Follow the steps below:<\/p>\n<p><strong>Step 1<\/strong> &#8211; Open the LoginLayout.cshtml page and delete the header and the sidebar.<\/p>\n<p><strong>Step 2<\/strong> &#8211; Open the Register.cshtml page,\u00a0 and delete the second column. Next, change the first column class to col-md-12.<\/p>\n<p><strong>Step 3<\/strong> &#8211; Repeat Step 2 for the Login.cshtml page<\/p>\n<p><strong>Step 4<\/strong> &#8211; Copy the content of the &lt;body&gt; section from the register.html (without the scripts section) to the body section of the LoginLayout.cshtml.<\/p>\n<p><strong>Step 5<\/strong> &#8211; Delete the &lt;form&gt; section and in it&#8217;s place add the @RenderBody. Now, you&#8217;re done with the register page.<\/p>\n<p><strong>Step 6<\/strong> &#8211; Add background images to the pages using the code below in the &lt;body&gt; tag of the _LayoutLogin.cshtml. You can find the image bg-login3.jpg in my Github repo. You should place it inside the wwwroot\/assets\/img directory.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;body<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"background-image: url('\/assets\/img\/bg-login3.jpg'); <\/span>\r\n<span style=\"background-color: #fff0f0;\">background-repeat: no-repeat; <\/span>\r\n<span style=\"background-color: #fff0f0;\">background-size:cover\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n<\/pre>\n<p>You can now do some testing to make sure it displays correctly.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t5\">5. Update Database Connection<\/strong><\/h5>\n<p>We would have to allow the the AuthContext to use the existing database connection. To do this, follow the steps:<\/p>\n<p><strong>Step 1<\/strong> &#8211; Open the IdentityHostingStartup.cs file and change the name of the connection string to the HospitalConnectionString<\/p>\n<p><strong>Step 2<\/strong> &#8211; Open the appSettings.json file and delete the AuthContextConnection<\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t6\">6. Add Database Migration<\/strong><\/h5>\n<p>We would like to database tables for user to be created for us. We would also want\u00a0 to have some initial user database added to the database. <a href=\"https:\/\/kindsonthegenius.com\/blog\/build-a-complete-app-with-asp-net-c-sql-lite-part-4\/\" target=\"_blank\" rel=\"noopener\">Remember Seeders from Part 4<\/a>? Now, let&#8217;s do this.<\/p>\n<p><strong>Step 1<\/strong> &#8211; First open the Package Manager console and run the following command to add the migration for the AuthContext<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">add-migration AuthData -Context AuthContext\r\n<\/pre>\n<p>If this code executes successfully, you can check inside the Migrations folder, you&#8217;ll see a new folder called Auth and new migration created inside.<\/p>\n<p><strong>Step 2<\/strong> &#8211; Now run the following command to update the database:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">Update-Database -Context AuthContext\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 3(Optional)<\/strong> &#8211; To enable migration at startup:\u00a0 open the WebHostExtensions.cs file and modify it adding the following two lines:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #333399; font-weight: bold;\">var<\/span> authContext = services.GetRequiredService&lt;AuthContext&gt;();\r\nauthContext.Database.Migrate();\r\n<\/pre>\n<p>At this point, you can launch the application. If it works successfully, great! You can stop it and check the database. You&#8217;ll see that new tables have been created.<\/p>\n<p>Also try to register a new user to see the confirmation. However, there still much to be done. So let&#8217;s move on to the next part.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this part, we would be setting up\u00a0 the authentication, authorization, user login, registration and profile. We will cover the\u00a0 following here: Setup the Layout &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[311],"tags":[],"class_list":["post-1984","post","type-post","status-publish","format-standard","hentry","category-sql"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1984"}],"version-history":[{"count":2,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1984\/revisions"}],"predecessor-version":[{"id":2197,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1984\/revisions\/2197"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}