User Login Client

The User Login Client application is a self contained client side VueJS application that is using plain HTML files with hard linked libraries - no npm, no build, just load and run... dependencies are updated only as needed.

The application lives in a just a few actually active files:

• index.html
  handles login and email validation initiation prompt for both new account creation and password recovery
• validate.html handles email validation after the initial email was sent for both account creation and password recovery
• app.cs
• scripts/app.js
• scripts/http.js

Application Dependencies Used

• BootStrap 5 - UI
• FontAwesome 6 - Fonts
• VueJs 3 - App Framework/Binding
• Axiom - Http client
• Toastr - Toast Messages

All of these dependencies live in the ./libs folder which can be copied verbatim

Additional Requirements

• SMTP EMail Server

In order to create and validate accounts and recover passwords, email address verification is used. An email is sent to the user signing up or recovering a password that contains a verification key that has to be provided in the new password generation process.

The email server is required as part of the REST API Service which manages and configures the SMTP Mail settings (using MailGun in our case).

Running the Server Locally: Local Web Server

The application is fully self-contained so it doesn't need NPM to run or 'build'. You just need a Web server.

Here are two options I recommend:

• LiveReloadServer A .NET based local Web Server that you can install and easily run out of any folder. Can be installed as a cross-platform .NET Tool (requires the .NET SDK via dotnet tool install LiveReloadServer -g) or download and install as an installable Exe. To run then use LiveReloadServer ./ --port 5173 (to match the original Vite port, but you can use whatever port you want)

• Use Vite and Npm The project is set up with Npm packages to run Vite. To do this run npm install in this folder and then npm run dev to start the server.

Both servers have live reload that auto-refresh whenever a change is made to any resources.

Features of the User Login Client app

The idea behind the User Login Client is to avoid the large Blazor data hit on first access, and to minimize bot traffic into the blazor app for bots and users that have no intention of actually accessing the blazor app.

The client app is a very small two-page, fully self-contained HTML applet that only handles:

• Login - on success redirects into the Blazor app
• Initial Account Creation
• Account Validation via Email Confirmation
• Password Recovery via Email Confirmation

How the User Client Login Workflow

The client application is responsible to login in the user and create a new Auth_UserToken record that holds the User token and User Id on the server. It does this by calling the authuser/authenticate API endpoint which if validate creates the User token record in the database to effectively log the client in.

This process only creates the token on the server and in the User login client, but not in the Blazor application, so a second step is needed to complete the login scenario.

Once the login is successful, the User login client, redirects to the Blazor application and essentially performance a token login by going to:

https://site.com/login?t=token&returnurl=/AccountList

This logs in and if successful redirects to the url provided:

• t - the login client generated token
• returnurl - the url to jump to after successful login (/accountlist by default)

The Blazor validation validates the token with a server request for token validation authuser/authenticatewithtoken/{token} endpoint, and on success sets the RmApp.Config structure with token and userid from the token data.

returnurl specifies the page that the Blazor app redirects to - if not specified it goes to /accountlist.