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 asLoginForm
.Create an
index.js
file inside theLoginForm
folder.Create a
styles.module.css
file inside theLoginForm
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>
<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 selectLoginForm
.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.