Login using Email and Password

[Pankajmehta1998]

Login implemeted using Email and Password format but how to maintain its loggedIn state so that it can be easily accessible throughout the application. This is my code:
`import {json, Link, useActionData, useLocation, useNavigate} from '@remix-run/react';
import {useState, useEffect} from 'react';
import SignupInfo from '/assets/svgs/SignupInfo';
import {CUSTOMER_ACCESS_TOKEN_CREATE_MUTATION} from '/graphql/Mutation/Mutation';

interface ActionData {
success: boolean;
accessToken?: any;
expiresAt?: any;
error?: string;
}

export async function action({request, context}: {request: any; context: any}) {
const {storefront} = context;
const formData = await request.formData();
const email = formData.get('Email');
const password = formData.get('Password');

try {
const {customerAccessTokenCreate} = await storefront.mutate(
CUSTOMER_ACCESS_TOKEN_CREATE_MUTATION,
{
variables: {
input: {
email,
password,
},
},
},
);

if (customerAccessTokenCreate.customerAccessToken) {
  return json({
    success: true,
    accessToken: customerAccessTokenCreate.customerAccessToken.accessToken,
    expiresAt: customerAccessTokenCreate.customerAccessToken.expiresAt,
  });
} else {
  return json({
    success: false,
    error: customerAccessTokenCreate.customerUserErrors[0].message,
  });
}

} catch (error) {
return json({success: false, error: 'An unexpected error occurred'});
}
}

export default function Login() {
const actionData = useActionData();
const navigate = useNavigate();
const location = useLocation();
const message = location;
const [signinData, setSigninData] = useState({
Email: '',
Password: '',
});
const [errorStatus, setErrorStatus] = useState<string | null>(null);

const handleChange = (e: any) => {
const {name, value} = e.target;
setSigninData({
...signinData,
[name]: value,
});
};

useEffect(() => {
if (actionData?.success) {
if (typeof window !== 'undefined') {
localStorage.setItem('accessToken', actionData.accessToken);
localStorage.setItem('tokenExpiresAt', actionData.expiresAt);
navigate('/account');
}
} else if (actionData?.success === false) {
setErrorStatus(actionData?.error || 'An unexpected error occurred');
}
}, [actionData, navigate]);

return (

Login

Don't have an account yet?

Create account

<input
required="required"
className={errorStatus ? 'login-input-block' : ''}
type="email"
name="Email"
id="CustomerEmail"
placeholder="Email"
value={signinData?.Email}
onChange={handleChange}
/>

Email
{errorStatus && (




{errorStatus === 'Unidentified customer'
? 'Incorrect email or password.'
: errorStatus}



)}

<input
required="required"
className={errorStatus ? 'login-input-block' : ''}
type="password"
name="Password"
id="CustomerPassword"
placeholder="Password"
value={signinData?.Password}
onChange={handleChange}
/>

Password

      <Link className="forgot-password" to="/forget/password">
        Forgot your password?
      </Link>
      <button className="account-create-button" type="submit">
        Sign in
      </button>
      <Link className="account-return-to-shop" to="/">
        Return to Store
      </Link>
    </form>
  </div>
</div>

);
}`

Is it possible to maintain logged in state as its maintained using Customer Account Api, here in my code?

[blittle]

There are two ways for customers to login to a Hydrogen site.

1. The new customer account API. This does not use passwords to login. Instead it uses magic links via email, with other auth schemes planned. This is what comes with the new Hydrogen starter template.
2. The legacy accounts via the Storefront API. This uses email/password to authenticate. But it is deprecated. An example on how to use it is available here: https://github.com/Shopify/hydrogen/tree/main/examples/legacy-customer-account-flow