modify sign/login UI for oidc-client with .net core react template

Question

using vscode or VS2019 with .net core 3.1, i have created new project with Authentication individuals

using this command dotnet new react --auth Individual need to change Login screen UI i can't find any UI for Login component UI

is there any way i could change or modiy login, register or user profile UI ?

Answer 1

The template uses ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect. So that you need to Scaffold Identity in ASP.NET Core projects to modify the UI like login , register user ...

Please try to follow below steps :

1. Create project using template : dotnet new react --auth Individual and build the project .

2. If you have not previously installed the ASP.NET Core scaffolder, install it in terminal in vs code :

   dotnet tool install -g dotnet-aspnet-codegenerator

3. Add required NuGet package references to the project :

   dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

   dotnet add package Microsoft.EntityFrameworkCore.SqlServer

4. You can list the files that can be scaffolded with dotnet aspnet-codegenerator identity --listFiles

5. Run the Identity scaffolder with the options you want , use --files to scaffold specific files ,use the correct fully qualified name for your DB context:

   dotnet aspnet-codegenerator identity -dc ProjectName.Data.ApplicationDbContext --files "Account.Register;Account.Login"

   If you run the Identity scaffolder without specifying the --files flag or the --useDefaultUI flag, all the available Identity UI pages will be created in your project.

Now if you want to modify the login UI , you can modify relevant page in your project --> Areas-->Identity -->Pages-->Account -->Login.cshtml page .

Answer 2

We had a similar issue with Identity Server and OIDC, though I'm not sure the setup was exactly the same. For us, the generated login/auth pages were located under:

(Project) > Areas > Identity > Pages > Account

Here is a screenshot, you can also try to search the project for some of the file names.

However, despite using the React template, and doing everything in React, the auth components were MVC (or Razor or something, can't remember). So we ended up building our own client pages, setting up routing and building custom controller actions to talk to Identity server. We got it to work in the end, but it was way more trouble than it should have been, to be honest.