andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

A new release of the package Auth0 Templates for .NET is out with new project templates and other improvements.

A new awesome version of the [Auth0 Templates for .NET package](https://www.nuget.org/packages/Auth0.Templates/) has been released! It brings you new templates and other improvements, which we will discover in a moment. Install now the latest release of the templates by running the following command in a terminal window:

```bash
dotnet new install Auth0.Templates
```

> ⚠️ Make sure you have uninstalled any previous version of the package from your machine before installing the new one.

Ready to learn what's new in the latest release? Let's go!

## New Project Templates

The first big news is that two new templates are now available: the Blazor Web App and the MAUI templates.

### The Blazor Web App template

The Blazor Web App template allows you to create a web application using the .NET 8 Blazor application model. As you may know, this new type of Blazor application has some complexities in properly supporting authentication. Take a look at [this article](https://auth0.com/blog/auth0-authentication-blazor-web-apps/) to learn more about it. Now you can have a starting point for your new Blazor application with Auth0 embedded in a snap by simply running the following command:

```bash
dotnet new auth0blazor -o MyNewBlazorApp
```

As usual, if you also have the [Auth0 CLI](https://github.com/auth0/auth0-cli) installed on your machine and logged in, you can automatically register your app with Auth0. Of course, you can still use the templates with Visual Studio:

![Auth0 Blazor Web App template in Visual Studio](https://images.ctfassets.net/23aumh6u8s0i/1fmXTCgaPVzvKGGiW0QPon/edd5f2a979472be788c9c6d448dc1ed0/auth0-blazor-web-app-vs.png)

Read [more about the Blazor Web App template here](https://github.com/auth0/auth0-dotnet-templates/blob/main/docs/auth0blazor.md).

### The MAUI template

With the MAUI template, you can build desktop and mobile applications with Auth0 authentication for Windows, macOS, iOS, and Android using a single code base. In this case, the command to use is as follows:

```bash
dotnet new auth0maui -o MyNewMauiApp
```

Building your new MAUI app using this template will save you a lot of time, as you can see from reading [this article](https://auth0.com/blog/add-authentication-to-dotnet-maui-apps-with-auth0/).

Check out [this document to learn more about the MAUI template](https://github.com/auth0/auth0-dotnet-templates/blob/main/docs/auth0maui.md).

## Other Improvements

In addition to the new templates, the new package brings you other internal and external improvements. To mention just a few of them:

- The Blazor WebAssembly template now supports .NET 8.
- The program that registers your application with Auth0 is no longer tied to .NET 7.0.
- A few issues with the auto-registration script have been fixed.

These improvements help provide a better experience when scaffolding and registering your application with Auth0.

<include src="ebook-ads/dotnetIdentity" />

## JetBrains Rider Support

Now you can use the Auth0 Templates with JetBrains Rider! Starting with [version 2024.1](https://www.jetbrains.com/rider/whatsnew/), Rider fully supports custom templates, so now you can choose your preferred IDE to build your .NET applications with Auth0 integrated, regardless of your operating system. This is especially important now that [Visual Studio for Mac is close to its retirement](https://learn.microsoft.com/en-us/visualstudio/mac/what-happened-to-vs-for-mac?view=vsmac-2022).

Previously, Rider [didn't support parameters for custom templates](https://youtrack.jetbrains.com/issue/RIDER-16759), which was a clear barrier to using the Auth0 Templates. Now you can use them just like in Visual Studio!

![Auth0 Blazor Web App Template in JetBrains Rider](https://images.ctfassets.net/23aumh6u8s0i/2wWfc13e4He4h6Ob3H7Eyu/d4fcd35aab3ae5a1ed41f6ec25fc486b/auth0-blazor-web-app-rider.png)

## A Look Back and a Glimpse Forward

The first version of the package was released one year ago. Since then, the project has grown with new templates and integration with the Auth0 CLI for automatic registration of your applications. During this year, the package has been downloaded over 8,000 times, and we have received suggestions and contributions.

We want to continue improving the current templates by adding features and improving the developer experience. Your feedback is very important. Share your thoughts by leaving a message below, or by opening a [new issue](https://github.com/auth0/auth0-dotnet-templates/issues/new/choose) to report problems and request new features.
If you like the project, don't forget [to star it on GitHub](https://github.com/auth0/auth0-dotnet-templates).

New Templates for Building .NET Apps with Auth0 Authentication

I stream, blog, and make youtube videos about tech stuff. I love coding, I love AI, and I love building stuff!

Staff Developer Advocate

Juan Cruz Martinez

Learn how to create customizable and secure login pages that match your branding to enhance user experience and conversion rates.

So, you've built an outstanding application. Your landing page is meticulously designed, compelling, and has a high conversion rate. You've carefully crafted every detail of the user experience, but what about the entry points to your app – the signup and login pages?

Often overlooked in the design process, these critical touchpoints serve as the users’ gateways into your application. They should be as compelling, user-friendly, and beautiful as the rest of your application. Just as the landing page captures the user's attention, the login and signup pages are where you can truly start to engage users, encouraging them to join your application.

In this article, we'll explore how Auth0 makes it easy to build login and signup experiences that not only align seamlessly with your branding but also provide a superior user experience. A poorly designed login page can lead to user frustration and higher abandonment rates, whereas a well-designed one establishes trust and encourages engagement. Because every aspect of your application, even the seemingly mundane, should be nothing short of beautiful.

Let's dive into how Auth0 can elevate your login experience, covering the importance of UI and UX, and offering practical tips to create extraordinary login flows.

## The Importance of the Login Page Design

The login page is often the first impression a user has of your application. It sets the tone for the entire user experience and can make or break a user's decision to continue using your app.

The design of a login page encompasses both UI and UX. It should not only be pretty but also easy to use while conveying a sense of security and trustworthiness to the user.

If you need inspiration or to learn some tips on what makes good login pages extraordinary, check out these [ten tips](https://www.invisionapp.com/inside-design/login-page-design/).

## Getting Started

Auth0 offers a variety of [customization options to match your application's branding and design](https://auth0.com/blog/customize-auth0-universal-login-with-auth0-cli/). With Auth0, you can rest assured that your login and signup pages will be not only beautiful and match your brand but also secure and reliable.

In many scenarios, those out-of-the-box settings are all you need to make your login and signup pages match your brand and style. But in case you want a completely customized page, Auth0 offers the possibility to create your own styles and designs using [HTML, CSS, and JavaScript templates](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates). 

> Custom templates require enabling [custom domains](https://auth0.com/docs/customize/custom-domains), which is a paid feature.

In this article, we’ll focus on creating our own template to have full control over the login experience. However, if you would like to know how to set up your branding settings instead, you can refer to this article on [Customize Auth0 Universal Login with Auth0 CLI](https://auth0.com/blog/customize-auth0-universal-login-with-auth0-cli/).

You can work with templates either through the [Auth0 Dashboard](https://manage.auth0.com/#/login_page) with an integrated code editor and preview mode, or you can use the [Auth0 CLI](https://github.com/auth0/auth0-cli) with your editor of choice and [Storybook](https://storybook.js.org/) to preview your designs.

Throughout the article, we'll use the Auth0 CLI to customize the templates as it provides a rich developer experience.

## Setting up the Auth0 CLI

The Auth0 CLI is a powerful tool that allows you to manage your entire Auth0 tenant from the command line. The Auth0 CLI helps you simplify your workflows and set up automation on your Auth0 account.

### Install the Auth0 CLI

The Auth0 CLI is available for macOS, Linux, and Windows. To install it on your preferred OS, please follow [these installation instructions](https://github.com/auth0/auth0-cli#installation).

After your installation completes, you can verify the installation by running the following command:

```bash
auth0 -v
```

### Connect the CLI to your Auth0 Account

To connect the CLI to your Auth0 account, you'll need to log in. Run the following command in your terminal and follow the instructions to authenticate:

```bash
auth0 login
```

First, the CLI will prompt for one of two authentication methods, `As a user` or `As a machine`. For now, we’ll select `As a user` since it is the recommended option for a personal computer. However, for automation scenarios, it is recommended to select the latter.

Next, we need to authenticate in the browser using [device authorization flow](https://auth0.com/docs/get-started/authentication-and-authorization-flow/device-authorization-flow). The Auth0 CLI will show a code on the screen and will open a browser session, where the code should match, and after verification, you’ll have to authorize the CLI on all the requested scopes.

## Activate a Custom Domain

As mentioned before, a requirement for editing custom templates is to activate custom domains, which is a good practice for production. Since custom domains come in different configurations and multiple steps, I won’t be covering them in this article. Instead, I can refer you to the [custom domains documentation](https://auth0.com/docs/customize/custom-domains), where you can find all the information you’ll need with step-by-step instructions.

Once you have a custom domain set up on your account, you can continue with the rest of the article.

## Customizing the Universal Login UI

To start customizing the Universal Login UI, run the following command on your terminal:

```bash
auth0 universal-login customize
```

This will open the Auth0 customization editor on your browser which will allow you to change any visual settings in Universal Login, from colors, logo, texts, and you can design your own templates with live preview in this app.

![Auth0 Universal Login Editor Preview](https://images.ctfassets.net/23aumh6u8s0i/5YNs9FYoGfPXrMon6OMpkY/88008ca9b492268c60724883011271f0/Screenshot_2024-04-18_at_09.41.25.png)

Any changes that you make locally can then be deployed to your Auth0 tenant from the same UI.

### Exploring the UI

The UI customization tool is divided into three sections:

- **Navigation bar**: It allows you to work on different areas of customization, from settings, theme, page template and custom texts. It also allows you to navigate through the different prompts like login, signup, etc.
- **Editor**: On the left side, it's the editor. It will display information about the current state of your page in either JSON for settings or HTML code for the page template editor.
- **Preview window**: The preview window gives you a live preview of your changes and how your UL page will look like when deployed to your tenant.

## Building a Beautiful Template

If you jump into the **Page Template** section, the editor will load the current template available for your tenant. If you have never customized your template, it will display the default template which looks like this:

```html
<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {%- auth0:widget -%}
  </body>
</html>
```

There's some custom code in that template, let's explore what each of those sections do:

- `{%- auth0:head -%}`: This will set all the head elements that are required for universal login to work, like importing scripts, basic styles, etc.
- `{%- auth0:widget -%}`: This will place the login widget on the screen.

Templates use [Liquid syntax](https://shopify.github.io/liquid/basics/introduction/), with variables you can use to further customize your experience. You can read about all variables available [here](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates).

One of the benefits of using Auth0's rich templating system is the ability to customize logic depending on the current prompt. For example, you could have some parts of the UI shown on the signup screen but not on the login or other prompts. The term prompt is used to refer to a specific step in the login flow. Each prompt can have one or more screens. For example, the `reset-password` prompt would have multiple screens for resetting password requests, checking your email, entering a new password, and confirming your change. You can find the complete list of prompts and screens on the [official template variables documentation](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates#:~:text=screen%20being%20rendered.-,The%20term%C2%A0prompt,-is%20used%20to).

You can do that by implementing conditionals over the variable `prompt.name`. Here's an example that renders additional content when the user is signing up.

```text
{% if prompt.name == "signup" %}
Show this only if the user is signing up
{% end %}
```

As part of templating, you can also set custom brand parameters, such as the brand's primary color, background, and logo, which you can use throughout the template by accessing the `branding` variable.

For example, if you need a button that aligns with the branding's primary color, you could implement it as follows:

```html
<button style="background-color: {{branding.colors.primary}}" ...>My Button</button>
```

Now that we know what we can do with the templating system, it's time to build your own.

Here's what I'll build. Feel free to copy and paste this template and customize it to your application or use it as a baseline for your own.

- Signup screen:
	![Custom Signup Screen](https://images.ctfassets.net/23aumh6u8s0i/5u5pK7O3FLMInWmakSjRAr/99dce5b115abc63d90ea271440f1afa6/custom-template-signup.png)
- Login screen:
	![Custom Login Screen](https://images.ctfassets.net/23aumh6u8s0i/3dzWx5rQ3xiIgqUTyBTqXT/0fee59fa6b4f593f5771ed4e25d8100d/custom-template-login.png)

What’s interesting about this design is that the signup page looks different from the rest as it provides additional information about the product, so users know what they are signing up for. I also make use of variables to set the branding color on custom elements and I added some responsive elements for tablets and mobile devices.

Here is my template for your reference:

```html
<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}

    <style>
        body {
            background-color: #fff;
        }

        .wrapper {
            max-width: 80rem;
            margin: 0 auto;
        }

        {% if prompt.name == "signup" %} 
        .container {
            width: 100%;
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
        }

        @media screen and (max-width: 720px) {
            .container {
                display: flex;
                flex-direction: column;
            }
        }

        .container > .info {
            max-width: 28rem;
            padding: 1rem;
        }
        {% else %}
        .container {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container > .info {
            display: none;
        }
        {% endif %}

        .container > .info h2.title {
            font-size: 3rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            font-weight: bold;
        }

        .container > .info p.subtitle {
            color: #718096;
        }

        .container > .info ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        .container > .info li {
            color: #1A202C;
        }

        .container > .info li svg {
            color: #5CC98D;
            vertical-align: text-bottom;
            margin-top: 1.5rem;
        }

        .container > .login-box {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4rem;
        }

        .container > .login-box svg {
            position: absolute;
            width: 100%;
        }
    </style>
  </head>
  <body>
    <div class="wrapper">
        <div class="container">
            <div class="info">
                <h2 class="title">My Product</h2>
                <p class="subtitle">My product is awesome and it offers the following features:</p>
                <ul role="list">
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 1
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 2
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 3
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 4
                    </li>
                    <li>
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" focusable="false" role="presentation" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>
                        Feature 5
                    </li>
                </ul>
            </div>
            <div class="login-box">
                <svg width="1013" height="890" viewBox="0 0 1013 890" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M180.462 795.681L40.8315 567.776C19.5801 533.09 8.95466 515.747 4.64446 497.091C0.831363 480.586 0.608543 463.413 3.99145 446.712C7.81567 427.835 17.9843 409.924 38.3214 374.102L184.235 117.101C203.682 82.8483 213.405 65.722 227.028 52.9648C239.084 41.6743 253.303 32.9153 268.81 27.225C286.332 20.7958 306.003 19.8141 345.345 17.8502L644.507 2.91668C685.874 0.851143 706.557 -0.18069 725.22 4.94606C741.731 9.48141 757.023 17.479 770.074 28.4042C784.827 40.7544 795.51 58.1913 816.877 93.066L955.838 319.878C977.009 354.434 987.595 371.712 991.91 390.3C995.728 406.747 995.98 423.86 992.649 440.515C988.883 459.337 978.815 477.215 958.678 512.969L811.011 775.156C791.315 810.127 781.466 827.612 767.593 840.563C755.316 852.023 740.811 860.86 724.997 866.515C707.127 872.905 687.074 873.638 646.968 875.103L350.229 885.943L350.228 885.944C309.449 887.433 289.06 888.178 270.689 882.944C254.434 878.313 239.396 870.318 226.557 859.48C212.045 847.23 201.517 830.047 180.462 795.681Z" fill="{{branding.colors.primary}}"/>
                    <path d="M179.711 769.196L58.7659 539.848C40.3585 504.942 31.155 487.489 28.2839 469.088C25.744 452.808 26.7984 436.065 31.3778 419.97C36.5543 401.778 47.9229 384.859 70.66 351.022L233.792 108.259C255.534 75.9041 266.405 59.7266 280.801 48.0099C293.543 37.6402 308.23 29.8499 323.963 25.1169C341.74 19.7693 361.233 19.8416 400.221 19.9857L696.692 21.0815C737.687 21.2325 758.184 21.3089 776.23 27.2798C792.194 32.562 806.699 41.1538 818.774 52.4806C832.423 65.2849 841.676 82.8321 860.183 117.928L980.548 346.176C998.887 380.95 1008.06 398.337 1010.94 416.674C1013.49 432.897 1012.46 449.584 1007.94 465.636C1002.82 483.778 991.558 500.669 969.023 534.451L803.775 782.175C781.734 815.216 770.713 831.737 756.054 843.629C743.084 854.153 728.106 862.004 712.074 866.687C693.957 871.978 674.104 871.643 634.398 870.973L340.624 866.016L340.623 866.016C300.251 865.335 280.065 864.994 262.316 858.934C246.611 853.572 232.358 844.996 220.486 833.765C207.067 821.072 197.948 803.779 179.711 769.196Z" fill="{{branding.colors.primary}}"/>
                </svg>
                {%- auth0:widget -%}
            </div>
        </div>
    </div>
  </body>
</html>
```

## Explore Your Own Designs

By the end of this article, you can now design and customize signup and login experiences with Auth0 that are as beautiful and user-friendly as the rest of your application. With the power of custom templates, you can integrate your brand's color palette, unique fonts, and more. I'd love to see the unique and effective login experiences you create! Please share screenshots or links in the comments below.

Thanks for reading!

Building Beautiful Login Pages with Auth0

A new version of the Auth0 Templates for .NET package has been released: discover the new powerful features.

In May, we [announced the release of Auth0 Templates for .NET](https://auth0.com/blog/introducing-auth0-templates-for-dotnet/), a NuGet package that allows .NET developers to scaffold a new project with Auth0 embedded. Today, we are announcing the release of a new powerful version of the package: [Auth0 Templates for .NET 2.1](https://www.nuget.org/packages/Auth0.Templates). 🎉

Go to your terminal window and install the new package by running the following command:

```bash
dotnet new install Auth0.Templates
```

> ⚠️ If you already have a previous version of the package installed on your machine, please uninstall it using the following command before installing the new package:
>
> ```bash
> dotnet new uninstall Auth0.Templates
> ```
>
> 

Let's explore what's new and how you can now create **a working application with Auth0 authentication in less than a minute!**

## Auth0 CLI integration

The most prominent feature introduced in this new release is the integration with the [Auth0 CLI](https://github.com/auth0/auth0-cli), the command line tool that allows you to manage your Auth0 tenants and your application registration from your terminal window.

> 📖 If you are new to the Auth0 CLI, take a look at [the Auth0 CLI Basics Lab](https://developer.auth0.com/resources/labs/tools/auth0-cli-basics) to learn how to use it.

If you have the Auth0 CLI installed on your machine and are already logged in to your Auth0 tenant, you can have your new application automatically registered. Let's do an example to better explain.

### Self-Registration in .NET CLI

Suppose you want to create a Blazor Server application with Auth0 authentication embedded. You can start by running the following command in a terminal window:

```bash
dotnet new auth0blazorserver -o MyBlazorServerApp
```

This command uses the `auth0blazorserver` template to create a Blazor Server application in the `MyBlazorServerApp` folder.

After launching the command, you will see a message similar to the following:

```bash
The template "Auth0 Blazor Server App" was created successfully.

Processing post-creation actions...

Template is configured to run the following action:
Actual command: register-with-auth0.cmd 
Do you want to run this action [Y(yes)|N(no)]?
```

With this message, the template engine asks if you want to register the newly created application with Auth0.

Once you confirm, the new Blazor application will be registered on your current Auth0 tenant. You will see the registration data onscreen for documentation purposes only, as you don't need to configure it manually. In fact, your new application will be automatically configured. All you need to do is run your Blazor application with `dotnet run`!

As you can see, using the integration with the Auth0 CLI allows you to have **an application up and running in less than a minute!**

Of course, you can still pass the configuration options on the command line in case you don't have the Auth0 CLI installed or if you have already registered the application with Auth0. See the [specific options for each template](https://github.com/auth0/auth0-dotnet-templates#usage) for more details.

### Auth0 registration in Visual Studio

If you are using the templates with Visual Studio, you can't leverage the self-registering feature. This is not a limitation of the template, but a restriction imposed by Visual Studio (see [this issue](https://github.com/dotnet/templating/issues/4575) for context).

However, you can run the registration action manually. So, assuming you want to create your Blazor Server application with Visual Studio, select the Auth0 Blazor Server App template as shown in the following picture:

![Auth0 Blazor Server template in Visual Studio](https://images.ctfassets.net/23aumh6u8s0i/4vIKOhrrozhmSDMkYPsEUr/5bd66766af25db726fb3aca5c4d731ab/auth0-blazorserver-app-vs.png)

Then, accept the default values proposed by the template configuration window and create the project.

After the project is created, go to the newly created application and run the following command:

```bash
./register-with-auth0.cmd
```

This command will automatically register your Blazor Server application with Auth0 and configure your application.

> Note: On MacOS you must enable the script to execute. Run the following command before launching the automatic registration:
>
> ```bash
> chmod +x register-with-auth0.cmd
> ```

## .NET 8 Support

The new release of Auth0 Templates for .NET supports .NET 8 by default for most templates. When you use the `dotnet new` command without specifying a framework version, you will get a .NET project with .NET 8 as the target framework. This is also the default .NET version when you are using Visual Studio, as shown below:

![Auth0 Template for ASP.NET Core MVC targeting .NET 8](https://images.ctfassets.net/23aumh6u8s0i/1mnYGKi2t006MED0sC2raQ/902bd9cb7b94be9e4b0d4c6c14b9d3ea/auth0-mvc-app-vs-options.png)

Blazor templates do not currently support .NET 8, but they still target .NET 7. The reason for this choice depends on the new .NET 8 Blazor model, which provides a more fluid approach between the Server and the WebAssembly hosting models. Currently, there are no official guidelines on how to integrate OpenID Connect with the new Blazor model. If you are interested in this topic, you can follow [this thread in the Auth0 Community forum](https://community.auth0.com/t/net-8-0-blazor/119691) to stay updated.

<include src="ebook-ads/dotnetIdentity" />

## Minimal API Template

The [Auth0 Templates for .NET package](https://www.nuget.org/packages/Auth0.Templates/) contains four templates since its first release:

- ASP.NET Core MVC
- ASP.NET Core Web API
- Blazor Server
- Blazor WebAssembly (ASP.NET Core hosted)

This new release adds a new template for [ASP.NET Core minimal API](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis). To use this template, add the `--minimal` option to the `dotnet new auth0webapi` command, as shown in the following example:

```bash
dotnet new auth0webapi -o MyWebAPI --minimal
```

This command creates a minimal API project in the `MyWebAPI` folder, and if you have the .NET CLI installed on your machine, it also registers it with Auth0.

In Visual Studio, you can simply select the *Use minimal API* checkbox as shown in the following picture:

![Options for the Auth0 ASP.NET Core Web API template in Visual Studio](https://images.ctfassets.net/23aumh6u8s0i/30Wl7yaOdnuWBhmdbRZa3v/259aa7ca9bb215da9fba8e62bfee8d87/auth0-webapi-app-vs-options.png)

## Looking Ahead

We hope that these new features will help .NET developers set up their new applications with Auth0 more easily than before. Our goal for the next release is to include a template for the missing Blazor model and add templates for other .NET application types.

Your feedback is valuable. If you experience a problem or have a request, please [open an issue](https://github.com/auth0/auth0-dotnet-templates/issues/new/choose) on the project's GitHub repository.

Remember that [Auth0 Templates for .NET](https://github.com/auth0/auth0-dotnet-templates) is an open source project, so your contribution is welcome! If you think you can help, check out [our contribution policy](https://github.com/auth0/auth0-dotnet-templates/tree/main#contributing) and get involved.



Auth0 Templates for .NET: A New Powerful Version Released

Sam Yapkowitz

I began my career in enterprise software development and got exposure to lots of different frameworks and methodologies. I quickly realized my passion was in the architecture and design of solutions to unique problems. I now get to use these skills to help my customers build high-quality experiences using Okta. When not at work you can find me on the golf course, playing Rocket League or watching football with my friends.

Senior Solutions Engineer

Learn how to perform A/B testing on the Universal Login page using Liquid templates and custom parameters.

There is no way to natively A/B test the Universal Login as of today. But, it can be achieved with the use of the [Liquid](https://shopify.github.io/liquid/basics/introduction/) templates that power the Universal Login, custom parameters passed from the client side, and an A/B testing platform such as [Split.io](http://split.io/), [Google Optimize](https://marketingplatform.google.com/about/optimize/), or [LaunchDarkly](https://launchdarkly.com/).  A/B testing, also known as split testing, refers to a randomized experimentation process wherein two or more versions of a variable (web page, page element, etc.) are shown to different segments of website visitors at the same time to determine which version leaves the maximum impact and drives business metrics.

## What Is the Universal Login?

Auth0 Universal Login (UL) defines your login flow, which is the key feature of an authorization server. Whenever a user needs to prove their identity, your applications redirect to Universal Login, and then Auth0 will do what is needed to guarantee the user's identity.

When using Universal Login, you don't have to do any integration work to handle different methods of authentication. You can start off using a simple username and password, and then add other features, such as social login and multi-factor authentication (MFA).

Configuring Universal Login is dynamic (and does not require application-level changes) because all functionality is driven by the web pages served by the centralized Authentication Server. Your applications benefit from any improvements Auth0 makes in the login flow without the need for you to change your code.

You can create a consistent, branded login experience by customizing the login page appearance and behavior from the Auth0 Dashboard. For advanced use cases, you can even change the code of each page.

To learn more about the differences between Universal Login and embedded login, read [Centralized Universal Login vs. Embedded Login](https://auth0.com/docs/authenticate/login/universal-vs-embedded-login).

## Universal Login Liquid Templates

The UL can be modified through the use of Liquid [templates](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates).  To work with these Liquid templates, you will need to configure a [Custom Domain](https://auth0.com/docs/customize/custom-domains). These templates allow you to define the HTML, CSS, and JS that are shipped to the client when making an `authorize` request. These Liquid templates allow you to run conditional logic based on the Liquid syntax. This functionality allows you to provide a unique UX based on things such as application, organization, tenant, locale, and specific screen. There is the ability to pass specific query parameters during an `authorize` request that can be accessed inside the Liquid template syntax for even further customization options. These parameters must be prefixed with `ext-` to be honored by the UL. These can be accessed through `transaction.params.ext-{param}`. With these parameters, we can now specify different versions of the UL to render for a user. Here is a Liquid template example of conditionally branding the UL based on one of the custom query parameters. This example leverages the param `ext-alt-brand`:

```html
<!DOCTYPE html>
<html lang="{{locale}}">

  <head>
    <title>Welcome to {{ application.name }} </title>
    {%- auth0:head -%}
    <style>
      {% if transaction.params.ext-alt-brand == "portal_0" %}
      body {
        background-image: radial-gradient(blue, rgb(200, 200, 200));
      }
      #custom-prompt-logo {
        background-image: url('https://banner2.cleanpng.com/20180328/roq/kisspng-circle-logo-symbol-font-templates-5abbf957bfda53.1977074015222685037859.jpg');
      }
      {% elsif transaction.params.ext-alt-brand == "portal_1" %}
      body {
        background-image: url("https://images.unsplash.com/photo-1592450865877-e3a318ec3522?ixlib=rb-1.2.1&auto=format&fit=crop&w=2255&q=80");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      #custom-prompt-logo {
      background-image: url('https://bootstraplogos.com/wp-content/uploads/edd/2017/11/logo-51.png');
      }
      .prompt-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 480px;
        height: 100%;
        justify-content: center;
        background-color: rgb(247, 198, 233);
      }
      {% else %}
      body {
        background: linear-gradient(-45deg, #ff44dd, #3885ff, #3ec6eb, #1bc99f);
        background-size: 100% 100%;
      }
      #custom-prompt-logo {
        background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png');
      }
      {% endif %}
      {% if organization != null && organization != undefined %}
        #custom-prompt-logo {
            background-image: url({{ organization.metadata.logo_url }});
        }
        body {
            background: linear-gradient({{ organization.metadata.linear_gradient }})
        }
      {% endif %}

  </style>
  </head>
  <body class="_widget-auto-layout _use-custom-prompt-logo">
      <div class="prompt-wrapper">
        {%- auth0:widget -%}
      </div>
  </body>
</html>
```

When the value of the param `ext-alt-brand` is `portal_0`, the following version of the login page (say, version A) will be shown:

![Universal Login test page version A](https://images.ctfassets.net/23aumh6u8s0i/HaEPIJiEdF8m9l9XI96i2/a2b427c463052ef25e8e1395d83497ab/universal-login-test-a.png)

When the value of the param `ext-alt-brand` is `portal_1`, version B of the login page is shown:

![Universal Login test page version B](https://images.ctfassets.net/23aumh6u8s0i/5hWtq9COZWNfSAXgvzwB4r/ad29b45a10bd7d3f3843f87c8c93eeba/universal-login-test-b.png)

> Note: You can see the domain and application are the same, yet we have a unique UX for an A/B test.

## Client-Side Implementation

There are many ways to accomplish an A/B test with the Universal Login now that we understand how to render separate versions of the UX. A traditional A/B test will have equal weights between all of the options, and upon a user entering one of these flows, the first step would be to check the browser for a cookie indicating whether a particular user has entered into the experiment already.

If the user is new, they will be assigned one of the pathways for the experiment and then be delivered the content for the item. If a user has previously entered the experiment, we can examine their cookie to determine which pathway they belong to and continue delivering them that same content to provide a consistent UX for the lifetime of the experiment.

This can be implemented manually, but many providers offer this service OOTB, such as Split and LaunchDarkly, to help you make this piece more flexible as you run more experiments or implement feature flagging from a deployment perspective. For this writeup, I have built out examples leveraging both Split and Google Optimize.

To put the final piece in place, my application is built with Next.JS and deployed on Vercel to take advantage of their [Edge Middleware](https://vercel.com/docs/concepts/functions/edge-middleware) capability. This piece is purely preference, and is very dependent on your current implementation of CIC. The Edge Middleware functionality on Vercel allows you to intercept requests on the edge and rewrite URLs extremely quickly. This allows you to decouple the A/B test from your client-side authentication logic. For instance, any place in my application can continue to leverage the same login route without needing more logic to be added. The Edge Middleware then interfaces with my A/B provider to read/write cookies as well as modify the login route to supply the proper parameter during the `authorize` request. You can view the source code for the [Google Optimize](https://github.com/samyap4/auth0-ab-testing-optimize) example and the [Split](https://github.com/samyap4/auth0-ab-testing-split) example on my GitHub.

## Live Examples

Here are snippets of the live examples in action on [Split](https://auth0-ab-testing-split.vercel.app/). The cookie being set here is called `flag-universal_login`. This is version A in action:

<AmpContent>
<amp-youtube
    data-videoid="dnjnnIVDp-Q"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div
  class='embed-container'
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;">
    <iframe
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      src='https://www.youtube.com/embed/dnjnnIVDp-Q'
      frameborder='0' allowfullscreen>
    </iframe>
</div>
</NonAmpContent>

Here is version B in action:

<AmpContent>
<amp-youtube
    data-videoid="zgj5SpiRuVo"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div
  class='embed-container'
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;">
    <iframe
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      src='https://www.youtube.com/embed/zgj5SpiRuVo'
      frameborder='0' allowfullscreen>
    </iframe>
</div>
</NonAmpContent>

You can see the application is the same, and I can generate a different UX based on the cookie being set by my [Split.io](http://split.io/) configuration.

## Implementing Analytics

Now that we have demonstrated how to deliver different experiences to different users, the final step of the A/B testing journey will be to start gathering metrics about how users are interacting with your content. We already discussed that we can leverage the templates to bring in custom scripts to your Universal Login screens. You can use whatever service you like for tag management, such as [Google Tag Manager](https://marketingplatform.google.com/about/tag-manager/).

## Conclusion

At Auth0, we aim to provide a high-quality service and developer experience for our customers. The first interaction with your customers is often times a login screen, so we understand how important it is for the user experience to be top-notch. With our hosted Universal Login, we take away the burden of deploying and maintaining these highly secure workflows. With the capabilities of our templates outlined in this post, we are able to help your teams iterate more quickly and customize the experience to be sticky for your brand and ultimately help your business grow.


Universal Login A/B Testing

Create your .NET applications secured with Auth0 in less than a minute with Auth0 Templates for .NET.

<div class="alert alert-info alert-icon">
   <i class="icon-budicon-500"></i>
   <strong>A new version of Auth0 Templates for .NET is available!<br/>
Check out <a href="/blog/auth0-templates-for-dotnet-powerful-version/">Auth0 Templates for .NET: A New Powerful Version Released</a> to learn what new features it brings to you.
   </strong>
 </div>

Project templates are a handy way to scaffold an application in minutes, if not seconds. .NET developers are used to templates since Microsoft provides several built-in project templates for .NET through the [.NET SDK](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new-sdk-templates) or [Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/creating-project-and-item-templates).

Now you have .NET templates with Auth0 embedded, including the right Auth0 SDK and best practices for a given type of application! You can build your .NET projects integrated with Auth0 in seconds using the .NET CLI or the IDE you prefer: Visual Studio or Visual Studio Code.

## What Is Auth0 Templates for .NET?

[Auth0 Templates for .NET](https://github.com/auth0/auth0-dotnet-templates) is a project that provides you with a set of project templates to help you scaffold your application with Auth0 support for authentication and authorization. Currently, the project offers templates for the following application types:

- ASP.NET Core MVC
- ASP.NET Core Web API
- Blazor Server
- Blazor WebAssembly (ASP.NET Core hosted)

More templates will be added in the near future. The templates target .NET 7 and allow you to create your applications by using the typical approach you are accustomed to using the built-in templates.

## Install the Package

The Auth0 Templates for .NET project uses the [modern template approach](https://learn.microsoft.com/en-us/dotnet/core/tools/custom-templates), which guarantees high compatibility across different development environments and operating systems. This means that you can use the templates with your preferred development environment: .NET CLI, Visual Studio for Windows and Mac, or Visual Studio Code.

Even JetBrains Rider is supported, but at the time of writing, there is still an [issue with parameter support](https://youtrack.jetbrains.com/issue/RIDER-16759) that prevents the full power of the templates from being used.

To install the [Auth0 Templates for .NET NuGet package](https://www.nuget.org/packages/Auth0.Templates/), run the following command in a terminal window:

```bash
dotnet new install Auth0.Templates::2.0.1
```

Once the package is installed, use your preferred IDE to create your application.

## Create Your .NET Project

Let's see how you can use the templates to create a new .NET application. First, there are some preliminary steps to take. The templates assume that you have already registered your application with Auth0 and have all the necessary configuration settings at hand.

To integrate your application with Auth0, you need an Auth0 account. You can <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free one now</a>. Then you need to [register your application](https://auth0.com/docs/get-started/auth0-overview/create-applications) or [your API](https://auth0.com/docs/get-started/auth0-overview/set-up-apis) in the Auth0 dashboard. The registration step will return some data that you will use to set up your app through the templates. Basically, this data is a subset of the following:

- the Auth0 domain, 
- the client ID, 
- the client secret, 
- the API identifier or audience.

Once you have this data from the Auth0 dashboard, you are ready to use the Auth0 templates for building your app.

### Use the templates in .NET CLI

You can leverage the `dotnet new` command to list the available templates. For example, you can run the following command to get the list of available Auth0 templates:

```bash
dotnet new list auth0
```

As a result of this command, you should see the following list:

```bash
Template Name                 Short Name         Language  Tags                        
----------------------------  -----------------  --------  ----------------------------
Auth0 ASP.NET Core Web API    auth0webapi        [C#]      Web/WebAPI/Auth0            
Auth0 ASP.NET Core Web App    auth0webapp        [C#]      Web/MVC/Razor Pages/Auth0   
Auth0 Blazor Server App       auth0blazorserver  [C#]      Web/Blazor/Auth0            
Auth0 Blazor WebAssembly App  auth0blazorwasm    [C#]      Web/Blazor/WebAssembly/Auth0
```

Suppose you want to learn the CLI syntax for using the Blazor Server template. You run the following command in your terminal:

```bash
dotnet new auth0blazorserver --help
```

This command will show you all the options you can provide to build an already configured Blazor Server application.

To create a new Blazor Server app through the Auth0 template, use the following command:

```bash
dotnet new auth0blazorserver \
    --domain <YOUR_AUTH0_DOMAIN> \
    --client-id <YOUR_CLIENT_ID> \
    -o MyBrandNewApp
```

> The line continuation character (`\`) shown above is just for presentation purposes. Use the appropriate character for your command line shell if you want to use it in your operating system.

Replace the placeholders `<YOUR_AUTH0_DOMAIN>` and `<YOUR_CLIENT_ID>` with the actual values you got when registering your app in the Auth0 dashboard. This command will create your Blazor Server application in the `MyBrandNewApp` folder.

After creating the app, you can run it and test authentication support in a minute!

> Read [this document to learn how to use the available Auth0 templates](https://github.com/auth0/auth0-dotnet-templates/tree/main#usage).

### Use the templates in Visual Studio

The templates installed with the above command are also available in Visual Studio. Select the Auth0 template for the app you want to create, as shown in the following picture for Visual Studio for Windows:

![Auth0 templates in Visual Studio for Windows](https://images.ctfassets.net/23aumh6u8s0i/5A53ehX7663L0HxkB65Aos/2cbbbb09f3ad4c4979e052f4f02b2ac2/auth0-blazorserver-app-vs.png)

The following picture comes from Visual Studio for Mac:

![Auth0 templates in Visual Studio for Mac](https://images.ctfassets.net/23aumh6u8s0i/7nyet9ozGX1bk4Kf4AFipb/00d4a3fbb394bde20e132526244161ce/auth0-blazorserver-app-vs-mac.png)

You will then be prompted for the registration information, as shown in the following picture (Visual Studio for Windows):

![Auth0 template options in Visual Studio for Windows](https://images.ctfassets.net/23aumh6u8s0i/3YMXIB1UY58WD2iFCeydyX/8e03f036e38cc6a6a5136328c3077947/auth0-blazorserver-app-vs-options.png)

This is the corresponding screen on Visual Studio for Mac:

![Auth0 template options in Visual Studio for Mac](https://images.ctfassets.net/23aumh6u8s0i/2rctCGwBn68ACigGj6wf2L/98b0805b10d53e76d49014f53c9123f9/auth0-blazorserver-app-vs-mac-options.png)

Next, you specify the project's name and where you want to save it, as you would with standard templates. That's it! Once the application is created, you can run it and test authentication.

> Read [this document to learn how to use the available Auth0 templates](https://github.com/auth0/auth0-dotnet-templates/tree/main#usage).

<include src="ebook-ads/dotnetIdentity" />

## Looking Forward

This is the first release of the [Auth0 Templates for .NET](https://www.nuget.org/packages/Auth0.Templates/) package, but we want to add new templates and improve the developer experience as well. Your feedback is highly appreciated, so please leave your comments below and let us know what you think about this project.

The [Auth0 Templates for .NET project](https://github.com/auth0/auth0-dotnet-templates) is open source, so your contribution is also welcome! If you think you can help with this project, check out [our contribution policy](https://github.com/auth0/auth0-dotnet-templates/tree/main#contributing) and get involved.


"templates"