MAUI Hybrid Blazor Login: JavaScript Interop, Public IP Detection, and Access Control

🧩 The Problem and Flow

A MAUI Hybrid Blazor login can coordinate browser JavaScript, a public-IP check, server access control, authentication, and module navigation. Click any step to jump to the related implementation.

Page renders
    ↓
OnAfterRenderAsync(firstRender)
    ↓
Register JavaScript interop
    ↓
JavaScript calls Blazor
    ↓
Fetch public IP
    ↓
API checks IP access
    ↓
Enable login controls
    ↓
Authenticate user
    ↓
sessionStorage stores non-sensitive context
    ↓
Navigate to the target module

⚙️ Step 1: OnAfterRenderAsync

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await RegisterJs();
        await Task.Delay(1000);
        isVideoReady = true;
        await InvokeAsync(StateHasChanged);
    }
}

🔗 Step 2: Register JavaScript Interop

private DotNetObjectReference<Login_DTVS>? objRef;

protected override void OnInitialized()
{
    objRef = DotNetObjectReference.Create(this);
}

private async Task RegisterJs()
{
    await JS.InvokeVoidAsync("myInterop.register", objRef);
}

public void Dispose()
{
    objRef?.Dispose();
}

↔️ Step 3: JavaScript Calls Blazor

window.myInterop = {
    dotNetHelper: null,
    register: function (dotNetHelper) {
        this.dotNetHelper = dotNetHelper;
        window.hasregistered = true;
    },
    callBlazor: function () {
        this.dotNetHelper.invokeMethodAsync(
            "UpdateMessage", "Hello from JavaScript!"
        );
    }
};

🌐 Step 4: Fetch the Public IP

async function getPublicIP() {
    const response = await fetch('https://api.ipify.org?format=json');
    const data = await response.json();
    return data.ip;
}

string res = await JS.InvokeAsync<string>("getPublicIP");
clientIp = res;

The request is asynchronous, so the C# caller awaits the JavaScript result.

🛡️ Step 5: API Checks IP Access

var response = await Http.GetFromJsonAsync<AccessResponse>(
    "http://serverip:serverport/Auth/check-access/" + res);

if (response != null)
{
    hasFullAccess = response.HasAccess;
    clientIp = response.IpAddress;
}

✅ Step 6: Enable Login Controls

<button class="login-btn"
        @onclick="HandleLogin"
        disabled="@isLoading || !@hasFullAccess">
    Sign in
</button>

The UI remains gated until the access decision is available.

🔐 Step 7: Authenticate the User

var reqq = new AuthApiService.LoginRequest
{
    category = selectedPlant == "1108" ? "E" : "S",
    UserID = username,
    LoginPwd = password,
    IpAddress = clientIp
};

var lr = await AuthService.LoginAsync(reqq);

💾 Step 8: Store Non-Sensitive Context

await JS.InvokeVoidAsync("sessionStorage.setItem", "PlantCode", selectedPlant);
await JS.InvokeVoidAsync("sessionStorage.setItem", "LoginId", username);
await JS.InvokeVoidAsync("sessionStorage.setItem", "CompCode", selectedPlant);

Keep only non-sensitive context here. Do not store the password in sessionStorage.

➡️ Step 9: Navigate to the Target Module

if (!string.IsNullOrWhiteSpace(lr.RedirectTo))
{
    await AuthService.AutoRejectPendingApprovalsAsync(selectedPlant);
    Nav.NavigateTo("/" + lr.RedirectTo);
}