Sign-in Widget Component
Sign-in Widgets allow you to quickly add a set of sign-in providers to your application.
Properties
Visible
| Prop | isVisible |
|---|---|
| Type | boolean |
| Default | true |
Whether or not this node is visible.
Enabled
| Prop | isEnabled |
|---|---|
| Type | boolean |
| Default | true |
Whether or not this node is enabled.
Tooltip
| Prop | tooltip |
|---|---|
| Type | string |
| Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
| Prop | top |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the top side of the grid (grid-row-start).
Left
| Prop | left |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the left side of the grid (grid-column-start).
Width
| Prop | width |
|---|---|
| Type | string |
| Default | 128px |
The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4 will become grid-column-end: span 4). When this node is in a stack layout, the width can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.
Min Width
| Prop | minWidth |
|---|---|
| Type | string |
| Default | undefined |
The minimum width of the node. When this node is in a grid layout, this property is ignored.
Max Width
| Prop | maxWidth |
|---|---|
| Type | string |
| Default | undefined |
The maximum width of the node. When this node is in a grid layout, this property is ignored.
Height
| Prop | height |
|---|---|
| Type | string |
| Default | 32px |
The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4 will become grid-row-end: span 4). When this node is in a stack layout, the height can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.
Min Height
| Prop | minHeight |
|---|---|
| Type | string |
| Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Max Height
| Prop | maxHeight |
|---|---|
| Type | string |
| Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Overflow
| Prop | overflow |
|---|---|
| Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
| Default | auto |
The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.
Overflow X
| Prop | overflowX |
|---|---|
| Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
| Default | auto |
The strategy used to handle overflow in the horizontal axis for content that is larger than its container.
Overflow Y
| Prop | overflowY |
|---|---|
| Type | Overflow ('auto' | 'visible' | 'hidden' | 'scroll') |
| Default | auto |
The strategy used to handle overflow in the vertical axis for content that is larger than its container.
Custom Styles
| Prop | styles |
|---|---|
| Type | string |
| Default | ::component { } |
Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.
Object Fit
| Prop | objectFit |
|---|---|
| Type | ObjectFit ('none' | 'contain' | 'cover' | 'fill' | 'scale-down') |
| Default | cover |
The strategy used to set how the content of a replaced element should be resized to fit its container.
Text Color
| Prop | oidcTextColor |
|---|---|
| Type | string |
| Default | white |
The text color of each button's label.
Font Size
| Prop | oidcFontSize |
|---|---|
| Type | FontSize ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl') |
| Default | sm |
The font size of each button's label.
Border Radius
| Prop | oidcBorderRadius |
|---|---|
| Type | string |
| Default | 4px |
The radius of the rounded corners of each button's border (perimeter). Supports the same values as the corresponding CSS property.
Button Height
| Prop | oidcButtonHeight |
|---|---|
| Type | string |
| Default | 42px |
The height of each button.
Button Color
| Prop | oidcButtonColor |
|---|---|
| Type | string |
| Default | button.muted |
The background color of each button.
Hover Button Color
| Prop | oidcHoverButtonColor |
|---|---|
| Type | string |
| Default | undefined |
The background color of each button when it is hovered over or focused.
Should Redirect
| Prop | shouldRedirect |
|---|---|
| Type | boolean |
| Default | true |
Whether the user should be redirected back to another page on successful authentication.
Redirect Path
| Prop | defaultRedirectPath |
|---|---|
| Type | string |
| Default | / |
What path to send the user to upon successful authentication if the user does not have another path they were previously redirect from.
Primary Code Text
| Prop | otpPrimaryCodeText |
|---|---|
| Type | string |
| Default | Check your inbox for a code |
The text of the header on the PIN code verification step.
Secondary Code Text
| Prop | otpSecondaryCodeText |
|---|---|
| Type | string |
| Default | Please be sure to check your spam folder as well. |
The text of the subheading on the PIN code verification step.
Success Text
| Prop | otpSuccessText |
|---|---|
| Type | string |
| Default | You're signed in |
The text of the header on the success step.
Primary Button Color
| Prop | otpPrimaryButtonBackgroundColor |
|---|---|
| Type | string |
| Default | button.background |
The background color of the "Continue with email" button.
Primary Button Hover Color
| Prop | otpPrimaryButtonHoverBackgroundColor |
|---|---|
| Type | string |
| Default | undefined |
The hover color of the "Continue with email" button.
Primary Button Text Color
| Prop | otpPrimaryButtonTextColor |
|---|---|
| Type | string |
| Default | button.text |
The color of the "Continue with email" button text.
Secondary Button Color
| Prop | otpSecondaryButtonHoverColor |
|---|---|
| Type | string |
| Default | button.ghost |
The hover color of the "Back" button.
Secondary Button Text Color
| Prop | otpSecondaryButtonTextColor |
|---|---|
| Type | string |
| Default | text.primary |
The color of the "Back" button text.
Font Size
| Prop | otpFontSize |
|---|---|
| Type | FontSize ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl') |
| Default | sm |
The font size of each button's label.
Border Radius
| Prop | otpBorderRadius |
|---|---|
| Type | string |
| Default | 6px |
The radius of the rounded corners of each button's border (perimeter). Supports the same values as the corresponding CSS property.
Button Height
| Prop | otpButtonHeight |
|---|---|
| Type | string |
| Default | 42px |
The height of each button.
Input Background Color
| Prop | otpInputBackgroundColor |
|---|---|
| Type | string |
| Default | input.background |
The background color of the input.
Input Label Color
| Prop | otpInputLabelColor |
|---|---|
| Type | string |
| Default | text.primary |
The color of the input's label text.
Input Text Color
| Prop | otpInputTextColor |
|---|---|
| Type | string |
| Default | text.primary |
The color of the input's text.
Input Placeholder Color
| Prop | otpInputPlaceholderColor |
|---|---|
| Type | string |
| Default | input.placeholder |
The color of the input's placeholder text.
Event Handlers
On Success
| Handler | sign-inNode.onSuccess |
|---|
The event handler to be called upon the successful completion of the sign-in process. This property can be used to chain function calls.
On Failure
| Handler | sign-inNode.onFailure |
|---|
The event handler to be called upon the failure of the sign-in process. This property can be used to handle errors in function calls.