Create React or Angular Application from Visual Studio with Authentication

Having templates that provide a good starting point for a new application is an important part of the value that is provided by Microsoft. Nothing kills progress faster than having to spend a week trying to discover the recommended way to set up a project. Thankfully template is an area that Microsoft continues to invest in.

A few weeks ago in my ASP.NET Core 3: React Template with Auth post I went over creating a React application that included auth out of the box using the .NET CLI. In this post, we are going to create an Angular application with Auth from Visual Studio.

Required Installs

As of this writing .NET Core 3 Preview 4 was just released so please make sure you have the latest preview installed. Also, make sure and install the latest preview of Visual Studio. The screenshots in this post will be from the Visual Studio 2019 16.1.0 Preview 1 release. Make sure you have at least the ASP.NET and web development workload installed.

Project Creation

Open Visual Studio and from the Get started area on the left click Create a new project.

On the next screen select the ASP.NET Core Web Application project type and click Next.

On the next screen at a minimum enter a Project name and click the Create button.

On the next screen select the template you want to use. I will be selecting Angular, but the same authentication setup will work for React or React and Redux templates. After selecting your template type on the right side of the screen under Authentication click the Change link.

Select Individual User Accounts and click OK.

After the Change Authentication dialog closes click the Create button on the template selection dialog.

After a couple of minutes, the application will be ready to go. The only other step you will need to do is to apply the Entity Framework migrations. This can be done from the .NET CLI or the first time you try to register an account in debug mode you will be prompted to apply the migrations.

Wrapping Up

I’m not sure if I am alone in this or not, but I get super excited seeing the time being invested by Microsoft in making the getting started experiences better with every release. Having authentication available out of the box for a SAP backed by an API make getting started on a project super simple.

Azure B2C: User Profiles

In this post, we will be adding access to user profiles using Azure B2C. We will be building on the setup used in the ASP.NET Core with Azure B2C Auth post so make sure and check it out if something in this post isn’t clear. The following is the full list of post from what has turned in to a series on Azure B2C.

ASP.NET Core with Azure B2C Auth
Azure B2C: Customize Layouts
Azure B2C: Social Logins

User Profile Flow

The first step to enabling profile access is to add the Profile editing user flow. From the menu for your Azure B2C resource select User flows.

At the top of the list of user flows click the New user flow button. This will display a list of recommended flows to add. From the list click Profile editing.

On the Create page enter a Name for your flow, select which Identity providers can use the flow, select which User attributes to collect/display, and then create the Create button. The user attributes you select will control which fields show when the user is editing their profile. Also, notice the Show more link which will give you a full list of the user attributes available on your account.

Sample Application

Back in the sample application in the appsettings.json file enter the name of the profile editing user flow from above for the EditProfilePolicyId.

"EditProfilePolicyId": "B2C_1_Profile"

Run the application and after login, the user’s name will be a link which will take them to a page where they can edit their profile information.

The following is a sample of what the profile page looks like.

Tweaking the Layout

From the screenshot, you will notice that the order of the fields wouldn’t make a lot of sense to a user. Thankfully B2C provides a way to customize the order of files, labels, control types, etc. without doing a full custom page which is also an option if you need to match an existing application’s look and feel.

From the B2C menu, select User flows and click on your profile flow. Once in your profile flow select Page layouts and then in the details select Profile edit page.

You will see something similar to the following screenshot. As you can see it allows reordering of fields, label changes, etc.

User Attributes

If the built-in user attributes don’t cover all your needs B2C does allow you to add your own attributes. From the main menu of B2C click on User attributes and you will see a list of your current attributes as well as an Add button if you need a custom attribute.

Wrapping Up

Enabling profile access was a pretty easy process and the flexibility provided with the built-in customizations is nice. I’m betting that most people will end up using a custom layout to give users a consistent experience. If you need help getting started with a custom layout check out my Azure B2C: Customize Layouts post.

Thank You Open Source

I have a family member who has ALS which, among a lot of other things, remove the person’s ability to walk, talk and use their arms and hands. My family member is at the point that their arms and leg aren’t useable and speech is only understandable to a few.

Being the “computer person” in the family I have been helping to cobble together an assistive setup. We started with a product by Tobii which is meant for gamers but also works pretty well as a general eye-tracking device and paired that Windows 10’s eye control functionality on an entry-level Microsoft Surface Pro 6. This setup has helped to restore a level of interaction with the world that ALS had taken away and at a fraction of the cost of the medical grade solutions that are available.

