3

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 ?

Nan Yu
  • 21,285
  • 5
  • 39
  • 110
M Emara
  • 49
  • 5

2 Answers2

4

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 .

Nan Yu
  • 21,285
  • 5
  • 39
  • 110
1

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.

folder structure

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.

Brian S
  • 5,257
  • 1
  • 18
  • 22
  • appreciate your comment, it's really hard to find it, more that a week searching with no luck, i did asked a question on github about it but no reply yet https://github.com/IdentityModel/oidc-client-js/issues/1033 there no documentation about it do you suggest rework it with other technology like Razor ? – M Emara Jan 13 '20 at 18:41
  • to apply above suggestion you may this will help https://docs.microsoft.com/en-us/aspnet/core/security/authentication/accconfirm?view=aspnetcore-2.1&tabs=visual-studio – M Emara Jan 13 '20 at 21:23
  • I think the short answer is that there aren't any React pages for you to modify when you do this. I believe it generates an AuthorizeService.js file under src > components > api-authorization. My solution was to create my own auth views & routes, then use that service to do the auth work. A bit of a hack, but it solves the problem until they make this more configurable. That would be my recommendation, so all your client code is in the same technology. – Brian S Jan 14 '20 at 00:14