Login

Allows an existing customer to log in with their email address and password.

LogInFormProvider

Creates a Formik form that handles the login mutation, validation and error handling. This component uses the child-as-function pattern. It renders the child as a function with the following parameters:

globalError: string If the API returns any errors, this will be a string containing an error message.

isSubmitting: boolean Whether or not the form is in the process of submitting.

isValid: boolean Whether or not the form passes validation.

...formik All Formik render props are also exposed by this component. In most cases they should not be needed.

Note:

Once the form has been submitted, the user will be immediately logged in. useAuth can be used to determine the user's session status, as shown in the below example

Example usage:

Copy

Copied

const { loggedIn } = useAuth()

<LogInFormProvider redirect="my-pages" initialEmail="prefilled@email.com">
{({ globalError, isSubmitting, isValid }) => {
  return (
    <label>Your email</label>
    <input type="email" name="email" />
    <label>Your password</label>
    <input type="password" name="password" />

    { globalError && <div style={errorStyle}>{globalError}</div> }

    <button type="submit" disabled={!isValid || isSubmitting}>Submit</button>}
  )
}}
  </LogInFormProvider>