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 Auth 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 Buttoncomponent shows information about their customer profile and allows them to sign out.
Examples
- Adding a basic Auth Button component to a page: Demo | Source Code
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.
| Attribute | Possible Values | Description |
|---|---|---|
| data-reflow-type | auth-button | Must always be set. |
| data-reflow-show | photo, name | (optional) Comma separated list of sections
to display when the user is logged in. The sections not in the list will
be hidden. |
| data-reflow-signin-redirect | URL | (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-signout-redirect | URL | (optional) When this parameter is set the
customer will be redirected to the supplied URL after signing out. Example:
|
| data-reflow-user-page-url | URL | (optional) When this parameter is set,
clicking on the auth button in its authenticated state will redirect to
the supplied URL Example:
|