How to use HttpClient in a Razor component?

Question

I want to create a Blazor component library for my Microservice app and I have an issue on the login.razor component :

@inject NavigationManager NavigationManager
@inject HttpClient HttpClient
@inject IHttpContextAccessor HttpContextAccessor

<div class="container">
    <div class="row d-flex justify-content-center" style="padding-top: 50px;">
        <div class="col-md-5">
            <div class="card px-4 py-4" style="border-radius: 0;">
                <form @onsubmit="SubmitForm">
                    <div class="form-data">
                        <div class="mb-3">
                            <label for="identifiant" class="form-label">Identifiant</label>
                            <input style="background-color:#f0f6f7; border: 1px solid #f0f6f7;" type="text" class="form-control" @bind="@identifiant" placeholder="Identifiant">
                        </div>
                        <div class="mb-3">
                            <label for="mdp" class="form-label">Mot de passe</label>
                            <input style="background-color:#f0f6f7; border: 1px solid #f0f6f7;" type="password" class="form-control" @bind="@password" placeholder="Mot de passe" autocomplete="off">
                        </div>
                        <div class="mb-4 text-center">
                            <button type="submit" class="btn btn-dark mt-4">Connexion</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@code {
    private string identifiant;
    private string password;

    private async Task SubmitForm()
    {
        AuthentificationRequest request = new AuthentificationRequest();
        request.Identifiant = identifiant;
        request.Password = password;
        request.Roles = new List<string> { "" };
        AuthentificationResponse resp = null;
        var response = await HttpClient.PostAsJsonAsync<AuthentificationRequest>("http://localhost:8001/api/Account/", request);
        if (response.IsSuccessStatusCode)
        {
            string result = response.Content.ReadAsStringAsync().Result;
            resp = JsonConvert.DeserializeObject<AuthentificationResponse>(result);
        }
        var httpContext = HttpContextAccessor.HttpContext;
        httpContext.Session.SetString("Identifiant", resp.Identifiant);
        httpContext.Session.SetString("JwtToken", resp.JwtToken);
        var jwt = new JwtSecurityTokenHandler().ReadJwtToken(resp.JwtToken);
        var claimsIdentity = new ClaimsIdentity(jwt.Claims, CookieAuthenticationDefaults.AuthenticationScheme);
        var authProperties = new AuthenticationProperties
            {
                ExpiresUtc = DateTime.UtcNow.AddMinutes((double)resp.ExpiresIn)
            };
        NavigationManager.NavigateTo("Index");
    }
}

Nothing append and I don't know why. When we validate the form I need to send a request to the authentication api to check password/id and access. Afterthat the api send back a jwt token and we need to create a session for the connection inside the asp.net app.

@page "/connexion"
@using Commons

@using Microsoft.AspNetCore.Http
@inject IHttpContextAccessor httpContextAccessor

<div>
    <component type="typeof(Login)" render-mode="ServerPrerendered" />
</div>

I've try to see if something is send by httpClient but nothing appear inside the development console.

-- EDIT --

• HttpClient is defined in Program.cs like this :

builder.Services.AddHttpClient();

• I don't see any request to my api inside google chrome console network

Answer 1

Please add below line in your client project It will work.

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://xxxxxxxx/") });

Let me know if you need any more details.