One of the big items on our hit list was the ability to control an Amazon Fire TV Stick. For our first try, we used BlueStacks which is an Andriod emulator for Windows which allowed control of the Fire TV via a third party remote application (the remote application provided by Amazon is unusable as it requires swiping to get most actions done which don’t work well with eye tracking).

The above set up seemed like it was going to work well, but it turns out that the entry-level Surface Pro doesn’t have enough power to deal with BlueStacks without causing stability issues. After a lot of searching, I couldn’t find an alternative, so being a software developer I decided I would order my own Fire Stick and find a way to program one myself. Thanks to Amazone Prime I had my Fire Stick the same day.

I struck out hard on my Google-fu trying to find a way to control the device from Windows. This is where open source comes to my rescue. I found btastic’s repo windows-adb-remote on GitHub. Seems that btasctic forgot his remote when he was at his girlfriend’s house and whipped up a console application that uses adb to control his Fire Stick.

I was very excited at this point. Yes, adb made the interactions slow, but since the application was going to be used via eye control it was more than fast enough. Now I just needed a UI. I started working on a WPF front end, but before I got too far I decided noticed that a few people had forked btastic’s repo. Turns out that amolkamble46 had already added a UI in this repo!

I forked amolkamble46’s repo and added a bit of code to save the IP for the Fire Stick and I had all I needed. A couple of hours later the solution was installed and I got to the see the joy in the eyes of my family member all thanks to open source. Without the repos I found this process would have taken me so much longer.

I have always been thankful to the people who spend time working on open source software, but this has raised that appreciation to a whole new level. It also goes to show no matter your project or how useful you think it might be to other people you should put it out into the world because you never know when it will make a massive difference in someone’s life.

Azure B2C: Social Logins

This post is going to cover enabling a social login for a site using Azure B2C for authentication. If you are new to this set of posts you can find the initial setup of the sample application in the  ASP.NET Core with Azure B2C Auth post. I would also recommend checking out the Azure B2C: Customize Layouts to learn how to change the provided UI to provide your users with a consistent look and feel that matches the rest of your application.

Social Login Provider Setup

Azure B2C supports most of the login provides you would expect such as Google, Facebook, Twitter, Microsoft, etc. as well as any provider that supports OpendID Connect. No matter which option you pick you will have to register/signup your application with the provider. Unfortunately, Azure B2C doesn’t provide links to the registration pages of the services it supports so it is up to you to find those yourself.

For this example, I’m going to be walking through the process using Google. You can get all the details of Google’s OpenID Connect offering in their docs. To get started we need to set up our application in the developer console. The link will take you to the dashboard where you will see a message about selecting or creating a new project. Click the Create link. In the next page enter the Project name and click Create.

After the creation process finishes click Credentials from the navigation menu on the left.

On the top of the screen select OAuth consent screen. On this page, you will need to at least enter an Application name and an Authorized domain of b2clogin.com (not shown in the screenshot, but still required) and click the Save button at the bottom of the page.

Next, select the Credentials tab and click the Create credentials button and select the OAuth client ID option.

On the next page, select Web application as the application type. Enter a Name. For the next two fields, you will need your tenant ID from Azure B2C. In the screenshot, you can see my where I did this with my tenant ID of testingorg3. Also, make sure and enter the URLs in all lower case, I had redirect issues using mixed casing. For Authorized JavaScript origins use the URL https://yourtenantid.b2clogin.com and for Authorized redirect URIs use https://yourtenantid.b2clogin.com/testingorg3.onmicrosoft.com/oauth2/authresp

After clicking create you will see a dialog with your client ID and client secret make note of these as they will be needed when we add the login provider in Azure B2C.

Azure B2C Changes

Now that we have the Google side setup head over to Azure and find your Azure B2C resource. Select Identity provides from the navigation menu and click the Add button.

Enter a Name, I’m just using the name of the provider. Then, click on Identity provider type which will trigger the Select social identity provider selection to show. Click Google and then click OK.

Next, click Setup this identity provider which will show a fly out where you will need to enter your Client ID and Client secret provided by Google. After entering your values click OK.

Next, click the Create button at the bottom of the Add identity provider screen. When this process is done we will have two identity providers for this B2C resource email and Google. Next, we need to enable our new Google provider for our sign up/sign in user flow. From the menu select User flows and then click the flow you have set up for Sign up and sign in.

Next, select Identity providers, this will show a list of providers available for the selected flow. Check any additional providers the flow should use, Google, in our case. Finally, click Save.

Try it out

