Custom login page with Owin Authentication

In the newest version of Alloy sample we've encountered the AspNetIdentityUserProvider which required an update of how to create a custom login page using Owin Authentication. The instruction below use an Alloy sample site as it's based project.

First off, let's start with the model: Create a LoginPage class which inherits StandardPage class. No additional configuration is required. AvailableContentTypes and Access attributes are optional.

A view model class is required to pass username and password data from view to controller:

Now, here comes the fun part. We need to create a controller class which has a little difference compares to the blog post (Creating a custom login page in Episerver and MVC).

Membership.Provider.ValidateUser function only works with the old-fashioned authentication which is configured using SQLMembershipProvider and WindowsMembershipProvider in web.config file. If you notice, in order to use Owin Authentication, the membership and roleManager sections must be cleared out from web.config file.

Using an instance of UISignInManager class to call SignIn function requires the name of the membership provider (EPi_AspNetIdentityUserProvider) which can be easily got using an instance of UIUserProvider.

The final step is adding a view for this custom login page. Using standard MCV's HttpHelper functions helps creating a simple view which has 2 textboxes and a submit button. After that you can implement your own way of how users are navigated to this login page.

Want something more creative? You can create a login block which can be put in any content area on any page you prefer. Or using just standard MVC's model to hard-code your login page which cannot be edited or created by WebAdmins or WebEditors users. The sample code provided in this article should be enough to do your trick!

Notes:
- Applied version: EPiServer CMS 10.
- Sample code attached.