Implementation:FlowiseAI Flowise AuthSlice

Knowledge Sources	FlowiseAI Flowise
Domains	Authentication, State Management
Last Updated	2026-02-12 07:00 GMT

Overview

authSlice is a Redux Toolkit slice that manages user authentication state including login, logout, workspace switching, plan upgrades, and profile updates for the Flowise UI.

Description

The authSlice uses createSlice from Redux Toolkit to define an auth state slice with initial values hydrated from localStorage (user, isAuthenticated, isGlobal, permissions, features). It provides six reducers: loginSuccess, logoutSuccess, workspaceSwitchSuccess, upgradePlanSuccess, userProfileUpdated, and workspaceNameUpdated. Most reducers delegate to AuthUtils helper methods for persisting state changes to localStorage, while logoutSuccess explicitly clears all state and removes the stored user.

Usage

Import the exported action creators and dispatch them from login forms, logout handlers, workspace switchers, or profile update flows. The default export is the reducer, which should be registered in the Redux store under the auth key.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/store/reducers/authSlice.js
• Lines: 1-68

Signature

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
        loginSuccess,
        logoutSuccess,
        workspaceSwitchSuccess,
        upgradePlanSuccess,
        userProfileUpdated,
        workspaceNameUpdated
    }
})

export const { loginSuccess, logoutSuccess, workspaceSwitchSuccess, upgradePlanSuccess, userProfileUpdated, workspaceNameUpdated } =
    authSlice.actions
export default authSlice.reducer

Import

import authReducer from '@/store/reducers/authSlice'
import { loginSuccess, logoutSuccess, workspaceSwitchSuccess, upgradePlanSuccess, userProfileUpdated, workspaceNameUpdated } from '@/store/reducers/authSlice'

I/O Contract

Inputs

Name	Type	Required	Description
loginSuccess action.payload	object	Yes	User data, token, permissions, and features to store on successful login
logoutSuccess	(none)	N/A	No payload needed; clears all auth state
workspaceSwitchSuccess action.payload	object	Yes	Updated user data after switching workspaces
upgradePlanSuccess action.payload	object	Yes	Updated user data after plan upgrade
userProfileUpdated action.payload	object	Yes	Updated user profile data (name, email)
workspaceNameUpdated action.payload	object	Yes	Object with id and name of the renamed workspace

Outputs

Name	Type	Description
user	object or null	The current authenticated user object
isAuthenticated	boolean	Whether the user is currently authenticated
isGlobal	boolean	Whether the user has global-level access
token	string or null	The current auth token (stored in memory only)
permissions	array or null	Array of permission objects for RBAC
features	array or null	Array of feature flags available to the user

Usage Examples

Basic Usage

import { useDispatch, useSelector } from 'react-redux'
import { loginSuccess, logoutSuccess } from '@/store/reducers/authSlice'

function LoginForm() {
    const dispatch = useDispatch()
    const { isAuthenticated, user } = useSelector((state) => state.auth)

    const handleLogin = async (credentials) => {
        const response = await authApi.login(credentials)
        dispatch(loginSuccess(response.data))
    }

    const handleLogout = () => {
        dispatch(logoutSuccess())
    }

    return isAuthenticated ? (
        <div>
            Welcome, {user.name}
            <button onClick={handleLogout}>Logout</button>
        </div>
    ) : (
        <form onSubmit={handleLogin}>...</form>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Authentication