Auth and Profile
The Auth widget enables customers to sign in to their account or register for an account. After customers are authenticated, the Profile widget displays instead. The Profile widget displays a profile menu for customers to view their profile, view the buy it again experience, or log out.
The following image shows an example of the Auth widget:
The following image shows an example of the Profile widget:
Auth widget configuration
The following table shows the default configuration for the Auth widget. To request a change or update to this configuration, contact your Instacart representative.
| Property | Description | Default Value |
|---|---|---|
backgroundColor | The background color of the button. | systemGrayscale00 |
borderColor | The border color of the button. | brandPrimaryRegular |
borderRadius | The border radius of the button. | 2px |
borderStyle | The border style of the button. | 1px |
borderWidth | The border width of the button. | 16px |
fontSize | The text font size of the button. | 14px |
fontWeight | The text font weight of the button. | 700 |
height | The height of the button. | 48px |
lineHeight | The border radius of the button. | 20px |
padding | The padding in the button. | 10px |
width | The width of the button. | 172px |
Profile widget configuration
The following table shows the default configuration for the Profile widget. To request a change or update to this configuration, contact your Instacart representative.
| Property | Description | Default Value |
|---|---|---|
container.backgroundColor | The background color of the user avatar icon. | systemGrayscale00 |
avatar.fill | The color of the user avatar icon. | brandPrimaryDark |
sheetItemIcon.fill | The color of the icons in the menu. This property replaces profileIconColor. | brandPrimaryDark |
sheetItemLabel.fontsize | The font size of the text in the Profile widget menu. This property replaces profileItemFontSize. | 14px |
showProfileIcon | Whether icons display for each item in the menu should be shown. | true |