Overview

👍

Heads up

• If you are using Starter Kit, there's no need need to manually create the Sections and Components below.
• All the code examples below are just an implementation suggestions. For brevity, the styles are omitted.
• For this guide, we will be creating Sections and Components locally. Make sure you have your Local Development Environment ready.

👉 Remember to commit and push newly created Sections and Components to your remote repository to sync the changes with Shogun Frontend.

This guide will walk you through implementing the account pages in your store. We will be using the Frontend Customer package.

The account pages will allow your customers to:

• Register and log in
• Manage addresses
• See order history
• Manage and reset password

🚧

For security reasons, managing payment methods is not supported using the frontend-customer package. Contact Shogun Support for an alternative approach.

Pages

Below is an overview of each page this guide will cover:

AuthGuard Component

Before we start implementing the pages and sections, let's create a component that will act as a guard to protect the pages that require authentication, like the /account and the /account/orders page.

The AuthGuard component will redirect your customer to a given URL if they try to access a password-protected page. Also, the AuthGuard component will redirect your customers to their /account page if they are already logged in and try to access the register and/or login page.

The AuthGuard component takes 3 props:

To create the AuthGuard Component:

1. On your local environment, create a new folder inside src/components and name it as AuthGuard.
2. Create an index.js file inside the AuthGuard folder.
3. Create a styles.module.css file inside the AuthGuard folder.

You can also create Sections and Components via Shogun Frontend IDE:

1. Click on the Sections icon from the sidebar.
2. Open any Section.
3. Click on Components on the left side of the screen.
4. Click on the + (plus sign) button to create a new Component.
5. The IDE will refresh with sample code.
6. Name the Component as AuthGuard by clicking on the pencil icon button in the top left corner of your screen. When you are done, click the checkmark icon to save the name.
7. Click SAVE to save the Component.

To see the code example, click on the AuthGuard recipe below:

RegisterForm Section

🚧

For Shopify stores

Make sure the Customers Accounts permission is enabled. Check Shopify documentation for more details.

Used in this Section:

• register - Frontend Customer (Shopify)
• register - Frontend Customer (BigCommerce)

Customers may not have an account to log into. Let's create a Section that will allow your customers to create an account.

To create a Section:

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

To see the code example, click on the RegisterForm recipe below:

Register page

With the RegisterForm Section ready, we need to create a register page:

1. Click on the Pages icon from the sidebar.
2. Click ADD PAGE on the top right corner.
3. Enter the PAGE NAME: Register.
4. Enter the PAGE PATH: account/register.
5. If desired, you can select a Frame from the Frame dropdown.
6. Click ADD PAGE.

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

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

LoginForm Section

Used in this Section:

• login - Frontend Customer (Shopify)
• login - Frontend Customer (BigCommerce)

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:

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

To see the code example, click on the LoginForm recipe below:

Login page

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

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

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

1. Click on the Pages icon from the sidebar.
2. Search for "Login".
3. Open the "Login" page by clicking on its title.
4. On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
5. A list with all our Sections will appear, search for and select LoginForm.
6. 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:

1. Click on the Pages icon from the sidebar.
2. Click ADD PAGE on the top right corner.
3. Enter the PAGE NAME: Logout.
4. Enter the PAGE PATH: /logout.
5. Click ADD PAGE.
6. 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.

Account Section

After your customers create their accounts and log in using their credentials, they will land at their account dashboard. The Account Section will be used within the /account page to give your authenticated customers access to their orders, address, and more. Before we create the /account page, let's create the Account Section.

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

To see the code example, click on the Account recipe below:

Account page

With the Account Section ready, let's create the /account page:

1. Click on the Pages icon from the sidebar.
2. Click ADD PAGE on the top right corner.
3. Enter the PAGE NAME: Account.
4. Enter the PAGE PATH: account.
5. If you want, you can select a Frame from the Frame dropdown.
6. Click ADD PAGE.

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

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

AccountAddress Section

Customers may want to manage their addresses through their account dashboard. To address this, let's create a new section that will handle adding, editing, and deleting addresses.

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

To see the code example, click on the AccountAddress recipe below:

Address page

Create the /account/address page:

1. Click on the Pages icon from the sidebar.
2. Click ADD PAGE on the top right corner.
3. Enter the PAGE NAME: Address.
4. Enter the PAGE PATH: account/address.
5. If you want, you can select a Frame from the Frame dropdown.
6. Click ADD PAGE.

Now, add the AccountAddress section to the Address page (if you are already on the Address page, skip to step 4):

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

AccountOrders Section

Similar to the address features, customers will see their order history in their account dashboard. For that, we need a new Section.

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

To see the code example, click on the AccountOrders recipe below:

Orders page

Let's create our /account/orders page:

1. Click on the Pages icon from the sidebar.
2. Click ADD PAGE on the top right corner.
3. Enter the PAGE NAME: Orders.
4. Enter the PAGE PATH: account/orders.
5. If you want, you can select a Frame from the Frame dropdown.
6. Click ADD PAGE.

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

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

That concludes the password-protected pages. Let's move to the final pieces; recovering and resetting passwords.

ForgotPasswordForm Section

Customers can reset their password via the account dashboard, but they need to be logged in for that to happen. If they forgot their password, they can request a reset password link. To handle this use case, let's create a new section:

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

To see the code example, click on the ForgotPasswordForm recipe below:

Forgot password page

Create the /account/forgot-password page:

1. Click on the Pages icon from the sidebar.
2. Click ADD PAGE on the top right corner.
3. Enter the PAGE NAME: Forgot password.
4. Enter the PAGE PATH: account/forgot-password.
5. If you want, you can select a Frame from the Frame dropdown.
6. Click ADD PAGE.

Now, add the ForgotPasswordForm Section to the Forgot password page (if you are already on the Orders page, skip to step 4):

1. Click on the Pages icon from the sidebar.
2. Search for "Forgot password".
3. Open the "Forgot password" page by clicking on its title.
4. On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
5. A list with all our Sections will appear; search for and select ForgotPasswordForm.
6. Click SAVE.

ResetPasswordForm Section

After clicking the reset password link, your customers will land at the /account/reset-password (on some stores it's account/reset) page. On this page, they will be able to enter their new password. Let's start by creating a new section.

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

To see the code example, click on the ResetPasswordForm recipe below:

Reset password page

Finally, create the account/reset-password (on some stores it's account/reset) page.

1. Click on the Pages icon from the sidebar.
2. Click ADD PAGE on the top right corner.
3. Enter the PAGE NAME: Reset password.
4. Enter the PAGE PATH: account/reset-password (on some stores it's account/reset).
5. If you want, you can select a Frame from the Frame dropdown.
6. Click ADD PAGE.

Now, add the ResetPasswordForm section to the Reset password page (if you are already on the Reset password page, skip to step 4):

1. Click on the Pages icon from the sidebar.
2. Search for "Reset password".
3. Open the "Reset password" page by clicking on its title.
4. On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
5. A list with all our Sections will appear; search for and select ResetPasswordForm.
6. Click SAVE.