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
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).
ASP.NET Core 3: React Template with Auth Read More »