Login/Sign Up/Logout/Password Reset

For Login, Sign Up and Password Reset pages, there’s a special <Captcha/> component and a useful hook useAccount()

These pages need to include the <Captcha /> component where it makes sense to show captcha. By default, the captcha won’t be visible. If the captcha human probability score is low, then captcha will show up automatically. The useAccount() hook returns a captchaRef value which needs to be passed to the ref prop of <Captcha />.

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

Login page

sections/FeaturedProducts.jsx

import React, {useRef} from 'react';
import {Captcha, useAccount} from builderoo
 
const LoginSection = () => {
 
  const {login, captchaRef} = useAccount()
 
  const loginClick = () => {
    login({username: "[email protected]", password: "password"}).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="products-list">
          <input type="email" />
          <input type="password" />
        </div>
        <Captcha ref={captchaRef}/>
        <button onClick={loginClick}>Login Now</button>
      </div>
    </section>
  )
};
 
export default LoginSection

Sign Up page

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]"
}

Testing login

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

Testing signup

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