Account Pages

Overview

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:

Page name

Page url

Requires authentication

Description

Account

/account

Yes

Customer's account page.

Register

/account/register

No

Where customers go to create their account.

Login

/account/login

No

Where customers go to login into their account.

Orders

/account/orders

Yes

Where customers can see their orders.

Address

/account/address

Yes

Where customers can see and manage their addresses.

Forgot Password

/account/recover-password

No

Where customers go if they need to recover their password.

Reset Password

/account/reset-password

No

The page a customer is redirected after clicking the reset password link in their email.

AuthGuard Component

📘

Note about the code

All the code examples below are just an implementation suggestions. For brevity, the styles are omitted.

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:

prop name

type

description

allowedAuthStatus

string ('authenticated' | 'unauthenticated')

The status in which the customer is authorized to access the children's component.

redirectUrl

string

The url that the customer should be redirected to.

children

React.ReactNode

The component that will be wrapped and protected by AuthGuard.

To create the AuthGuard component — via Shogun Frontend:

  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.

Or, if you are developing Sections and Components locally:

  1. 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.

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:

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 — via Shogun Frontend:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section, in this example, we will name it RegisterForm.
  4. Click SAVE SECTION.

Or, if you are developing Sections and Components locally:

  1. 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.
Register page exampleRegister page example

Register page example

LoginForm Section

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 — using Shogun Frontend:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section, in this example, we will name it LoginForm.
  4. Click SAVE SECTION.

Or, if you are developing Sections and Components locally:

  1. 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.
Login page exampleLogin page example

Login page example

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.

To create a Section — using Shogun Frontend:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section, in this example, we will name it Account.
  4. Click SAVE SECTION.

Or, if you are developing Sections and Components locally:

  1. 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.
Account page exampleAccount page example

Account page example

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.

To create a Section — using Shogun Frontend:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section; we will name it AccountAddress in this example.
  4. Click SAVE SECTION.

Or, if you are developing Sections and Components locally:

  1. 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.
Address page example, adding a new addressAddress page example, adding a new address

Address page example, adding a new address

AccountOrders Section

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

Using Shogun Frontend:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section; we will name it AccountOrders in this example.
  4. Click SAVE SECTION.

Or, if you are developing Sections and Components locally:

  1. 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.

Orders page exampleOrders page example

Orders page example

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 — using Shogun Frontend:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section; in this example, we will name it as ForgotPasswordForm.
  4. Click SAVE SECTION.

Or, if you are developing Sections and Components locally:

  1. 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.
Forgot password page exampleForgot password page example

Forgot password page example

ResetPasswordForm Section

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

Using Shogun Frontend:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section; in this example, we will name it ResetPasswordForm.
  4. Click SAVE SECTION.

Or, if you are developing Sections and Components locally:

  1. 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 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.
  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.

Did this page help you?