C
C#•5mo ago
Jelles

Blazor Page not updating model

Hi, I want to create a login page but I am having issues getting the data to the backend. My backend is working I am using Aspnetcore identity for authentication. The endpoint /login and /register work fine in postman when testing. But when I use my login page I get an error. I have been trying to figure out why this is happening and I feel like the data from my form is not being updated to my model. When debugging this code I see that loginModel is never updated and the values are always null. I left out the authentication code for debugging code. Here is my code: 
C#
@page "/login"
@inject HttpClient Http
@using System.Diagnostics

<div class="text-center">
    <EditForm class="form-signin mb-4" FormName="Login" Model="@loginModel" OnSubmit="@Authenticate">
        <div class="form-group">
            <label for="user-name">Email</label>
            <InputText class="form-control" id="user-name" aria-describedby="emailHelp" placeholder="E-mail" @bind-Value="@loginModel.Email" />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <InputText type="password" class="form-control" id="password" placeholder="Password" @bind-Value="@loginModel.Password" />
        </div>
        <div class="form-group">
            <button type="submit" id="login" name="login" class="btn btn-primary">Login</button>
        </div>
    </EditForm>
</div>

@if (!string.IsNullOrEmpty(message))
{
    <p>@message</p>
}

@code {
    public string message;
    public string url = "http://localhost:5083";
    public LoginModel loginModel = new LoginModel();

    private void Authenticate()
    {
        Console.WriteLine("Email:" + loginModel.Email);
        Console.WriteLine("Password:" + loginModel.Password);
    }
    
    public class LoginModel
    {
        public string Email { get; set; }
        public string Password { get; set; }
    }
}
C#
@page "/login"
@inject HttpClient Http
@using System.Diagnostics

<div class="text-center">
    <EditForm class="form-signin mb-4" FormName="Login" Model="@loginModel" OnSubmit="@Authenticate">
        <div class="form-group">
            <label for="user-name">Email</label>
            <InputText class="form-control" id="user-name" aria-describedby="emailHelp" placeholder="E-mail" @bind-Value="@loginModel.Email" />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <InputText type="password" class="form-control" id="password" placeholder="Password" @bind-Value="@loginModel.Password" />
        </div>
        <div class="form-group">
            <button type="submit" id="login" name="login" class="btn btn-primary">Login</button>
        </div>
    </EditForm>
</div>

@if (!string.IsNullOrEmpty(message))
{
    <p>@message</p>
}

@code {
    public string message;
    public string url = "http://localhost:5083";
    public LoginModel loginModel = new LoginModel();

    private void Authenticate()
    {
        Console.WriteLine("Email:" + loginModel.Email);
        Console.WriteLine("Password:" + loginModel.Password);
    }
    
    public class LoginModel
    {
        public string Email { get; set; }
        public string Password { get; set; }
    }
}
2 Replies
Salman
Salman•5mo ago
you don't need to reinvent the auth when you've identity etc already...you can just copy past identity endpoints implementation if you want customization and stuff
Jelles
JellesOP•5mo ago
I've encountered an issue with Google Authentication in my application. Initially, I realized I was missing @rendermode, which was causing updates to fail. However, I'm now facing a problem with identity authentication. When attempting to integrate Google Auth, I keep receiving the following error upon redirection to my backend: 
AuthenticationFailureException: The oauth state was missing or invalid.
AuthenticationFailureException: The oauth state was missing or invalid.
Despite the error, I can see that the g_csrf_token is being set in the cookies (e.g., g_csrf_token: bef5dc9647613e43). I've already configured the endpoints in the Google Console. Here are the relevant parts of my setup: Backend (Startup.cs): Pastebin Link
Frontend (Startup.cs): Pastebin Link Google Sign-In Button: 
<script src="https://accounts.google.com/gsi/client" async></script>

<div id="g_id_onload"
     data-client_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com"
     data-login_uri="http://localhost:5083/signin-google"
     data-auto_prompt="false" class="rounded-xl">
</div>
<div class="flex flex-col w-full items-center">
  <div class="g_id_signin"
      data-type="standard"
      data-size="large"
      data-theme="outline"
      data-text="sign_in_with"
      data-shape="rectangular"
      data-logo_alignment="left">
  </div>  
</div>
<script src="https://accounts.google.com/gsi/client" async></script>

<div id="g_id_onload"
     data-client_id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com"
     data-login_uri="http://localhost:5083/signin-google"
     data-auto_prompt="false" class="rounded-xl">
</div>
<div class="flex flex-col w-full items-center">
  <div class="g_id_signin"
      data-type="standard"
      data-size="large"
      data-theme="outline"
      data-text="sign_in_with"
      data-shape="rectangular"
      data-logo_alignment="left">
  </div>  
</div>
Could you help me troubleshoot why the OAuth state might be missing or invalid? Any suggestions on how to resolve this issue would be greatly appreciated!

Did you find this page helpful?