Sign in with Flowsta Buttons

Official "Sign in with Flowsta" button assets for your website or app.

Button Variants

We provide 6 button variants in multiple formats:

Dark Buttons (for light backgrounds)

• Dark Pill - Rounded corners, dark background
• Dark Rectangle - Square corners, dark background

Light Buttons (for dark backgrounds)

• Light Pill - Rounded corners, light background
• Light Rectangle - Square corners, light background

Neutral Buttons (works on any background)

• Neutral Pill - Rounded corners, neutral colors
• Neutral Rectangle - Square corners, neutral colors

Available Formats

All buttons are available in three formats:

• SVG - Vector format, scalable without quality loss (recommended)
• 1x PNG - Standard resolution (175×40px)
• 2x PNG - High DPI/Retina displays (350×80px)

Download Buttons

Dark Pill

SVG | 1x PNG | 2x PNG

Dark Rectangle

SVG | 1x PNG | 2x PNG

Light Pill

SVG | 1x PNG | 2x PNG

Light Rectangle

SVG | 1x PNG | 2x PNG

Neutral Pill

SVG | 1x PNG | 2x PNG

Neutral Rectangle

SVG | 1x PNG | 2x PNG

Integration Methods

1. NPM Package (React, Vue, Qwik)

For modern web apps with build tools:

npm install @flowsta/login-button

import { FlowstaLoginButton } from '@flowsta/login-button/react';

<FlowstaLoginButton
  clientId="your-client-id"
  redirectUri="https://yourapp.com/callback"
  variant="dark-pill"
/>

View full SDK documentation →

2. CDN (No Build Step)

For vanilla JavaScript without npm:

<script type="module">
  import { buildAuthorizationUrl } from 'https://unpkg.com/@flowsta/login-button';
  
  const authUrl = buildAuthorizationUrl({
    clientId: 'your-client-id',
    redirectUri: 'https://yoursite.com/callback',
    scopes: ['openid', 'email', 'display_name']
  });
  
  document.getElementById('login-btn').href = authUrl;
</script>

<a id="login-btn">
  <img src="/buttons/svg/flowsta_signin_web_dark_pill.svg" alt="Sign in with Flowsta">
</a>

3. Direct Download (Static HTML)

Download the button image and use it directly:

<!-- Download button and host yourself -->
<a href="YOUR_AUTH_URL">
  <img src="flowsta_signin_web_dark_pill.svg" alt="Sign in with Flowsta" width="175" height="40">
</a>

You'll need to construct the OAuth URL manually. See the OAuth guide for details.

4. CDN Hotlink (Easiest)

Link directly to our hosted buttons:

<a href="YOUR_AUTH_URL">
  <img src="https://docs.flowsta.com/buttons/svg/flowsta_signin_web_dark_pill.svg" 
       alt="Sign in with Flowsta" 
       width="175" 
       height="40">
</a>

Button Guidelines

Size Recommendations

• Minimum size: 175×40px (1x)
• Retina displays: 350×80px (2x)
• Responsive: Use SVG for automatic scaling

Do's ✅

• Use official button assets
• Maintain aspect ratio (175:40)
• Ensure sufficient contrast with background
• Add appropriate alt text for accessibility

Don'ts ❌

• Don't modify button colors or design
• Don't stretch or distort the button
• Don't add custom text to the button
• Don't use low-resolution versions for large displays

OAuth URL Construction

All buttons should link to the Flowsta OAuth authorization URL:

https://auth-api.flowsta.com/oauth/authorize?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yoursite.com/callback
  &response_type=code
  &scope=openid+email+display_name
  &state=RANDOM_STATE
  &code_challenge=PKCE_CHALLENGE
  &code_challenge_method=S256

See the OAuth Quickstart for a complete implementation guide.

License

These button assets are provided for use with Flowsta authentication. You may use them in any application that integrates with Flowsta.