LoginForm Section | Shogun Frontend Documentation

Used in this Section:

Now that your customers have a way to create their accounts, they need a way to log in using their credentials.

Go ahead and create a new Section called LoginForm:

On your local environment, create a new folder inside src/sections and name it as LoginForm.
Create an index.js file inside the LoginForm folder.
Create a styles.module.css file inside the LoginForm folder.

import * as React from 'react'
import { useCustomerActions } from 'frontend-customer'
import { useRouter } from 'frontend-router'
import Link from 'frontend-link'
import AuthGuard from 'Components/AuthGuard'

const LoginForm = () => {
  const [loginErrors, setLoginErrors] = React.useState()
  const [loginFields, setLoginFields] = React.useState({ email: '', password: '' })
  const [loginInProgress, setLoginInProgress] = React.useState(false)

  const { login } = useCustomerActions()
  const router = useRouter()

  const handleSubmit = async event => {
    event.preventDefault()

    setLoginErrors(null)
    setLoginInProgress(true)

    const { errors } = await login(loginFields)

    if (errors) {
      setLoginInProgress(false)
      setLoginErrors(errors)

      console.error('Something went wrong', errors)

      return
    }

    router.push('/account')
  }

  const disableLoginButton =
    loginFields.email === '' || loginFields.password === '' || loginInProgress

  return (
    <section>
      <h1>Login</h1>

      <AuthGuard allowedAuthStatus="unauthenticated" redirectUrl={redirectTo}>
        <form onSubmit={handleSubmit}>
          <label>
            Email
            <input
              placeholder="email@example.com"
              type="email"
              value={loginFields.email}
              onChange={(event) =>
                setLoginFields(prevLoginFields => ({ ...prevLoginFields, email: event.target.value }))
              }
              required
            />
          </label>

          <label>
            Password
            <input placeholder="Enter your password" type="password" value={loginFields.password}
              onChange={(event) =>
                setLoginFields(prevLoginFields => ({
                  ...prevLoginFields,
                  password: event.target.value,
                }))
              }
              required
            />
          </label>

          <div>
            <button type="submit" disabled={disableLoginButton}>
              Login
            </button>
            <Link href="/account/recover-password">Forgot password?</Link>
          </div>

          <p>
            Don't have an account?
            <Link href="/account/register">Create a new account</Link>
          </p>
        </form>
      </AuthGuard>
    </section>
  )
}

export default LoginForm

Login page

To use the LoginForm section, we need a Login page:

Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Login.
Enter the PAGE PATH: account/login.
If desired, you can select a Frame from the Frame dropdown.
Click ADD PAGE.

Now, add the LoginForm section to your Login page (if you are already on the Login page, skip to step 4):

Click on the Pages icon from the sidebar.
Search for "Login".
Open the "Login" page by clicking on its title.
On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
A list with all our Sections will appear, search for and select LoginForm.
Click SAVE.

Logout on Checkout page (Shopify only)

When your customers log out on checkout page they won't be logged out in your store. Here is a recipe how to solve it:

First, create Logout section and add following code:

import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
import { useCustomerActions } from 'frontend-customer'

const Logout = () => {
  const { query } = useRouter()
  const { logout } = useCustomerActions()

  useEffect(() => {
    const { return_url } = query
    if (!return_url) return

    logout()
      .then(() => {
        sleep(2000)
        window.location = return_url ? return_url : '/'
      })
  }, [query, logout])

  return (
    <h1>Logging out...</h1>
  )
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

export default Logout

To use the Logout section, we need a Logout page:

Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Logout.
Enter the PAGE PATH: /logout.
Click ADD PAGE.
Add Logout section to Logout page.

Finally, you need to change Log out link on Checkout page to navigate to newly created Logout page. Instead of current logout-url https://store.myshopify.com/account/logout?return_url=<checkout-url> you would put https://store.com/logout?return_url=https://store.com/logout?return_url=<logout-url> (note if Shogun store and Checkout page are on different domains, logout url should point to Checkout domain).

With both Register and Login features in place, it's time to move to the password-protected pages.

Cart and Checkout

RegisterForm Section

Account Section

ForgotPasswordForm Section

ResetPasswordForm Section