With all the above change attempt a login with your application and you will see Google as a sign in option.

Wrapping Up

Hopefully the above will give you a jump start on adding support for social logins to your applications. Adding other providers will really close to what we did for Google from the Azure B2C prospective, of course the sign up process will vary by provider.

Azure B2C: Customize Layouts

In the post ASP.NET Core with Azure B2C Auth we did a walkthrough of setting up the basics of Azure B2C and creating a new application that used our new B2C setup for auth. This post is going to be using that same setup to show how to replace the Microsoft provided pages for sign up/sign in with your own custom pages.

Custom Page Hosting

Our custom page needs to be hosted somewhere public with CORS enabled. If the test application was hosted somewhere public we could just us it, but since it is running on localhost that isn’t currently an option. We are going to use Azure Blob storage for hosting in this example.

Create A Storage Account

From the Azure Portal select Storage accounts.

Click the Add button.

Next, on the Create storage account page, I used a new resource group and tried storage accounts names until I found an unused one. For the rest of the fields, I took the defaults and then clicked Review + create.

On the review + create page it takes a few seconds for the account to be validated. After validation click the Create button.

After the storage deployment is complete click the Go to resource button.

Setup Blob storage

The above will land you on the Overview page for the new storage account. Select CORS from the menu.

Since this is just a test I’m allowing everything under the Blob service, for a real deploy I would recommend only allowing the values you expect requests from. After setting your values click the Save button.

Back on the storage menu on the right side of the screen select Blobs.

Click the + Container button to create a new blob storage container.

In the new container, page enter a name and select your public access level. I’m going with the most permissive access level, for a production system you will need to evaluate the appropriate access level for your use case. Click OK when done.

When done you will be returned to your list of containers. Click on the container that was just created to view the details.

Create a custom page

Now that we have our blob storage we need to create the HTML page that we want to to use instead of the default. The following is the code for the page I’m going to use. It is going to be super ugly as I’m not going to use any styling.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Page!</title>
  </head>
  <body>
    <h1>Custom Page!</h1>
    <div id="api"></div> 
  </body>
</html>

You can make this page look however you want, but it will always need the div with the ID of API as this is where Azure will inject the elements that actually handle the signup/sign in. Save your page.

Upload custom page to blob storage

Back in Azure click the Upload button and then select your file and click the Upload button.

After upload, you will be returned to the list of items in your current container. Click the item you just created. In the details copy the URL as we are going to need it to give B2C the location of our custom page.

B2C use custom page

In your portal head back to your Azure AD B2C page and select User flows.

Select the flow you want to use the custom page for. In our case, we are going to be using the flow for Sign up and sign in.

In the Customize section select Page layouts.

In the bottom of the page select Yes for  Use custom page content and past the link to your blob from above into the Custome page URI field and click Save.

Try it out

With all of the above setup you can now go back to the application using B2C and hit your sign in link and you will see your custom page. Here is what the one in the sample looks like.

Obviously, this example is really ugly and isn’t something you would do to your users, but it gives you the basic idea of how to use a custom page.

Wrapping Up

Hopefully the above will help you get started with customizing you B2C related pages to give your users a more consistent look and feel. The above only uploaded an HTML page to blob storage, but you could also upload a CSS file or any other assets you need. Also, don’t forget if your site is publicly accessible the assets can be stored with the rest of your application in that is appropriate, just remember to configure CORS to allow requests from Azure.

If you want more information on this topic check out the official docs from Microsoft on the subject.

Back at it

Hopefully, you all haven’t noticed, but over the last few weeks, I have been out of my normal routine due to some medical issues with multiple family members. Don’t worry everyone is now fine, or well on the way to fine. While my wife doesn’t actually read this blog I still want to call her out for being amazing. She is one of the family members who had an issue and I took some time off to take care of our son while she was recovering and her job is so much harder than what I do every day.

Back to blog related items. The reason you all haven’t noticed that I haven’t been around is that I keep about 4 posts ahead. This is a rule I set for myself years ago. If you are running a blog where you are trying to post on a schedule I highly recommend that you get ahead of your schedule. Getting ahead of my schedule is the only way that I have kept my stress level low enough to continue the blog at all. Since I have been out for a while my number of posts ready to go has gotten way too low and I have been struggling to get back into my normal routine.

I know this post isn’t going to be interesting to most people, but this is going to be a small win that gets things flowing again. Thank you for sticking with me and stay tuned the normal post will return next week.

ASP.NET Core with Azure B2C Auth

