This is a template web application using React and Typescript on the front-end, and ASP.NET on the back-end with authentication enabled.
This is based on the template provided by .NET, but with Typescript and authentication added. There are some original Javascript remnants from the original template that configure proxies.
You need to configure Azure AD to make this application work.
- Create a (free) Microsoft Azure account, from https://azure.microsoft.com/en-us/free/active-directory.
- Go to https://entra.microsoft.com/
- Click on "Applications" / "App Registrations"
- Create a new application registration.
- "Accounts in any organizational directory"
- Click "Register"
- Copy the "Application (client) ID" into your user secrets as "ClientId".
- Create a new "web" redirect URI to "https://localhost:3000/signin-oidc"
- Set the front-channel logout URL to "http://localhost:44321/signout-oidc"
- Create a new client secret. Make sure you copy it out of Azure into a safe place immediately. It can only be copied once out of Azure. After that, you need to generate a new one.
Add the client secret to your user secrets under "ClientSecret". You can do this by right-clicking on the "webapi" project, selecting "Manage User Secrets" and adding it to the JSON, or with the following command from the webapi directory::
C:\stuff\source\repos\aspnet_react\webapi> dotnet user-secrets set ClientApi "s3cr3t"
If you get error AADSTS50020 with a misleading error message, it means that you created the application registration with a "personal" Microsoft account rather than from an Azure developer account. You don't need to pay, but you do need to log in to https://entra.microsoft.com/ using a developer account.
I'm not sure how you "should" run it, but I've been opening two console windows.
The first console does npm start in the React project.
The second console does dotnet run in the ASP.NET project.
Then you can connect your browser to https://localhost:3000/.
Never use Javascript as a programming language. It's not worth the headache. Typescript is a significant improvement over Javascript, although it's still not as good as C#. For this reason, the original front-end written in Javascript has been replaced with a Typescript version.
I haven't added generated Typescript source from the OpenAPI schema, but you should set that up for a "real" project.
If you create more back-end APIs, you need to add them to reactapp/src/setupProxy.js.
When running in a production environment, the proxy is not used. Instead, you will need to configure a reverse HTTP proxy that will forward all back-end requests to the back-end and all other requests to the React application.
You also need to ensure that the client secrets are made available to the application using the usual means.