How to create a single login page for both clients (Desktop and htmlclients) in visual Studio Lightswitch?

While working on the lightswitch, I was thinking that can we create a single login page for both clients. Then with the help of  Matt Thalman post, I have done this. See below how you can do this.

In lightswitch when we publish an app with the use of Form Authentication then it will auto create the login screens for Desktop and Htmlclient. In desktop client login UI is based on the Silverlight and we cannot do any change in the style of this page. We can configure a single aspx page for login for both clients. We can configure a default html login page for desktop as well. 

Lightswitch doesn’t have built-in support for customizing this UI. However, since LightSwitch is an ASP-NET based application you can use the features in ASP.NET to work around this. 

Here are the steps how we can use the HTMLCLlient login window for Desktop Client too. 

Step 1: First of all Navigate to Project.Server folder of your project and Insert a new Web Form with name Home.aspx.

Step 2: Then add the following code under Page_Load event of the application.

Add reference 

using System.Web.Security;

protected void Page_Load(object sender, EventArgs e)

        {

            if (!this.User.Identity.IsAuthenticated)

            {

                FormsAuthentication.RedirectToLoginPage();

            }

            else

            {

               this.Response.Redirect(FormsAuthentication.DefaultUrl);

            }

        }

The above code will check the Authentication of the user. If user is logged then it will navigate to DefaultRUL which we will set in the web.config file later on otherwise it will redirect to default Login page (which is an htmlclient).

Step 3: Go to the web.config file and open it write some line of code in this. 

  <system.web>

    <authorization>

      <deny users="?" />

    </authorization>

  </system.web>

Next we need to change the default page to Home.aspx

<defaultDocument>

  <files>

    <clear />

    <add value="default.htm" />

  </files>

</defaultDocument>

 

To configure the default page change “default.htm” to “Home.aspx”.

In addition, we need to configure default.htm to be the page that is redirected to after a successful login.  To do this, find the forms element in the web.config file and add the bolded text:

<authentication mode="Forms">

  <forms name="ApplicationName" defaultUrl="default.htm" />

</authentication>

Step 4: To configure the main LightSwitch project to be aware of the new ASPX files (Home.aspx) that were added so that they will be published along with the app. To do this, unload the main LightSwitch project:

With the project unloaded, open the physical .LSPROJ file in the IDE:

Do a search for “_BuildFile” and append the following text within that section of the file:

<_BuildFile Include="ServerGenerated\Home.aspx">

  <SubFolder>

  </SubFolder>

  <PublishType>

  </PublishType>

</_BuildFile>

Reload the LightSwitch project:

 

Now after after publishing the  app you can access the same (html) login window.

Thanks