Login/Sign Up/Logout/Password Reset

These pages are optional and can be implemented as dropdowns or modals. If you choose to create standalone pages, it is recommended to name them as follows: login.json, signup.json, logout.json, and reset-password.json.

Captcha and the hook

For Login, Sign Up, and Password Reset pages, use the special <Captcha /> component along with the useAccount() hook.

Include the <Captcha /> component on these pages where it is appropriate to display a captcha. By default, the captcha will not be visible. It will automatically appear if the human probability score is low. The useAccount() hook returns a captchaRef value, which needs to be assigned to the ref prop of the <Captcha /> component.

const {login, signup, verify, logout, resetPassword, captchaRef} = useAccount()
 
// in jsx
<Captcha ref={captchaRef} />

sections/Login.jsx

import React, {useRef} from 'react';
import {Captcha, useAccount} from builderoo
 
const LoginSection = () => {
 
  const {login, captchaRef} = useAccount()
 
  const emailRef = useRef()
  const passwordRef = useRef()
 
  const loginClick = () => {
    login({username: emailRef.current.value, password: passwordRef.current.value}).then(data => {
      // login successful, redirect to home or do something else
    }).catch(e => {
      // login error, show error message according to value in `e.data.error`
    })
  }
 
  return (
    <section className="section">
      <div className="container">
        <h3>Login</h3>
        <div className="form">
          <input type="email" ref={emailRef}/>
          <input type="password" ref={passwordRef} />
        </div>
        <Captcha ref={captchaRef}/>
        <button onClick={loginClick}>Login Now</button>
      </div>
    </section>
  )
};
 
export default LoginSection

For sign up page, use the <Captcha /> component in the same way and use the signup property of useAccount() hook.

signup({firstName: "John", lastName: "Doe", username: "[email protected]", password: "password"}).then(data => {
  if (data.status == "code-verification-required"){
    // show verification code input
  } else {
    // signup complete, redirect to home or do something else
  }
}).catch(e => {
  // handle error
})

Depending on the settings, the user may or may not have to enter a verification code. In the case that does, the “then” block will receive a status with the value of code-verification-required after calling signup. You should hide the sign up form and show an input field to take verification code that’s sent to users email/phone.

verify({code: "xxxxxx"}).then((data) => {
  // verification successful, user is now logged in. take to home page.
}).catch(e => {
  // invalid code, show error message
})

Good to know: You may be familiar with a common pattern where user receives an email with a link to verify their email. But the above approach (verifying with a code) has two benefits:

User may receive their email on another device.
No need to have a separate page where the user lands after verifying their email.

Password Reset page

Similar to signup, password reset flow involves verifying using a code instead of sending a link to the email.

For the password reset page, use the <Captcha /> component in the same way.

const {requestPasswordReset, resetPassword, captchaRef} = useAccount()

Use the requestPasswordReset property of useAccount() hook to request for a password reset. When this succeeds, the user gets an email with a code.

requestPasswordReset({username: "[email protected]"}).then((data: any) => {
  // Show the view for code and the new password input.
}).catch((e) => {
 
})

Call resetPassword property of the useAccount hook with the code and the new password.

resetPassword({code: "xxxxxx", newPassword: "secret"}).then((data: any) => {
  // Password reset successful. User will be automatically logged in.
  // You may redirect the user to the home page using `router.push("/")`
}).catch((e) => {
  // reset failed.
})

Logout

For logout, captcha is not required. So using useAccount hook without the captcha ref is fine.

const {logout} = useAccount()
 
// Now logout from anywhere
logout().then(data => {
  // logout successful, show a message to the user
}).catch(e => {
  // logout failed, show a message to the user
})

Testing in local environment

To test in the local environment, create a file named user.js in the data directory and copy/paste the following code.

data/user.js

export default {
  _id: "12",
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]"
}

Username	Password	Result
`[email protected]`	`123456`	Successful login
Any email except `[email protected]`	Any password except `123456`	Failed login

Username	Password	Result
`[email protected]`	`123456`	Successful signup
`[email protected]`	Any value except `123456`	Verification code required
Any value except `[email protected]`	Any	`username-exists` error

Testing code verification

Verification code		Result
`123456`		Successful verification
Any value except `123456`		Invalid verification code

Good to know: Here username [email protected] refers to the value of the property email in data/user.js file.

Cart Search

Login/Sign Up/Logout/Password Reset

Captcha and the hook

Login page

Sign Up page

Password Reset page

Logout

Testing in local environment

Testing login

Testing signup

Testing code verification