This Web App


This Website

Yes, this website. You're looking at it!

Try registering for an account! It won't let you login until you confirm your email.

Login and access our members area, then upgrade your account to gain access to the Premium Members VIP area.

Change your profile's email address and username - you should be able to login with your old email until you confirm your new email.

Reset your password.

Go on, go on, go on, go on! Do it!


This Website

API: C# ASP.NET 7 Frontend: NextJS (basically React), Admin GUI: ASP RazorPages

To improve on my "Auth project" (where I wrote my own user authentication API) I wanted to use an industry standard framework for my next app.

Identity Core is an authentication that comes with ASP. It's getting a little older now, but it is free and you can host your own authentication so there's no recurring fees.

Unfortunately, Identity Core also scaffolds out the RazorPages for login, registration and password resets. I didn't like that. Identity Core wants to be more of a standalone MVC app you send your users to for login and then it re-directs them back to your website.

I wanted the login form to be in the NextJS frontend app, so it matches the website's look and feel. I didn't want to redirect users from my frontend website to my backend API to view a RazorPage for login.

So I used Identity Core's API modules and turned it all into API end points! It took a long time.

Not that many people have done this, I'm one of a select few.


Front End

NextJS 13 was chosen as the frontend framework because I wanted the app to perform well in SEO.

React / Angular are good SPAs (Single Page Apps) but Google sees them as almost a blank page, as they are a single javascript page that dynamically changes.

NextJS gives you the option of easily generating static HTML pages from react-style code. So google can see all the content!

It also loads really fast and can also be run in a React-style client SPA mode should you need it.

Next-Auth is the most popular authentication framework for NextJS. I use it to handle the communication with the backend API to log users in and out.

I got really deep into this framework, following their guidelines on how to code the refresh/access token flow.

The Blog on this website is quite nice, I followed an online tutorial to build it and then customised it.


Back End

I stuck with ASP.NET as I have been using it for so long. This app started in dotnet 6 and was upgraded to dotnet 7.

Identity Framework Core handles all the user authentication. My previous "roll my own auth" project really helped me understand what I was doing and why.

API versioning was also mplemented and enabled in Swagger.

I started to use the SOLID design principals a lot more in this project as I was becoming more experienced. I also dabbled with the Factory Design Pattern.

A JWT refresh and access token system was coded from scratch. I wanted users to be able to stay logged in for a week, so they didn't have to constantly login every time they closed the browser.


What I learned

API Versioning

Access and Refresh Tokens

Identity Core Framework

Even more about JWTs and Session cookies

Even more about user registration, login and password authentication flow

Entity Framework Core

MySQL

SOLID design principals

AppSettings and Secrets

Factory design pattern

NextJS

React

Next Auth

Logging frameworks Serilog and Winston


Repo

Github Repo for the project is here:

NextJS FrontEndRepo

ASP.NET BackendRepo