Is there any way to set customer object in shopify themes when user logs in? - shopify

Question

In my Shopify theme, I'm creating a login form where when a user logs in, the customer object should be populated and it should know that the specific user is logged in so that I can use the customer object's properties anywhere in my project.
I want that following customer becomes true:
{%- if customer -%}
What I've done is used email to log inside account, first it check if email present then log inside, then it uses admin api to store the customer object inside another object. But I want that instead my customer object that is present in liquid should be updated that this user is logged inside.
<div id="login-container">
<form id="login-form">
<div>
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<button type="submit" id="signInBtn">Login</button>
</form>
</div>
const email = localStorage.getItem("email");
const loginContainer = document.getElementById("login-container");
// form functionality
const form = document.getElementById("login-form");
form.addEventListener("submit", (e) => {
e.preventDefault();
var customerEmail = document.getElementById("email").value;
fetch('/admin/customers/search.json?email=' + customerEmail)
.then(function(response) {
return response.json();
})
.then(function(data) {
if (data.customers.length > 0) {
var customer = data.customers[0];
localStorage.setItem('customer', JSON.stringify(customer));
} else {
alert("User not found");
}
})
.catch(function(error) {
console.error('An error occurred:', error);
});
});