useLogin
useLogin
is a React hook that facilitates login to your headless WordPress site without having to leave your Faust app.
API
The useLogin
exports, defined as a TypeScript type:
type UseLogin = {
loading: boolean;
login: (
usernameEmail: string,
password: string,
redirectUrl?: string,
) => void;
data:
| {
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
.
Usage
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 (
<form
onSubmit={(e) => {
e.preventDefault();
login(usernameEmail, password, '/dashboard');
}}>
<fieldset>
<label htmlFor="usernameEmail">Username or Email</label>
<input
id="usernameEmail"
type="text"
disabled={loading === true}
value={usernameEmail}
onChange={(e) => setUsernameEmail(e.target.value)}
/>
</fieldset>
<fieldset>
<label htmlFor="password">Password</label>
<input
id="password"
type="password"
disabled={loading === true}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</fieldset>
{data?.generateAuthorizationCode.error && (
<p
dangerouslySetInnerHTML={{
__html: data.generateAuthorizationCode.error,
}}
/>
)}
<fieldset>
<button type="submit">Login</button>
</fieldset>
</form>
);
}
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.