The subject of this post is how to start developing.NET Core/.NET6 Plus ReactJs SPA applications. UI templates from Bootstrap 5 have been imported. Microsoft Identity is utilized for authentication. Additionally, Google Sign In is implemented.
Starting any new project typically takes a long time. It takes more time and effort to get going if you are new to the technology. I used the most up-to-date technology stack to develop this project. You can launch your own project using this starter project.
Have a look at how this application looks,
Prerequisites:
- Visual Studio Code Or Visual Studio
- .NET 6 SDK and Runtime
- Node.js 16.17
- PostgreSQL
Configurations Requirements:
- The PostgreSQL connection string needs to be set in appsettings.json
- SMTP settings need to be added in appsettings.json. You can find my blog to setup app passwords in the Gmail account here.
This project was created using the below option in visual studio,
Microsoft Identity framework is used for identity management in this app. You can manage users’ identities in your application using this library.
Bootstrap 5 templates integrated with ReactJS for UI purposes.
Default user ‘Dattatray Rawool’ will get added when you run the app. This is implemented in the Data/seedData.cs. You will get login details from this file.
Google Sign In/Sign Up:
Google Sign-In code is written in ReactJS. It will call backend APIs for storing users’ details and login details.
Follow the below steps to setup google sign-in/sign-up
- First, generate the client id and secret using google console. You can find the details here.
- Then set REACT_APP_PROVIDER_ID=YourGoogleClientID in your .ENV file inside the ClientApp folder.