Component Playground
Config
{
"authFlowType": "Discovery",
"products": [
"emailMagicLinks",
"passwords"
],
"emailMagicLinksOptions": {
"loginRedirectURL": "https://www.stytch.com/login",
"signupRedirectURL": "https://www.stytch.com/signup"
},
"passwordOptions": {
"loginRedirectURL": "https://www.stytch.com/login",
"resetPasswordRedirectURL": "https://www.stytch.com/reset-password"
},
"sessionOptions": {
"sessionDurationMinutes": 60
}
}Style
{
"fontFamily": "Arial",
"buttons": {
"primary": {
"backgroundColor": "#1D1D1D",
"textColor": "#FFFFFF",
"borderColor": "#1D1D1D",
"borderRadius": "4px"
},
"secondary": {
"backgroundColor": "#FFFFFF",
"textColor": "#1D1D1D",
"borderColor": "#CECECE",
"borderRadius": "4px"
}
},
"colors": {
"primary": "#1D1D1D",
"secondary": "#525151",
"success": "#09906A",
"error": "#8F0002"
},
"container": {
"backgroundColor": "#FBFAF9",
"borderRadius": "4px",
"borderColor": "#CECECE",
"width": "100%"
},
"inputs": {
"borderColor": "#CECECE",
"borderRadius": "4px",
"textColor": "#1D1D1D",
"placeholderColor": "#525151",
"backgroundColor": "#FFFFFF"
}
}Products
Google
Microsoft
GitHub
Slack
Magic Links
Passwords
Single Sign-On (SSO)
Style
General
Font
Arial
Brand Logo
Container
Width
Background Color
Border Color
Border Radius
Colors
Primary
Secondary
Success
Error
Primary Button
Text Color
Background Color
Border Color
Border Radius
Secondary Button
Text Color
Background Color
Border Color
Border Radius
Inputs
Text Color
Placeholder Color
Background Color
Border Color
Border Radius