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

# Corbado Connect System Architecture Overview

> Get a high-level overview of the Corbado Connect architecture. Understand how it seamlessly integrates with your existing systems for passkey auth.

export const ArchitectureDiagram = () => {
  const visualize = false;
  const imageSrc = 'https://mintlify.s3.us-west-1.amazonaws.com/corbado-43/images/corbado-connect/architecture.webp';
  const [imageLoading, setImageLoading] = useState(true);
  const areas = [{
    id: '1',
    title: 'Your Environment',
    rect: {
      top: '1%',
      left: '16.5%',
      width: '5%',
      height: '5%'
    },
    text: "Your environment can be either cloud-based or on-premise. It is completely isolated from the Corbado environment."
  }, {
    id: '2',
    title: 'Your Web Application',
    rect: {
      top: '6.5%',
      left: '21.5%',
      width: '5%',
      height: '5%'
    },
    text: "This architecture diagram uses a web application as an example. Corbado Connect can be integrated into any type of application, including native apps for iOS and Android."
  }, {
    id: '3',
    title: 'Your Frontend',
    rect: {
      top: '11.5%',
      left: '18.5%',
      width: '5%',
      height: '5%'
    },
    text: "The Corbado Connect passkey solution primarily interacts with your frontend during the user sign-up and login processes. Other flows, such as passkey management, which would typically be included in a user profile, have been omitted for simplicity."
  }, {
    id: '4',
    title: 'User sign-up flow',
    rect: {
      top: '17%',
      left: '24.7%',
      width: '5%',
      height: '5%'
    },
    text: "The user sign-up flow enables your users to sign-up at your application and needs to be extended with <strong>Corbado Connect</strong> to enable passkey creation. Please refer to our <a href=\"/corbado-connect/flows/user-sign-up\">user sign-up</a> documentation."
  }, {
    id: '5',
    title: 'User login flow',
    rect: {
      top: '17%',
      left: '53.2%',
      width: '5%',
      height: '5%'
    },
    text: "The user login flow enables your users to login at your application and needs to be extended with <strong>Corbado Connect</strong> to enable passkey login. Please refer to our <a href=\"/corbado-connect/flows/login\">user login</a> documentation."
  }, {
    id: '6',
    title: 'Passkey UI',
    rect: {
      top: '46.5%',
      left: '25%',
      width: '5%',
      height: '5%'
    },
    text: "The Passkey UI includes all components related to the user interface and frontend logic required for creating and using passkeys. For web applications, you can use our pre-built <a href=\"/corbado-connect/web-ui-components/overview\">Corbado UI components</a>, while for native apps, our Corbado iOS & Android SDKs are available to fully implement the passkey UI. The passkey UI communicates with the Corbado Frontend API to fulfill its function."
  }, {
    id: '7',
    title: 'Your Backend',
    rect: {
      top: '81%',
      left: '41%',
      width: '5%',
      height: '5%'
    },
    text: "Your backend communicates with the Corbado Backend API, primarily for generating <a href=\"/corbado-connect/concepts/connect-token\">connectTokens</a>, which are essential for the <a href=\"/corbado-connect/web-ui-components/overview\">Corbado UI Components</a>. It's important to note that there are no changes required to your backend concerning user state management and route protection, as a new session is established in your system after passkey login."
  }, {
    id: '8',
    title: 'Your IdP/CIAM',
    rect: {
      top: '90.3%',
      left: '50.2%',
      width: '5%',
      height: '5%'
    },
    text: "Corbado Connect integrates a passkey layer into any existing authentication solution, allowing you to retain your current IdP (Identity Provider) or CIAM (Customer Identity & Access Management). Whether you use Amazon Cognito, Keycloak, or a fully custom authentication system built with open-source libraries, Corbado Connect can be seamlessly integrated."
  }, {
    id: '9',
    title: 'Corbado Environment',
    rect: {
      top: '1%',
      left: '88.2%',
      width: '5%',
      height: '5%'
    },
    text: "The Corbado Environment is entirely separate from your environment. Corbado Connect can be deployed in Corbado's public cloud (a shared AWS instance) or a private cloud (a dedicated AWS instance), based on regulatory and compliance needs. For more information, refer to the section on <a href=\"/corbado-connect/architecture/deployment\">deployment</a>."
  }, {
    id: '10',
    title: 'Corbado Frontend API',
    rect: {
      top: '15.5%',
      left: '91.5%',
      width: '5%',
      height: '5%'
    },
    text: "The Corbado Frontend API serves as the foundation for the Corbado UI Components. While it's possible to interact with the Corbado Frontend API directly, we don't recommend this approach due to the complexity of authentication processes like signup and login."
  }, {
    id: '11',
    title: 'Corbado Backend API',
    rect: {
      top: '49.2%',
      left: '91.3%',
      width: '5%',
      height: '5%'
    },
    text: "The Corbado Backend API provides the core functionality of Corbado's Authentication system and is utilized by both the Corbado Frontend API and your backend application. It enables you to perform essential operations such as managing users and their associated identifiers."
  }, {
    id: '12',
    title: 'Corbado User Database',
    rect: {
      top: '71.5%',
      left: '79.2%',
      width: '5%',
      height: '5%'
    },
    text: "While the primary user record is maintained in your IdP/CIAM, Corbado requires its own user record to link processes and data, such as passkeys."
  }, {
    id: '13',
    title: 'Corbado Actions',
    rect: {
      top: '71.5%',
      left: '92.7%',
      width: '5%',
      height: '5%'
    },
    text: "Actions are custom logic scripts written in JavaScript or TypeScript that execute at specific points within the Corbado Connect journey. They act as hooks, allowing you to deeply customize and extend Corbado Connect's functionality to fit your specific needs (including calling your backend). For more details, please refer to our section on <a href=\"/corbado-connect/architecture/actions\">Corbado Actions</a>."
  }, {
    id: '14',
    title: 'Passkey UI',
    rect: {
      top: '46.5%',
      left: '53.3%',
      width: '5%',
      height: '5%'
    },
    text: "The Passkey UI includes all components related to the user interface and frontend logic required for creating and using passkeys. For web applications, you can use our pre-built <a href=\"/corbado-connect/web-ui-components/overview\">Corbado UI components</a>, while for native apps, our Corbado iOS & Android SDKs are available to fully implement the passkey UI. The passkey UI communicates with the Corbado Frontend API to fulfill its function."
  }];
  const [activeArea, setActiveArea] = useState(null);
  const handleClick = useCallback(area => {
    setActiveArea(prev => prev && prev.id === area.id ? null : area);
  }, []);
  return <div style={{
    fontFamily: 'sans-serif',
    border: '2px solid #eee',
    borderRadius: '12px',
    overflow: 'hidden',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
  }}>
      <div style={{
    position: 'relative',
    display: 'block',
    minHeight: '200px'
  }}>
        {imageLoading && <>
                <style>
                {`
                    @keyframes spin {
                        0% { transform: rotate(0deg); }
                        100% { transform: rotate(360deg); }
                    }
                `}
                </style>
                <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    border: '4px solid #f3f3f3',
    borderTop: '4px solid #3498db',
    borderRadius: '50%',
    width: '40px',
    height: '40px',
    animation: 'spin 1s linear infinite'
  }}></div>
            </>}
        <img src={imageSrc} alt="Architecture Diagram" style={{
    display: imageLoading ? 'none' : 'block',
    width: '100%',
    margin: 0
  }} onLoad={() => setImageLoading(false)} />
        {!imageLoading && areas.map(area => <div key={area.id} title={area.title} style={{
    position: 'absolute',
    top: area.rect.top,
    left: area.rect.left,
    width: area.rect.width,
    height: area.rect.height,
    cursor: 'pointer',
    backgroundColor: visualize || activeArea === area ? 'rgba(0, 123, 255, 0.2)' : 'transparent',
    border: visualize || activeArea === area ? '2px solid rgba(0, 123, 255, 0.5)' : 'none',
    transition: 'background-color 0.2s, border 0.2s'
  }} onClick={() => handleClick(area)} />)}
      </div>
      <div style={{
    padding: '16px',
    backgroundColor: '#fff'
  }} id="architecture-explainer">
        {activeArea ? <div>
            <h4 style={{
    marginTop: 0,
    marginBottom: '8px'
  }}>{activeArea.title}</h4>
            <div style={{
    margin: 0
  }} dangerouslySetInnerHTML={{
    __html: activeArea.text
  }} />
          </div> : <div>
            <h4 style={{
    marginTop: 0,
    marginBottom: '8px'
  }}>Additional information</h4>
            <div style={{
    margin: 0
  }}>Click on a number to get additional information.</div>
          </div>}
      </div>
      <style>
        {`
            #architecture-explainer * {
              color: #000;
            }
        `}
      </style>
    </div>;
};

<Columns cols={3}>
  <Card href="https://cognito.cloud.corbado-demo.com">
    Try Demo
  </Card>

  <Card href="https://calendly.com/vincent-delitz">
    Talk to Adoption Engineer
  </Card>

  <Card href="https://www.corbado.com/passkeys/enterprise">
    Whitepaper
  </Card>
</Columns>

The architecture diagram below provides a simplified view of how an environment similar to yours might interact with the **Corbado Connect** environment. It introduces several Corbado system components and how they interact with different components of your system.

For a deeper understanding, we recommend starting with our sections on the [user sign-up](/corbado-connect/flows/user-sign-up) and [user login](/corbado-connect/flows/user-login) flows. Additionally, more detailed documentation, including sequence charts and endpoint information, is available in our integration guides, such as for [Amazon Cognito](/corbado-connect/integration/cognito).

<ArchitectureDiagram />