Implementation:FlowiseAI Flowise OrganizationView

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Authentication, Organization Setup
Last Updated	2026-02-12 07:00 GMT

Overview

OrganizationSetupPage is a React view component that provides the initial organization and administrator account registration form, supporting email/password signup with Zod validation, optional SSO providers (Azure, Google, Auth0), and existing basic-auth credential migration.

Description

This component renders the account setup page used during initial Flowise deployment. It includes form fields for organization name (enterprise only), administrator name, email, password, and confirm password, all validated with a Zod schema. If the application was previously configured with basic authentication (FLOWISE_USERNAME/FLOWISE_PASSWORD environment variables), it detects this and requires the user to enter their existing credentials before registering. After successful registration, it automatically logs the user in and redirects them. The component also displays SSO sign-up buttons for configured providers (Azure, Google, Auth0).

Usage

Use this component as the route-level view for the organization/account setup page, typically at /organization or a similar path. It is shown once during the initial setup flow of a Flowise instance.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/organization/index.jsx
• Lines: 1-495

Signature

const OrgSetupSchema = z.object({
    username: z.string().min(1, 'Name is required'),
    email: z.string().min(1, 'Email is required').email('Invalid email address'),
    password: passwordSchema,
    confirmPassword: z.string().min(1, 'Confirm Password is required')
}).refine((data) => data.password === data.confirmPassword, {
    message: "Passwords don't match",
    path: ['confirmPassword']
})

const OrganizationSetupPage = () => {
    // ... component logic
}

export default OrganizationSetupPage

Import

import OrganizationSetupPage from '@/views/organization'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	Route-level component with no props; uses ConfigContext for license/platform detection

Outputs

Name	Type	Description
Rendered JSX	React.Element	A centered registration form with validation, SSO buttons, and backdrop loader

Key Internal State

State Variable	Type	Description
email	String	Administrator email input value
password	String	Password input value
confirmPassword	String	Confirm password input value
username	String	Administrator display name input value
orgName	String	Organization name (enterprise only)
existingUsername	String	Existing basic-auth username for migration
existingPassword	String	Existing basic-auth password for migration
loading	Boolean	Loading state during registration/login
authError	String	Error message displayed in an Alert
successMsg	String	Success message after registration
requiresAuthentication	Boolean	Whether existing basic-auth credentials must be verified first
configuredSsoProviders	Array	List of configured SSO providers (azure, google, auth0)

Validation Schema

The OrgSetupSchema (Zod) enforces:

• username: Non-empty string
• email: Non-empty, valid email format
• password: Must meet the passwordSchema requirements (8+ chars, uppercase, lowercase, digit, special character)
• confirmPassword: Must match password

Key Functions

Function	Description
register(event)	Form submit handler: validates with Zod, optionally verifies existing basic-auth, then calls registerAccountApi
signInWithSSO(ssoProvider)	Redirects to /api/v1/{provider}/login for SSO authentication

Usage Examples

Basic Usage

import OrganizationSetupPage from '@/views/organization'

// In route configuration
<Route path="/organization" element={<OrganizationSetupPage />} />

Related Pages

• Principle:FlowiseAI_Flowise_Organization_Management