ratty-blush•15mo ago

useLogin

I'm looking for a headless example of using useLogin. Ideally I want to have a custom login page set up for styling and I'm still trying to work out if it's better to create a form, or use the inferencer. The example on the useLogin page shows only the Antd version. https://refine.dev/docs/api-reference/core/hooks/authentication/useLogin/ I'm sure I'm missing something basic but I'm currently switching away from using Google Auth as the auth provider as we'll want more options than just a Gmail account for signups.

useLogin | refine

useLogin data hook from refine is a modified version of react-query's useMutation for authentication.

2 Replies

kapa.ai•15mo ago

Hi @h3rrpie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can create a custom login page using the useLogin hook without relying on Ant Design. Here's an example of a custom login page using plain HTML and CSS:

import { useLogin } from "@refinedev/core";

type LoginVariables = {
  username: string;
  password: string;
};

export const LoginPage = () => {
  const { mutate: login } = useLogin<LoginVariables>();

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const username = formData.get("username") as string;
    const password = formData.get("password") as string;
    login({ username, password });
  };

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="username">Username:</label>
      <input type="text" id="username" name="username" required />
      <br />
      <label htmlFor="password">Password:</label>
      <input type="password" id="password" name="password" required />
      <br />
      <button type="submit">Login</button>
    </form>
  );
};

import { useLogin } from "@refinedev/core";

type LoginVariables = {
  username: string;
  password: string;
};

export const LoginPage = () => {
  const { mutate: login } = useLogin<LoginVariables>();

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const username = formData.get("username") as string;
    const password = formData.get("password") as string;
    login({ username, password });
  };

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="username">Username:</label>
      <input type="text" id="username" name="username" required />
      <br />
      <label htmlFor="password">Password:</label>
      <input type="password" id="password" name="password" required />
      <br />
      <button type="submit">Login</button>
    </form>
  );
};

This example uses a simple form with username and password fields. When the form is submitted, it calls the onSubmit function, which retrieves the form data and calls the login function from the useLogin hook. Regarding the choice between creating a form or using the inferencer, it depends on your requirements and preferences. Creating a custom form gives you more control over the styling and behavior, while using the inferencer might save you some time in development. For more information on the useLogin hook, you can refer to the useLogin documentation (https://refine.dev/docs/api-reference/core/hooks/auth/useLogin). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us how it did by reacting below