Skip to main content

Auth Button

The Auth Button component allows your customers to create a user account in your store and sign in and out. It takes advantage of Reflow's Store Registrations feature.

The component has two states depending on the customer status:

  • Guest - Shown when the customer is not logged in. This state displays a button for signing in with an existing account or creating a new one.
  • Authenticated - For logged in users, the Auth Button component shows information about their customer profile and allows them to sign out.

Examples

How to Embed

To embed this component on your website include the reflow library, and add the following tag somewhere in the <body> of your page:

<div data-reflow-type="auth-button"></div>

Supported Attributes

You can configure the auth button behavior and the way it's rendered by specifying additional data-reflow-xxx attributes.

AttributePossible ValuesDescription
data-reflow-typeauth-buttonMust always be set.
data-reflow-showphoto, name

(optional) Comma separated list of sections to display when the user is logged in. The sections not in the list will be hidden.
Example: data-reflow-show="photo, name"

data-reflow-signin-redirectURL

(optional) When this parameter is set the customer will be redirected to the supplied URL after the sign in process is complete.

Example: data-reflow-signin-redirect="https://example.com/profile"

data-reflow-signout-redirectURL

(optional) When this parameter is set the customer will be redirected to the supplied URL after signing out.

Example: data-reflow-signout-redirect="https://example.com/home"

data-reflow-user-page-urlURL

(optional) When this parameter is set, clicking on the auth button in its authenticated state will redirect to the supplied URL

Example: data-reflow-user-page-url="https://example.com/profile"