I ran into a previous co-work a while back and they were talking about using Azure’s B2C for authentication on their apps. It sounded like a good solution. This blog post is going to cover getting the Azure B2C setup and will cover creating a sample application that will use B2C for authorization.

Create Azure Active Directory B2C

This all assumes you already have an Azure account. If you don’t you can sign up for a free trial (not an affiliate link). After you are signed up head to the Azure Portal.

Note: you can skip this section if you want to use the default Active Directory that is on your Azure account.

In the upper left click the Create a resource link.

In the search box look for Azure Active Directory B2C.

After selecting Azure Active Directory B2C more information will load to the right in a new panel. Click the Create button to continue.

Next, select if you want to create a new B2C tenant or use an existing one. I don’t have an existing one so the following flow will be for creating a new tenant.

On the next panel, you will need to enter an organization name and initial domain name. After entering valid values click the create button.

Switch Active Directory

Now that the new directory has been created we need to switch to the new directory in the Azure Portal. In the left panel click Azure Active Directory.

Click the Switch directory link.

A new panel will show on the right side of the screen with a list of directories you have available. Select the one you created in the steps above or an existing one you would like to use.

Using the search box in the top middle of the portal find Azure AD B2C.

Sample Application

Before moving forward on the Azure side we are going to create our sample client application. This little detour will make it easier for me to point out what values in Azure need to go where in the application configuration.

To create a new web application already set up to use Azure B2C use the following .NET CLI command from a command prompt. There is also a Visual Studio template if you prefer that route.

dotnet new webapp --auth IndividualB2C

In the resulting application, your appsettings.json will have the following section for AzureAdB2C.

"AzureAdB2C": {
  "Instance": "https://login.microsoftonline.com/tfp/",
  "ClientId": "11111111-1111-1111-11111111111111111",
  "CallbackPath": "/signin-oidc",
  "Domain": "qualified.domain.name",
  "SignUpSignInPolicyId": "",
  "ResetPasswordPolicyId": "",
  "EditProfilePolicyId": ""
}

Azure AD B2C Setup

Back to the Azure portal and the Azure AD B2C service page. In the Overview page, the first thing we need to make note of and use to set some configuration values in our application for is the Domain name.

In your appsettings.json file use this value for your Domain value.

"Domain": "TestingOrg3.onmicrosoft.com"

The subdomain is also used to build the Instance like the following.

"Instance": "https://TestingOrg3.b2clogin.com/tfp/"

On the panel that loads hit the Add button. On the new Application panel, we need to give the application a Name, select the type of clients which is Web App / Web API in our case. Next, is the Reply URL which with default setup is your base url/sigin-oidc. I messed this value up in the beginning and got some really strange errors. Finally hit the Create button.

After the creation process is complete copy the value in the Application ID field and use it as ClientId in your appsettings.json file.

Back in Azure select the User flows (policies) option.

At the top of the panel that loads click the New user flow button. The next panel shows a selection of flows that can be added. The application we are making will use both the Sign up and sign in flow and the Password rest flow. I’m only going to walk through the first one, but the second one is very smiliar. Click on the Sign up and sign in like.

In the creation process you will need to set a Name for the flow and select the Identity providers that are valid for the flow. You also have the choice of fields to collect with this flow and which ones should be returned with the claim. After those options are set click the Create button.

The Name form this screen will need to be entered in your appsettings.json file for the SignUpSignInPolicyId value. Here is what I ended up with in my settings file with the Sign Up and Reset Password policies.

"SignUpSignInPolicyId": "B2C_1_SignInOut",
"ResetPasswordPolicyId": "B2C_1_PasswordReset"

Run the sample

At this point, you can run your sample application and click the Sign in link and you will see a page similar to the following which is coming from Azure B2C.

There are ways to customize the pages users will see under the associated flow in Azure.

Wrapping Up

I hit quite a few issues getting Azure B2C setup. I hope this post will help you all bypass some of the issues I hit.

ASP.NET Core: Identity Scaffolding

I’m sure we have all started a new web project and then needed to add authentication at a later point. This post is going to cover this process use the Identity Scaffolding feature available in Visual Studio.

Sample

For this example, I’m starting with a new web app created using the following command.

dotnet new webapp

If you have any of the .NET Core 3 previews installed I recommend adding a global.json file in the directory where the application is to be created before running the application creation. I had some issues with the scaffolding in the current preview. The following is the contents of my global.json for an example.

{
  "sdk": {
    "version": "2.2.104"
  }
}

Scaffolding

