docs/specs/authentication.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1081px" height="651px" viewBox="-0.5 -0.5 1081 651" content="&lt;mxfile&gt;&lt;diagram id=&quot;WOshqXSVd2VkRfcggtcB&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <path d="M 620 120 L 620 153.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 620 158.88 L 616.5 151.88 L 620 153.63 L 623.5 151.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="560" y="80" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 100px; margin-left: 561px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Secure Cookie
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="620" y="104" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Secure Cookie
                </text>
            </switch>
        </g>
        <path d="M 540 40 L 540.07 60 L 620.07 60 L 620.02 73.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 620 78.88 L 616.53 71.87 L 620.02 73.63 L 623.53 71.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="480" y="0" width="120" height="40" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 20px; margin-left: 481px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Email / Password
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="540" y="24" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Email / Password
                </text>
            </switch>
        </g>
        <path d="M 700 40 L 700.07 60 L 620.07 60 L 620.02 73.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 620 78.88 L 616.53 71.87 L 620.02 73.63 L 623.53 71.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="640" y="0" width="120" height="40" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 20px; margin-left: 641px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                OAuth Provider
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="700" y="24" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    OAuth Provider
                </text>
            </switch>
        </g>
        <path d="M 620.07 330 L 620.07 350 L 620.07 330 L 620.07 343.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 620.07 348.88 L 616.57 341.88 L 620.07 343.63 L 623.57 341.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="560" y="160" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 561px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Member
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="620" y="184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Member
                </text>
            </switch>
        </g>
        <path d="M 1020.07 330 L 1020.07 350 L 1020.07 330 L 1020.07 343.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 1020.07 348.88 L 1016.57 341.88 L 1020.07 343.63 L 1023.57 341.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="960" y="160" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 961px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                App
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1020" y="184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    App
                </text>
            </switch>
        </g>
        <path d="M 860 40 L 860.07 140 L 620.07 140 L 620.02 153.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 620 158.88 L 616.53 151.87 L 620.02 153.63 L 623.53 151.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="800" y="0" width="120" height="40" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 20px; margin-left: 801px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                JWT
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="860" y="24" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    JWT
                </text>
            </switch>
        </g>
        <path d="M 1020 40 L 1020 73.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 1020 78.88 L 1016.5 71.88 L 1020 73.63 L 1023.5 71.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="960" y="0" width="120" height="40" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 20px; margin-left: 961px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                AP Key
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1020" y="24" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    AP Key
                </text>
            </switch>
        </g>
        <path d="M 380 200 L 380 283.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 380 288.88 L 376.5 281.88 L 380 283.63 L 383.5 281.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 245px; margin-left: 380px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                Granted with
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="248" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Granted with
                </text>
            </switch>
        </g>
        <rect x="320" y="160" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 321px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Guest
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Guest
                </text>
            </switch>
        </g>
        <path d="M 410 390 L 410.07 475.07 L 740.07 475.07 L 740 553.63" fill="none" stroke="#2d7600" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 740 558.88 L 736.51 551.88 L 740 553.63 L 743.51 551.88 Z" fill="#2d7600" stroke="#2d7600" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="320" y="350" width="120" height="40" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 370px; margin-left: 321px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Public Scopes
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="374" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Public Scopes
                </text>
            </switch>
        </g>
        <path d="M 650 390 L 650.07 475.07 L 740.07 475.07 L 740.07 553.63" fill="none" stroke="#2d7600" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 740.07 558.88 L 736.57 551.88 L 740.07 553.63 L 743.57 551.88 Z" fill="#2d7600" stroke="#2d7600" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="560" y="350" width="120" height="40" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 370px; margin-left: 561px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Member Scopes
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="620" y="374" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Member Scopes
                </text>
            </switch>
        </g>
        <path d="M 1050 390 L 1050.07 630 L 806.37 630" fill="none" stroke="#2d7600" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 801.12 630 L 808.12 626.5 L 806.37 630 L 808.12 633.5 Z" fill="#2d7600" stroke="#2d7600" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="960" y="350" width="120" height="40" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 370px; margin-left: 961px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Custom Scopes
                                <br/>
                                <font style="font-size: 10px">
                                    (Defined on key creation)
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1020" y="374" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Custom Scopes...
                </text>
            </switch>
        </g>
        <rect x="440" y="560" width="120" height="40" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 580px; margin-left: 441px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Scope Validation
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="500" y="584" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Scope Validation
                </text>
            </switch>
        </g>
        <path d="M 620 390 L 620.07 430 L 500.07 430 L 500 553.63" fill="none" stroke="#001dbc" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 500 558.88 L 496.5 551.88 L 500 553.63 L 503.5 551.88 Z" fill="#001dbc" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 1020 390 L 1020.07 430 L 500.07 430 L 500 553.63" fill="none" stroke="#001dbc" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 500 558.88 L 496.5 551.88 L 500 553.63 L 503.5 551.88 Z" fill="#001dbc" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 380 390 L 380.07 430 L 500.07 430 L 500 553.63" fill="none" stroke="#001dbc" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 500 558.88 L 496.5 551.88 L 500 553.63 L 503.5 551.88 Z" fill="#001dbc" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="680" y="610" width="120" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 630px; margin-left: 681px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Database
                                <br/>
                                <font style="font-size: 9px">
                                    Each doc has permission
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="740" y="634" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Database...
                </text>
            </switch>
        </g>
        <rect x="680" y="560" width="120" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 580px; margin-left: 681px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Roles Validation
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="740" y="584" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Roles Validation
                </text>
            </switch>
        </g>
        <path d="M 60 120 L 60 153.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 60 158.88 L 56.5 151.88 L 60 153.63 L 63.5 151.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="80" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 100px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                Roles
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="104" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Roles
                </text>
            </switch>
        </g>
        <path d="M 60.07 200 L 60.07 220 L 60.07 190 L 60.07 203.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 60.07 208.88 L 56.57 201.88 L 60.07 203.63 L 63.57 201.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="160" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Wildcard
                                <br/>
                                ＊
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Wildcard...
                </text>
            </switch>
        </g>
        <path d="M 60 250 L 60.07 270 L 60.07 240 L 60.07 253.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 60.07 258.88 L 56.57 251.88 L 60.07 253.63 L 63.57 251.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="210" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 230px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Guset
                                <br/>
                                guests
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="234" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Guset...
                </text>
            </switch>
        </g>
        <path d="M 60 300 L 60 303.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 60 308.88 L 56.5 301.88 L 60 303.63 L 63.5 301.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="260" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 280px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Member
                                <br/>
                                users
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="284" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Member...
                </text>
            </switch>
        </g>
        <path d="M 60 350 L 60 353.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 60 358.88 L 56.5 351.88 L 60 353.63 L 63.5 351.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="310" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                App
                                <br/>
                                role:app
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="334" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    App...
                </text>
            </switch>
        </g>
        <rect x="0" y="360" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 380px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                User ID
                                <br/>
                                user:[ID]
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="384" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    User ID...
                </text>
            </switch>
        </g>
        <path d="M 60.07 450 L 60.07 470 L 60.07 440 L 60.07 453.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 60.07 458.88 L 56.57 451.88 L 60.07 453.63 L 63.57 451.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="410" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 430px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Team ID
                                <br/>
                                team:[ID]
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="434" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Team ID...
                </text>
            </switch>
        </g>
        <path d="M 60.07 500 L 60.07 520 L 60.07 490 L 60.07 503.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 60.07 508.88 L 56.57 501.88 L 60.07 503.63 L 63.57 501.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="0" y="460" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 480px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Team ID + Role
                                <br/>
                                team:[ID]/[ROLE]
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="484" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Team ID + Role...
                </text>
            </switch>
        </g>
        <rect x="0" y="510" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 530px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Member ID
                                <br/>
                                member:[ID]
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="60" y="534" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Member ID...
                </text>
            </switch>
        </g>
        <rect x="440" y="610" width="120" height="40" fill="#0050ef" stroke="#001dbc" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 630px; margin-left: 441px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Endpoints
                                <br/>
                                <font style="font-size: 9px">
                                    Each endpoint has 1 scope
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="500" y="634" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Endpoints...
                </text>
            </switch>
        </g>
        <path d="M 200 120 L 200 153.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 200 158.88 L 196.5 151.88 L 200 153.63 L 203.5 151.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="140" y="80" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 100px; margin-left: 141px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">
                                Scopes
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="200" y="104" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle" font-weight="bold">
                    Scopes
                </text>
            </switch>
        </g>
        <path d="M 200.07 200 L 200.07 220 L 200.07 190 L 200.07 203.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 200.07 208.88 L 196.57 201.88 L 200.07 203.63 L 203.57 201.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="140" y="160" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 180px; margin-left: 141px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                public
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="200" y="184" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    public
                </text>
            </switch>
        </g>
        <path d="M 200.07 250 L 200.07 270 L 200.07 240 L 200.07 253.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 200.07 258.88 L 196.57 251.88 L 200.07 253.63 L 203.57 251.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="140" y="210" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 230px; margin-left: 141px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                account
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="200" y="234" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    account
                </text>
            </switch>
        </g>
        <path d="M 200.07 300 L 200.07 320 L 200.07 290 L 200.07 303.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 200.07 308.88 L 196.57 301.88 L 200.07 303.63 L 203.57 301.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="140" y="260" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 280px; margin-left: 141px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                files.read
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="200" y="284" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    files.read
                </text>
            </switch>
        </g>
        <rect x="140" y="310" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 141px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                files.write
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="200" y="334" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    files.write
                </text>
            </switch>
        </g>
        <rect x="140" y="360" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 380px; margin-left: 141px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    ...
                                </b>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="200" y="384" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    ...
                </text>
            </switch>
        </g>
        <path d="M 380 330 L 380 343.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 380 348.88 L 376.5 341.88 L 380 343.63 L 383.5 341.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="320" y="290" width="120" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 310px; margin-left: 321px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Guest Role
                                <br/>
                                (only)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="314" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Guest Role...
                </text>
            </switch>
        </g>
        <rect x="560" y="290" width="120" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 310px; margin-left: 561px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Member / User / Team Roles
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="620" y="314" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Member / User / Team...
                </text>
            </switch>
        </g>
        <path d="M 620 200 L 620 283.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 620 288.88 L 616.5 281.88 L 620 283.63 L 623.5 281.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 239px; margin-left: 618px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                Granted with
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="618" y="243" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Granted with
                </text>
            </switch>
        </g>
        <rect x="960" y="290" width="120" height="40" fill="#60a917" stroke="#2d7600" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 310px; margin-left: 961px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                No Role Base
                                <br/>
                                Authentication
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1020" y="314" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    No Role Base...
                </text>
            </switch>
        </g>
        <path d="M 1020 200 L 1020 283.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 1020 288.88 L 1016.5 281.88 L 1020 283.63 L 1023.5 281.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 235px; margin-left: 1022px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">
                                Granted with
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1022" y="239" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    Granted with
                </text>
            </switch>
        </g>
        <path d="M 380 40 L 380.07 60 L 620.07 60 L 620.02 73.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 620 78.88 L 616.53 71.87 L 620.02 73.63 L 623.53 71.89 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="320" y="0" width="120" height="40" fill="#d80073" stroke="#a50040" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 20px; margin-left: 321px;">
                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                Team Invite
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="24" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Team Invite
                </text>
            </switch>
        </g>
        <path d="M 1020 120 L 1020 153.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 1020 158.88 L 1016.5 151.88 L 1020 153.63 L 1023.5 151.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="960" y="80" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 100px; margin-left: 961px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                HTTP Header
                                <br/>
                                X-Appwrite-Key
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1020" y="104" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    HTTP Header...
                </text>
            </switch>
        </g>
        <rect x="800" y="80" width="120" height="40" fill="#bac8d3" stroke="#23445d" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 100px; margin-left: 801px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                HTTP Header
                                <br/>
                                X-Appwrite-JWT
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="860" y="104" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    HTTP Header...
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Viewer does not support full SVG 1.1
            </text>
        </a>
    </switch>
</svg>