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 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. Example: data-reflow-show="photo, name" |
| 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-signin-redirect="https://example.com/profile" |
| 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-signout-redirect="https://example.com/home" |
| 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: data-reflow-user-page-url="https://example.com/profile" |