In Visual Studio right-click on the project and select Add > New Scaffolded Item.

On the Add Scaffold dialog in the left list select Identity in the middle area we want the Identity item and then click the Add button.

Next, on the Add Identity dialog, you get a chance to pick which parts of the provided identity you want to override. I’m going to take the default for all the values. The one exception is the Data context class which I’m using the plus button to the right of the field to add a new one since this project doesn’t currently have any data access in it. When done click the Add button.

After a minute or so identity generation will be complete and a text file will so with some follow up steps. Because of the project type, we started with the only one we need to do anything with is the entity framework migrations. The following are the instructions from the file that will get your database to create/updated with the new data needed to support ASP.NET Core’s Identity.

The generated database code requires Entity Framework Core Migrations. Run the following commands:
1. dotnet ef migrations add CreateIdentitySchema
2. dotnet ef database update
Or from the Visual Studio Package Manager Console:
1. Add-Migration CreateIdentitySchema
2. Update-Database

Finally, in the Pages/Shared directory open the _Layout.cshtml file and add the following to where you want to show the Register and Login links. I added this right after the existing navigation links.

<partial name="_LoginPartial"/>

Wrapping Up

This is a very handle bit of functionality that makes it easy to add Identity for an existing project. You will still be missing some of the nice things provided by creating a project with Identity from the start such as displaying a welcome message with the user’s name, but those bits can be added if it is something you want.

The official docs on this topic cover way more scenarios that this post.

Trying Out BenchmarkDotNet

In software, there are tons of different ways to accomplish the same thing and one of the metrics we tend to use to determine a course of action is how we feel that one set of code will perform over another.  The thing is determining which code actually performs better is a bit tricky and I feel like in general people make the choice based on a gut feeling more than actual evidence. Even when evidence a developer has involved if it wasn’t properly collected then it isn’t actually helpful. For example, trying to determine the performance of a set of code when running in debug mode isn’t actually a good indicator of how it is going to perform.

What is a developer to do? Well, this is where BenchmarkDotNet comes in. Here is how the project describes itself.

Benchmarking is really hard (especially microbenchmarking), you can easily make a mistake during performance measurements. BenchmarkDotNet will protect you from the common pitfalls (even for experienced developers) because it does all the dirty work for you: it generates an isolated project per each benchmark method, does several launches of this project, run multiple iterations of the method (include warm-up), and so on. Usually, you even shouldn’t care about a number of iterations because BenchmarkDotNet chooses it automatically to achieve the requested level of precision.

This rest of this post is going to cover creating a sample project using BenchmarkDotNet.

Sample Project

We will be using a new .NET Core console application which can be created using the following .NET CLI command.

dotnet new console

Next, run the following command to add the BenchmarkDotNet NuGet package.

dotnet add package BenchmarkDotNet

Now in the Main function of the Program class, we need to tell the application to run the benchmark we are interested in. In this example, we are telling it to run the benchmarks in the Strings class.

public static void Main(string[] args)
{
    BenchmarkRunner.Run<Strings>();
}

Now in the Strings class, we have two functions marked with the Benchmark attribute which is how the package identifies which functions to measure. For this example, we will be measuring the performance of two different ways to do case insensitive string comparisons.

public class Strings
{
    private readonly Dictionary<string, string> _stringsToTest = 
         new Dictionary<string, string>
         {
             { "Test", "test" },
             { "7", "7" },
             { "A long string", "Does not match" },
             { "Testing", "Testing" },
             { "8", "2" }
         };


    [Benchmark]
    public bool EqualsOperator()
    {
        var result = false;

        foreach (var (key, value) in _stringsToTest)
        {
           result = key.ToLower() == value.ToLower();
        }

        return result;
    }

    [Benchmark]
    public bool EqualsFunction()
    {
        var result = false;

        foreach (var (key, value) in _stringsToTest)
        {
            result = string.Equals(key, value,
                                   StringComparison.OrdinalIgnoreCase);
        }

        return result;
    }
}

I’m sure there is a better way to set up data for test runs, but the above works for my first go at it.

Results

Run the application in release mode and you will see output similar to the following.

Wrapping Up

Having a tool that takes all the guesswork out of how operations perform is going to be very valuable. This is one of those tools I really wish I had found years ago. The project is open source and can be found on GitHub.

ASP.NET Core 3: React Template with Auth

Preview 3 of ASP.NET Core was released on March 6th. This release added the option to include auth when creating an Angular or React application using the templates provided by Microsoft. I can’t convey how happy this feature makes me. As someone that hasn’t done a super deep dive on auth having a good starting point for a new application is very helpful.

