Register Customer in Storefront

In this guide, you'll learn how to register a customer in your storefront.

This guide covers registration using email and password. For authentication with third-party providers, refer to the Third-Party Login guide.

Register Customer Flow#

To register a customer, you implement the following steps:

1. Show the customer a form to enter their details.
2. Send a POST request to the /auth/customer/emailpass/register Get Registration Token API route to obtain a registration JWT token.
3. Send a request to the Create Customer API route passing the registration JWT token in the header.

However, a customer may enter an email that's already used either by an admin user, another customer, or a custom actor type. To handle this scenario:

• Try to obtain a login token by sending a POST request to the /auth/customer/emailpass Authenticate Customer API route. The customer is only allowed to register if their email and password match the existing identity. This allows admin users to log in or register as customers.
• If you obtained the login token successfully, create the customer using the login JWT token instead of the registration token. This will not remove the existing identity. So, for example, an admin user can also become a customer.

When you're using the JS SDK, this flow is simplified with quick registration and login methods. The rest of this guide uses the JS SDK to demonstrate the registration flow. However, if you're not using the JS SDK, you can still implement the same flow using the API routes.

How to Implement the Register Customer Flow#

An example implemetation of the registration flow in a storefront:

In the above example, you create a handleRegistration function that:

• Obtains a registration JWT token from the /auth/customer/emailpass/register API route using the auth.register method. If an error is thrown:
  • If the error is an existing identity error, try retrieving the login JWT token from /auth/customer/emailpass API route using the auth.login method. This will fail if the existing identity has a different password, which doesn't allow the customer from registering.
  • For other errors, show an alert and exit execution.
  • The JS SDK automatically stores an re-uses the authentication headers or session in the auth.register and auth.login methods. So, if you're not using the JS SDK, make sure to pass the received authentication tokens as explained in the API reference
• Send a request to the Create Customer API route to create the customer in Medusa.
  • If an error occurs, show an alert and exit execution.
  • As mentioned, the JS SDK automatically sends the authentication headers or session in all requests after registration or logging in. If you're not using the JS SDK, make sure to pass the received authentication tokens as explained in the API reference.
• Once the customer is registered successfully, you can either redirect the customer to the login page or log them in automatically, as explained in the Login guide.