@flowsta/login-button

Pre-built "Sign in with Flowsta" button components.

Official login button with built-in PKCE generation and OAuth redirect. Available for React, Vue, Qwik, and vanilla JavaScript.

Installation

npm install @flowsta/login-button

Framework Components

React

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

function App() {
  return (
    <FlowstaLoginButton
      clientId="your_client_id"
      redirectUri="https://yourapp.com/auth/callback"
      scopes={['openid', 'display_name', 'email']}
      variant="dark-pill"
      onSuccess={(data) => console.log('Auth code:', data.code)}
      onError={(error) => console.error('Error:', error)}
    />
  );
}

Vue 3

<script setup>
import { FlowstaLoginButton } from '@flowsta/login-button/vue';

const handleSuccess = (data) => {
  console.log('Auth code:', data.code);
};
</script>

<template>
  <FlowstaLoginButton
    client-id="your_client_id"
    redirect-uri="https://yourapp.com/auth/callback"
    :scopes="['openid', 'display_name', 'email']"
    variant="dark-pill"
    @success="handleSuccess"
  />
</template>

Qwik

import { FlowstaLoginButton } from '@flowsta/login-button/qwik';
import { $, component$ } from '@builder.io/qwik';

export default component$(() => {
  const handleSuccess = $((data: any) => {
    console.log('Auth code:', data.code);
  });

  return (
    <FlowstaLoginButton
      clientId="your_client_id"
      redirectUri="https://yourapp.com/auth/callback"
      scopes={['openid', 'display_name', 'email']}
      variant="dark-pill"
      onSuccess$={handleSuccess}
    />
  );
});

Vanilla JS

<div id="flowsta-login"></div>

<script type="module">
  import { initFlowstaLoginButton } from '@flowsta/login-button/vanilla';

  initFlowstaLoginButton('#flowsta-login', {
    clientId: 'your_client_id',
    redirectUri: 'https://yourapp.com/auth/callback',
    scopes: ['openid', 'display_name', 'email'],
    variant: 'dark-pill',
    onSuccess: (data) => console.log('Auth code:', data.code),
  });
</script>

Props

Prop	Type	Required	Default	Description
clientId	string	Yes	-	Your app's client ID
redirectUri	string	Yes	-	OAuth callback URL
scopes	FlowstaScope[]	No	['openid', 'email', 'display_name'] (React)	OAuth scopes array
variant	ButtonVariant	No	'dark-pill'	Button style variant
loginUrl	string	No	'https://login.flowsta.com'	Flowsta login URL
className	string	No	''	Custom CSS class
disabled	boolean	No	false	Disable the button

FlowstaScope

type FlowstaScope =
  | 'openid' | 'email' | 'display_name'
  | 'username' | 'did' | 'public_key'
  | 'profile_picture' | 'holochain';

Events

Event	Payload	Description
onSuccess / @success	{ code: string, state: string }	Auth code received
onError / @error	{ error: string, errorDescription?: string }	Error occurred
onClick / @click	-	Button clicked (before redirect)

Button Variants

Variant	Best For
dark-pill	Light backgrounds (recommended)
dark-rectangle	Light backgrounds, square corners
light-pill	Dark backgrounds
light-rectangle	Dark backgrounds, square corners
neutral-pill	Any background
neutral-rectangle	Any background, square corners

View all button styles and download SVGs

Vanilla JS API

The vanilla JS export provides two functions:

// Create a button element and append it to a container
initFlowstaLoginButton(selector: string | HTMLElement, options): HTMLButtonElement;

// Create a button element (manual DOM management)
createFlowstaLoginButton(options): HTMLButtonElement;

Without npm

Use buttons without a package manager:

<a href="YOUR_OAUTH_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>

See the Vanilla JS guide for a complete implementation without npm.

Next Steps

• Button Downloads - Download SVG/PNG button assets
• @flowsta/auth SDK - Core authentication SDK
• Auth Overview - OAuth flow documentation
• Vanilla JS Guide - Complete implementation without npm