Installation

To get the updated version of the templates install the latest version of the .NET Core 3 previews. You can find the installers here.

Project Creation

Using the .NET CLI from a command prompt in the directory you want the project created in run the following command.

dotnet new react --auth Individual

After the project is built you should be able to use the following command to run the application.

dotnet run

Issues with Preview 3

I did the above and it results in the following error.

Microsoft.AspNetCore.SpaServices: Information:

Failed to compile.

info: Microsoft.AspNetCore.SpaServices[0]
./src/components/api-authorization/ApiAuthorizationConstants.js
It seems that there are a few issues with the React template that shipped with Preview 3.  To fix the above error open the ApiAuthorizationConstants.js file found in the ClientApp/src/components/api-authorization directory and make the following change.
Before:
ApiAuthorizationPrefix = prefix,

After:
ApiAuthorizationPrefix: prefix,

After that fix, you will see the following error.

./src/components/api-authorization/ApiAuthorizationRoutes.js
Module not found: Can’t resolve ‘./components/api-authorization/Login’ in ‘\ClientApp\src\components\api-authorization’

This fix is a bit more involved. I found the workaround in the known issues page provided by Microsoft.

First, delete the ApiAuthorizationRoutes.js file which is in the same directory as the previous fix. Then replace the contents of App.js found in the ClientApp/src directory with the following.

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Login } from './components/api-authorization/Login'
import { Logout } from './components/api-authorization/Logout'
import AuthorizeRoute from './components/api-authorization/AuthorizeRoute';
import { ApplicationPaths, LoginActions, LogoutActions } from './components/api-authorization/ApiAuthorizationConstants';

export default class App extends Component {
  static displayName = App.name;

  render () {
    return (
      <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/counter' component={Counter} />
        <AuthorizeRoute path='/fetch-data' component={FetchData} />
        <Route path={ApplicationPaths.Login} render={() => loginAction(LoginActions.Login)} />
        <Route path={ApplicationPaths.LoginFailed} render={() => loginAction(LoginActions.LoginFailed)} />
        <Route path={ApplicationPaths.LoginCallback} render={() => loginAction(LoginActions.LoginCallback)} />
        <Route path={ApplicationPaths.Profile} render={() => loginAction(LoginActions.Profile)} />
        <Route path={ApplicationPaths.Register} render={() => loginAction(LoginActions.Register)} />
        <Route path={ApplicationPaths.LogOut} render={() => logoutAction(LogoutActions.Logout)} />
        <Route path={ApplicationPaths.LogOutCallback} render={() => logoutAction(LogoutActions.LogoutCallback)} />
        <Route path={ApplicationPaths.LoggedOut} render={() => logoutAction(LogoutActions.LoggedOut)} />
      </Layout>
    );
  }
}

function loginAction(name){
    return (<Login action={name}></Login>);
}

function logoutAction(name) {
    return (<Logout action={name}></Logout>);
}

With the above fixes, the site will load and you should see something like the following.

When you try to register you will get the following error.

MissingMethodException: Method not found: ‘Microsoft.EntityFrameworkCore.Metadata.Builders.IndexBuilder Microsoft.EntityFrameworkCore.Metadata.Builders.EntityTypeBuilder`1.HasIndex(System.Linq.Expressions.Expression`1<System.Func`2<!0,System.Object>>)’.

IdentityServer4.EntityFramework.Extensions.ModelBuilderExtensions+<>c__DisplayClass2_0.<ConfigurePersistedGrantContext>b__0(EntityTypeBuilder<PersistedGrant> grant)

Again the known issue page to the rescue. Open your csproj file and replace the following package references.

Before:
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.0.0-preview3-19153-02" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.0.0-preview3.19153.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.0.0-preview3.19153.1" />

After:
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.0.0-preview-18579-0056" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.0.0-preview.19080.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.0.0-preview.19080.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="3.0.0-preview.19080.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.0.0-preview.19080.1" />

And add the following bit of XML.

<PropertyGroup>
  <NoWarn>$(NoWarn);NU1605</NoWarn>
</PropertyGroup>

Wrapping Up

After the above tweaks, everything just worked. I’m sure by preview 4 the experience will be even better. Even with the issues I hit getting a basic new project going I am very excited. Thank you, ASP.NET team, at Microsoft adding auth to these templates is going to be super helpful. Also, note that Angular template also got an auth option (and it seems to be a smoother experience at the moment).