> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Container app authentication

> Configure authentication flows, landing pages, and session management for container applications that embed FlowX UI Flows.

## Overview

A **container app** is any web or mobile application that embeds FlowX UI Flows using the FlowX renderers (Angular, React, React Native, iOS, or Android SDKs). Container apps are responsible for authenticating end users before rendering FlowX content.

The container app authentication flow provides built-in support for OAuth2/OIDC authentication, custom landing pages, and session management.

***

## Key features

<CardGroup cols={2}>
  <Card title="Authentication providers" icon="key">
    Support for multiple OAuth2/OIDC authentication providers via Keycloak integration
  </Card>

  <Card title="Custom landing page" icon="house">
    Configure a landing page for unauthenticated users with organization branding
  </Card>

  <Card title="Session management" icon="id-badge">
    Automatic token refresh, silent refresh support, and redirect URI persistence
  </Card>

  <Card title="SSO integration" icon="right-to-bracket">
    Single sign-on across container apps within the same organization
  </Card>
</CardGroup>

***

## How it works

The container app authentication flow handles the following:

<Steps>
  <Step title="Organization resolution">
    The container app resolves the organization context using the hostname or an organization code. This determines which Keycloak realm and authentication configuration to use.
  </Step>

  <Step title="Authentication redirect">
    Unauthenticated users are redirected to the configured identity provider (Keycloak) for login. The redirect URI is persisted in local storage to restore the user's navigation state after authentication.
  </Step>

  <Step title="Token management">
    After successful authentication, the container app manages access tokens with automatic refresh. Silent refresh keeps the session alive without requiring user interaction.
  </Step>

  <Step title="UI Flow rendering">
    Once authenticated, the container app renders FlowX UI Flows with the user's identity and permissions.
  </Step>
</Steps>

***

## Configuration

### Authentication setup

Container apps authenticate using OAuth2/OIDC with the following configuration:

| Parameter             | Description                                                                                                         |
| --------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Organization code** | Identifies the organization for multi-tenant environments. Can be derived from the hostname or provided explicitly. |
| **Keycloak realm**    | The Keycloak realm associated with the organization                                                                 |
| **Client ID**         | The OAuth2 client ID registered in Keycloak for the container app                                                   |
| **Redirect URI**      | The URI to redirect to after authentication. Persisted across browser sessions.                                     |

<Tip>
  For multi-tenant SaaS deployments, the organization code is typically extracted from the subdomain (e.g., `acme.flowx.ai` resolves to organization `acme`).
</Tip>

### Landing page

You can configure a custom landing page that appears for unauthenticated users. This page can include:

* Organization branding and logo
* Login button that initiates the authentication flow
* Links to support or documentation

<Card title="Container app branding" icon="palette" href="./container-app-branding">
  Customize colors, logo, and header appearance for the container app
</Card>

### Session behavior

| Behavior                 | Description                                                        |
| ------------------------ | ------------------------------------------------------------------ |
| **Token refresh**        | Access tokens are refreshed automatically before expiration        |
| **Silent refresh**       | Background token renewal without user interaction                  |
| **Redirect persistence** | The user's intended destination is stored and restored after login |
| **Session timeout**      | Configurable session duration based on Keycloak realm settings     |

***

## SDK integration

Each FlowX renderer SDK handles container app authentication:

<Tabs>
  <Tab title="Angular">
    The Angular SDK integrates with `angular-oauth2-oidc` for authentication handling. Configure the OAuth2 module in your app with the Keycloak endpoints for your organization.

    For setup details, see the [Angular SDK documentation](/5.9/sdks/angular-renderer).
  </Tab>

  <Tab title="React">
    The React SDK provides authentication hooks that connect to your Keycloak instance.

    For setup details, see the [React SDK documentation](/5.9/sdks/react-renderer).
  </Tab>

  <Tab title="React Native">
    The React Native SDK is being introduced in FlowX.AI 5.9.0. Authentication integration details will be added once the SDK ships.

    For setup details, see the [React Native SDK documentation](/5.9/sdks/react-native-renderer).
  </Tab>

  <Tab title="iOS">
    The iOS renderer handles OAuth2 authentication natively with secure token storage in the keychain.

    For setup details, see the [iOS SDK documentation](/5.9/sdks/ios-renderer).
  </Tab>

  <Tab title="Android">
    The Android renderer integrates with AppAuth for secure OAuth2 authentication.

    For setup details, see the [Android SDK documentation](/5.9/sdks/android-renderer).
  </Tab>
</Tabs>

***

## Related resources

<CardGroup cols={2}>
  <Card title="IAM Configuration" icon="key" href="/5.9/setup-guides/access-management/configuring-an-iam-solution">
    Set up Keycloak realms, clients, and service accounts
  </Card>

  <Card title="UI Flows" icon="window-maximize" href="/5.9/docs/building-blocks/ui-flows">
    Learn about UI Flows and how they render in container apps
  </Card>

  <Card title="FlowX SaaS Overview" icon="cloud" href="/5.9/docs/saas/saas-overview">
    Understand the FlowX SaaS deployment model
  </Card>

  <Card title="Workspaces & Access Rights" icon="shield" href="/5.9/setup-guides/access-management/workspaces-access-rights">
    Configure workspace-level access control
  </Card>
</CardGroup>