Component Playground

Config

{
  "products": [
    "emailMagicLinks",
    "passwords",
    "oauth"
  ],
  "oauthOptions": {
    "providers": [
      {
        "type": "google"
      }
    ],
    "loginRedirectURL": "https://www.stytch.com/login",
    "signupRedirectURL": "https://www.stytch.com/signup"
  },
  "emailMagicLinksOptions": {
    "loginRedirectURL": "https://www.stytch.com/login",
    "loginExpirationMinutes": 30,
    "signupRedirectURL": "https://www.stytch.com/signup",
    "signupExpirationMinutes": 30
  },
  "otpOptions": {
    "methods": [],
    "expirationMinutes": 5
  },
  "passwordOptions": {
    "loginRedirectURL": "https://www.stytch.com/login",
    "resetPasswordRedirectURL": "https://www.stytch.com/reset-password"
  }
}

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

Magic Links

Facebook

Google

Passwords

SMS OTP

Web3

WhatsApp OTP

Style

General

Font

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