Skip To Main Content


useLogin is a React hook that facilitates login to your headless WordPress site without having to leave your Faust app.


The useLogin exports, defined as a TypeScript type:

type UseLogin = {
  loading: boolean;
  login: (
    usernameEmail: string,
    password: string,
    redirectUrl?: string,
  ) => void;
    | {
        generateAuthorizationCode: {
          code?: string;
          error?: string;
    | undefined;
  error: ApolloError | undefined;
};Code language: JavaScript (javascript)

Loading: A boolean flag that indicates whether the request for login is still in flight.
Login: The login request callback. It’s function that you need to call with the following parameters: usernameEmail is the user email. password is the user password and redirectUrl is the redirect path when the login request is successful.
Data: the login response data. It’s an object with the following attributes: generateAuthorizationCode is an object that contains either the code or an error message of the login attempt. You need to check these fields to see if the login request was valid or not (see Usage example for more context).
Error: if the login request has failed, it will return an instance of ApolloError.


Below is a full example of login to your WordPress site without leaving your Faust app. Upon a successful login, you will be redirected to /dashboard:

import { useLogin } from '@faustwp/core';
import { useState } from 'react';

export default function Login() {
  const [usernameEmail, setUsernameEmail] = useState('');
  const [password, setPassword] = useState('');
  const { login, loading, data, error } = useLogin();

  return (
      onSubmit={(e) => {

        login(usernameEmail, password, '/dashboard');
        <label htmlFor="usernameEmail">Username or Email</label>
          disabled={loading === true}
          onChange={(e) => setUsernameEmail(}

        <label htmlFor="password">Password</label>
          disabled={loading === true}
          onChange={(e) => setPassword(}

      {data?.generateAuthorizationCode.error && (
            __html: data.generateAuthorizationCode.error,

        <button type="submit">Login</button>
Code language: JavaScript (javascript)

It create some state values to keep track of the user email and password fields. It then uses the useLogin hook and extracts the return values. Based on the return values, it will either disable some fields when loading=true or return an error message when data.generateAuthorizationCode.error is not empty.