Skip to main content

Sign-In (User Login)

The Sign In page allows existing users to securely access their account.
This section explains the layout, input fields, validation rules, authentication process, and error handling.

Authentication Behavior (with Keycloak Integration)​

This application uses Keycloak as the authentication provider for secure and centralized login management.

Flow Overview​

  1. User clicks the “Login” button in the app.

  2. The user is redirected to the Keycloak Login Page.

  3. The Keycloak page displays fields for:

    • Username / Email
    • Password

  4. After successful login, Keycloak redirects the user back to the application’s Dashboard page with a valid access token.

  5. If the user is logging in for the first time, they are prompted to:

    • Create an Organization
    • The system automatically assigns default roles:
      • Admin
      • Designer
      • User

  6. Multiple Organization Handling:

    • If a user’s email is associated with multiple organizations (e.g., they were invited to other organizations), after entering their email and clicking Next, the app displays a list of organizations they can access.

    • If the user belongs to only one organization, the app skips the organization selection step and directly shows the Password field.

    • Upon selecting an organization, the user is assigned roles based on the organization:

      • Own organization: Admin, Designer, User

      • Invited organization: Default role is User (as assigned via Workspace Settings tab in the app).

Post-login Handling​

ScenarioBehavior
Existing UserRedirects directly to the Dashboard
New UserPrompts Organization Creation modal
Organization SetupCreates a new organization with default roles — Admin, Designer, User

After successfully creating the organization, a toast message is displayed, and the user is automatically logged out from the app. The user must log in again to continue.

After successful authentication, the app may:

  • Redirect the user to dashboard
  • Display a toast Login succesufully
  • Load user-specific data (e.g.,User data, Organization Name, Roles)

Security Notes​

  • All authentication is handled by Keycloak, ensuring secure token-based login.
  • Tokens are stored securely in Local storage or session storage.
  • The app validates the orgId against the token to ensure correct user-organization mapping.