(C# ASP.NET Core) Building a Smarter Login: An OTP-Based System with AI and Process Frameworks

Source Code of the Project here ↓

» →Source code here on GitHub

Please visit this page for other projects - Source code here

The Brains Behind the Brawn: Google Gemini AI and Semantic Kernel

At the heart of this intelligent login system lies Google Gemini AI, facilitating an interactive agent experience. To get this up and running, you'll need to:

1. Obtain Free Gemini API Keys for Testing:

   These keys are your gateway to harnessing Google's powerful AI models. I've provided a dedicated link in the description (or below) that leads to a detailed page and video guide, walking you through the step-by-step process of acquiring these keys. Think of it as your golden ticket to the AI playground!

2. Explore the Semantic Kernel:

   This is a relatively new, yet incredibly powerful, concept that acts as an orchestration layer for AI components. It simplifies the integration of large language models (LLMs) like Gemini into your applications. While it might seem like "a new kid on the block," Semantic Kernel offers a wealth of information and streamlines complex AI interactions. It's a must-read, and you'll find the link in the description as well.

   Semantic Kernel Process Framework » Semantic Kernel Process Framework MSDN

Architecting Simplicity: The Process Framework

We meticulously structure the entire login system using a "process framework." This framework is like a blueprint, defining each step of a multi-stage operation. It's especially useful for breaking down complex interactions into manageable, logical sequences.

We built our current project upon this very framework, even though it appears straightforward. To truly grasp its elegance and power, I highly recommend diving into the process framework documentation [Semantic Kernel Process Framework MSDN]. Look for sections on "getting started" and "how to create your first process." You'll often find examples illustrating a basic three-step process, which serves as an excellent foundation for understanding.

While a learning curve certainly exists – like mastering any new skill, it might initially feel like navigating a labyrinth – I assure you, it all makes sense once you dedicate some time to it. The beauty of this approach is its ability to simplify code, particularly when dealing with "human-in-the-loop" (HITL) scenarios within ASP.NET Core applications. This aspect is crucial for our project, as it enables the system to pause and await user input, such as an OTP.

A Walkthrough: The OTP Login Experience

Let's see this in action! When you run the project, the login page prompts for your phone number.

1. Enter your Phone Number:

   I'll input an imaginary number and click "Send."

2. OTP Sent!

   The AI agent promptly responds, "An OTP has been sent. Please enter the OTP."

3. Testing the Waters (Incorrect OTP):

   For demonstration purposes, we've hardcoded the correct OTP as 1234. If I enter something like 4567, the agent immediately provides feedback: "The OTP is incorrect. Please try again."

4. Successful Login (Correct OTP):

   Entering 1234 triggers a successful verification. The system then creates an identity cookie, much like a digital passport, and seamlessly redirects you to the personalized welcome page. It's a smooth, conversational journey from start to finish!

Diving into the Code: An ASP.NET Core Blueprint

Now, let's peek under the hood at the source code. We built this project using ASP.NET Core, a powerful and versatile framework.

Key Code Highlights:

• Program.cs: This file is the entry point, where we configure our services. Here, you'll find the integration points for Google Gemini AI's chat completion capabilities. Remember that Gemini API key you obtained? This is where it plugs in, acting as the bridge between your application and the AI.
• NuGet packages: A quick glance at the required NuGet packages reveals that many are still in their "development" or "pre-release" stages. This means you'll need to be mindful of specifying exact versions, often including pre-release tags, to ensure compatibility. It's like working with experimental ingredients – you need the right formula!
• ProcessBuilderFactory: You'll find this custom factory class in the Processes folder. In a real-world scenario with multiple processes (e.g., registration, password reset, checkout), this factory would be a central hub. It contains a static method, CreateLoginProcess, which, as its name suggests, constructs the entire login workflow, step by step.

• Login steps (LoginStep, ProxyStep): Within the CreateLoginProcess method, you'll see how we define the process. The LoginStep handles the initial user interaction. The ProxyStep is particularly interesting as it embodies the "human-in-the-loop" concept, allowing the system to hand over control for user actions like entering an OTP. The first step simply presents the initial input form to the user.
• Frontend Simplicity: One notable aspect of this project is its pure ASP.NET Core approach for the login page, relying solely on POST/GET requests without any JavaScript. This minimalist design underscores the power of server-side logic in creating interactive experiences. The login.cshtml file, which defines this page, is available on GitHub for your review.

• Agent Interaction: Each time a user posts the form, the system initiates a new "step" in the process. The GetAgentResponse method kicks off the LoginStartedProcess step, and the system displays any messages from the AI agent (like "OTP sent" or "incorrect OTP") below the text box.
• OTP verification (VerifyUserOTP): This kernel function, primarily adapted from sample code, handles the validation of the entered OTP. As mentioned, we've hardcoded the OTP 1234 here for testing.
• Redirect to Welcome: Upon successful verification, the system initiates the sign-in, creates an authentication cookie, and redirects the user to the index (welcome) homepage.

Your Journey to Understanding

While the codebase itself isn't massive, the concepts of Semantic Kernel and the process framework do present a learning curve. This project serves as an excellent starting point, offering a simpler, yet fully functional, example of how we can apply these powerful tools. I encourage you to download the project from GitHub (link in description) and delve into the code. Spend time experimenting, reading the linked documentation, and understanding how each piece fits together. Making sense of it all will be a rewarding experience!

This blend of OTP-based security, intelligent agent interaction, and structured process management creates a modern, user-friendly login experience. Happy coding!