chore: new hosted auth handler (#9045)

https://linear.app/unleash/issue/2-3074/add-sign-in-with-google-to-our-hosted-instances-when-only-password-is

https://linear.app/unleash/issue/2-3078/allow-viewer-access-from-auth-app-for-payg

Adds support for a new unified hosted auth handler.

This new auth handler provides a Google sign in option in case you don't
have an SSO provider configured. It also provides a way for auth-app to
sign in with Unleash's read-only user for Pro and Enterprise PAYG
instances.

Check the PR comments for more details.

frontend/src/component/admin/auth/AuthSettings.tsx

@@ -1,4 +1,4 @@
-import { Alert, Tab, Tabs } from '@mui/material';
+import { Tab, Tabs } from '@mui/material';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -15,7 +15,6 @@ import { TabPanel } from 'component/common/TabNav/TabPanel/TabPanel';
 import { usePageTitle } from 'hooks/usePageTitle';
 
 export const AuthSettings = () => {
-    const { authenticationType } = useUiConfig().uiConfig;
     const { uiConfig, isEnterprise } = useUiConfig();
 
     const tabs = [
@@ -35,17 +34,14 @@ export const AuthSettings = () => {
             label: 'Google',
             component: <GoogleAuth />,
         },
+        {
+            label: 'SCIM',
+            component: <ScimSettings />,
+        },
     ].filter(
         (item) => uiConfig.flags?.googleAuthEnabled || item.label !== 'Google',
     );
 
-    if (isEnterprise()) {
-        tabs.push({
-            label: 'SCIM',
-            component: <ScimSettings />,
-        });
-    }
-
     const [activeTab, setActiveTab] = useState(0);
     usePageTitle(`Single sign-on: ${tabs[activeTab].label}`);
 
@@ -56,7 +52,7 @@ export const AuthSettings = () => {
                     withTabs
                     header={
                         <ConditionallyRender
-                            condition={authenticationType === 'enterprise'}
+                            condition={isEnterprise()}
                             show={
                                 <Tabs
                                     value={activeTab}
@@ -85,41 +81,7 @@ export const AuthSettings = () => {
                     }
                 >
                     <ConditionallyRender
-                        condition={authenticationType === 'open-source'}
-                        show={<PremiumFeature feature='sso' />}
-                    />
-                    <ConditionallyRender
-                        condition={authenticationType === 'demo'}
-                        show={
-                            <Alert severity='warning'>
-                                You are running Unleash in demo mode. You have
-                                to use the Enterprise edition in order configure
-                                Single Sign-on.
-                            </Alert>
-                        }
-                    />
-                    <ConditionallyRender
-                        condition={authenticationType === 'custom'}
-                        show={
-                            <Alert severity='warning'>
-                                You have decided to use custom authentication
-                                type. You have to use the Enterprise edition in
-                                order configure Single Sign-on from the user
-                                interface.
-                            </Alert>
-                        }
-                    />
-                    <ConditionallyRender
-                        condition={authenticationType === 'hosted'}
-                        show={
-                            <Alert severity='info'>
-                                Your Unleash instance is managed by the Unleash
-                                team.
-                            </Alert>
-                        }
-                    />
-                    <ConditionallyRender
-                        condition={authenticationType === 'enterprise'}
+                        condition={isEnterprise()}
                         show={
                             <div>
                                 {tabs.map((tab, index) => (
@@ -133,6 +95,7 @@ export const AuthSettings = () => {
                                 ))}
                             </div>
                         }
+                        elseShow={<PremiumFeature feature='sso' />}
                     />
                 </PageContent>
             </PermissionGuard>

src/lib/types/experimental.ts

@@ -61,7 +61,8 @@ export type IFlagKey =
     | 'streaming'
     | 'etagVariant'
     | 'oidcRedirect'
-    | 'deltaApi';
+    | 'deltaApi'
+    | 'newHostedAuthHandler';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -290,6 +291,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_DELTA_API,
         false,
     ),
+    newHostedAuthHandler: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_NEW_HOSTED_AUTH_HANDLER,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/lib/types/option.ts

@@ -54,7 +54,13 @@ export interface IVersionOption {
 export enum IAuthType {
     OPEN_SOURCE = 'open-source',
     DEMO = 'demo',
+    /**
+     * Self-hosted by the customer. Should eventually be renamed to better reflect this.
+     */
     ENTERPRISE = 'enterprise',
+    /**
+     * Hosted by Unleash.
+     */
     HOSTED = 'hosted',
     CUSTOM = 'custom',
     NONE = 'none',