PRD-2611: ODIC login

i18n/mobile/auth/en.json

@@ -11,11 +11,14 @@
         "BUTTON_SIGN_IN": "Sign In"
       },
       "GOOGLE_FORM": {
-        "BUTTON_CONTINUE_WITH_GOOGLE": "Continue with Google",
-        "OAUTH_WEB_VIEW_MODAL": {
-          "BUTTON_CLOSE": "Close",
-          "TEXT_THIS_SIGN_IN_METHOD_IS_UNAVAILABLE": "This sign-in method is unavailable. Please use another option to continue."
-        }
+        "BUTTON_CONTINUE_WITH_GOOGLE": "Continue with Google"
+      },
+      "OIDC_FORM": {
+        "BUTTON_CONTINUE_WITH": "Continue with {{provider}}"
+      },
+      "OAUTH_WEB_VIEW_MODAL": {
+        "BUTTON_CLOSE": "Close",
+        "TEXT_THIS_SIGN_IN_METHOD_IS_UNAVAILABLE": "This sign-in method is unavailable. Please use another option to continue."
       }
     }
   }

libs/mobile/auth/features/email-sign-in-form/src/lib/component.tsx

@@ -17,7 +17,7 @@ import { EmailFormSchema } from './forms';
 interface EmailSignInFormProps {
   onSuccess: () => void;
   onApiUrlChange?: (url: string) => void;
-  setOauthProviders: (providers: Array<Provider>) => void;
+  setOauthProviders: (providers: Partial<Record<Provider, string>>) => void;
 }
 
 export function EmailSignInForm({ onSuccess, onApiUrlChange, setOauthProviders }: EmailSignInFormProps): ReactElement {
@@ -61,7 +61,7 @@ export function EmailSignInForm({ onSuccess, onApiUrlChange, setOauthProviders }
   useEffect(() => {
     setValue('url', query, { shouldValidate: true });
     onApiUrlChange?.(query);
-    setOauthProviders([]);
+    setOauthProviders({});
   }, [query]);
 
   useEffect(() => {
@@ -71,7 +71,7 @@ export function EmailSignInForm({ onSuccess, onApiUrlChange, setOauthProviders }
 
         if (res?.name && res?.version) {
           appStorageService.apiUrl.set(debouncedQuery);
-          setOauthProviders(Object.values(res.oauth.providers));
+          setOauthProviders(res.oauth.providers);
         }
       }
     };

libs/mobile/auth/features/google-sign-in-form/src/lib/component.tsx

@@ -1,8 +1,9 @@
 import { useTranslation } from '@ronas-it/react-native-common-modules/i18n';
 import { Fragment, ReactElement, useState } from 'react';
+import { OauthWebView } from '@open-webui-react-native/mobile/auth/features/oauth-web-view';
 import { AppButton } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+import { Provider } from '@open-webui-react-native/shared/data-access/api';
 import { authState$ } from '@open-webui-react-native/shared/data-access/auth';
-import { OauthWebViewModal } from './components';
 
 interface GoogleSignInFormProps {
   onSuccess?: () => void;
@@ -34,10 +35,12 @@ export function GoogleSignInForm({ onSuccess }: GoogleSignInFormProps): ReactEle
         iconName='googleLogo'
         onPress={handleSignInWithGooglePress}
       />
-      <OauthWebViewModal
+      <OauthWebView
         isVisible={isModalVisible}
+        provider={Provider.GOOGLE}
         onClose={handleCloseModal}
-        onGetToken={handleToken} />
+        onGetToken={handleToken}
+      />
     </Fragment>
   );
 }

libs/mobile/auth/features/oauth-web-view/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/mobile/auth/features/oauth-web-view/README.md

@@ -0,0 +1,7 @@
+# mobile/auth/features/oauth-web-view
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test mobile/auth/features/oauth-web-view` to execute the unit tests via [Jest](https://jestjs.io).

libs/mobile/auth/features/oauth-web-view/eslint.config.cjs

@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/mobile/auth/features/oauth-web-view/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "mobile/auth/features/oauth-web-view",
+  "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/mobile/auth/features/oauth-web-view/src",
+  "projectType": "library",
+  "tags": ["app:mobile", "scope:auth", "type:features"],
+  "// targets": "to see all targets run: nx show project mobile/auth/features/oauth-web-view --web",
+  "targets": {}
+}

libs/mobile/auth/features/oauth-web-view/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

libs/mobile/auth/features/google-sign-in-form/src/lib/components/oauth-web-view-modal/component.tsx → libs/mobile/auth/features/oauth-web-view/src/lib/component.tsx

@@ -10,20 +10,21 @@ import {
   FullScreenModal,
   View,
 } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
-import { authService } from '@open-webui-react-native/shared/data-access/api';
+import { authService, Provider } from '@open-webui-react-native/shared/data-access/api';
 import { appStorageService } from '@open-webui-react-native/shared/data-access/storage';
 import { getApiUrl, getHost } from '@open-webui-react-native/shared/utils/config';
 import { ToastService } from '@open-webui-react-native/shared/utils/toast-service';
 import { mobileUserAgent, tokenCaptureScript } from './script';
 
-export type OauthWebViewModalProps = {
+export type OauthWebViewProps = {
   isVisible: boolean;
+  provider: Provider;
   onClose: () => void;
   onGetToken: (token: string) => void;
 };
 
-export function OauthWebViewModal({ isVisible, onClose, onGetToken }: OauthWebViewModalProps): ReactElement {
-  const translate = useTranslation('AUTH.SIGN_IN.GOOGLE_FORM.OAUTH_WEB_VIEW_MODAL');
+export function OauthWebView({ isVisible, provider, onClose, onGetToken }: OauthWebViewProps): ReactElement {
+  const translate = useTranslation('AUTH.SIGN_IN.OAUTH_WEB_VIEW_MODAL');
   const webViewRef = useRef<WebView>(null);
   const isTokenCaptured = useRef(false);
 
@@ -87,7 +88,7 @@ export function OauthWebViewModal({ isVisible, onClose, onGetToken }: OauthWebVi
           {isVisible && (
             <WebView
               ref={webViewRef}
-              source={{ uri: `${apiUrl}/oauth/google/login` }}
+              source={{ uri: `${apiUrl}/oauth/${provider}/login` }}
               userAgent={mobileUserAgent}
               incognito
               thirdPartyCookiesEnabled

libs/mobile/auth/features/oauth-web-view/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../../../tsconfig.base.json"
+}

libs/mobile/auth/features/oauth-web-view/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../../dist/out-tsc",
+    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

libs/mobile/auth/features/odic-sign-in/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/mobile/auth/features/odic-sign-in/README.md

@@ -0,0 +1,7 @@
+# mobile-auth-features-odic-sign-in
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test mobile-auth-features-odic-sign-in` to execute the unit tests via [Jest](https://jestjs.io).

libs/mobile/auth/features/odic-sign-in/eslint.config.cjs

@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../../../../eslint.config.cjs');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/mobile/auth/features/odic-sign-in/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "mobile-auth-features-odic-sign-in",
+  "$schema": "../../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/mobile/auth/features/odic-sign-in/src",
+  "projectType": "library",
+  "tags": ["app:mobile", "scope:auth", "type:features"],
+  "// targets": "to see all targets run: nx show project mobile-auth-features-odic-sign-in --web",
+  "targets": {}
+}

libs/mobile/auth/features/odic-sign-in/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

libs/mobile/auth/features/odic-sign-in/src/lib/component.tsx

@@ -0,0 +1,44 @@
+import { useTranslation } from '@ronas-it/react-native-common-modules/i18n';
+import { Fragment, ReactElement, useState } from 'react';
+import { OauthWebView } from '@open-webui-react-native/mobile/auth/features/oauth-web-view';
+import { AppButton } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
+import { Provider } from '@open-webui-react-native/shared/data-access/api';
+import { authState$ } from '@open-webui-react-native/shared/data-access/auth';
+
+interface OdicSignInProps {
+  // Display name from /api/config (OAUTH_PROVIDER_NAME), e.g. "Test SSO" / "Keycloak".
+  providerName: string;
+  onSuccess?: () => void;
+}
+
+export function OdicSignIn({ providerName, onSuccess }: OdicSignInProps): ReactElement {
+  const translate = useTranslation('AUTH.SIGN_IN.OIDC_FORM');
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const handleSignInPress = async (): Promise<void> => setIsModalVisible(true);
+
+  const handleCloseModal = (): void => setIsModalVisible(false);
+
+  const handleToken = async (token: string): Promise<void> => {
+    authState$.signIn(token);
+    // We need to delay to ensure the modal screen is closed before resetting navigation.
+    await new Promise<void>((resolve) => {
+      handleCloseModal();
+      setTimeout(() => resolve(), 100);
+    });
+    onSuccess?.();
+  };
+
+  return (
+    <Fragment>
+      <AppButton text={translate('BUTTON_CONTINUE_WITH', { provider: providerName })} onPress={handleSignInPress} />
+      <OauthWebView
+        isVisible={isModalVisible}
+        provider={Provider.OIDC}
+        onClose={handleCloseModal}
+        onGetToken={handleToken}
+      />
+    </Fragment>
+  );
+}

libs/mobile/auth/features/odic-sign-in/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './component';

libs/mobile/auth/features/odic-sign-in/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../../../tsconfig.base.json"
+}

libs/mobile/auth/features/odic-sign-in/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../../dist/out-tsc",
+    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

libs/mobile/auth/features/sign-in/src/lib/component.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from '@ronas-it/react-native-common-modules/i18n';
 import { ReactElement, useState } from 'react';
 import { EmailSignInForm } from '@open-webui-react-native/mobile/auth/features/email-sign-in-form';
 import { GoogleSignInForm } from '@open-webui-react-native/mobile/auth/features/google-sign-in-form';
+import { OdicSignIn } from '@open-webui-react-native/mobile/auth/features/odic-sign-in';
 import { AppText, View } from '@open-webui-react-native/mobile/shared/ui/ui-kit';
 import { Provider } from '@open-webui-react-native/shared/data-access/api';
 import { isTestApiUrl } from '@open-webui-react-native/shared/utils/config';
@@ -15,9 +16,10 @@ export function SignIn(props: SignInProps): ReactElement {
   const { onSuccess } = props;
   const translate = useTranslation('AUTH.SIGN_IN');
   const [apiUrlInput, setApiUrlInput] = useState<string>();
-  const [providers, setProviders] = useState<Array<Provider>>([]);
+  const [providers, setProviders] = useState<Partial<Record<Provider, string>>>({});
 
-  const showGoogleSignIn = !isTestApiUrl(apiUrlInput) && providers.includes(Provider.GOOGLE);
+  const showGoogleSignIn = !isTestApiUrl(apiUrlInput) && Provider.GOOGLE in providers;
+  const showOidcSignIn = !isTestApiUrl(apiUrlInput) && Provider.OIDC in providers;
 
   const handleSuccess = (): void => {
     onSuccess();
@@ -41,6 +43,11 @@ export function SignIn(props: SignInProps): ReactElement {
           <GoogleSignInForm onSuccess={handleSuccess} />
         </View>
       )}
+      {showOidcSignIn && (
+        <View className='pt-40'>
+          <OdicSignIn providerName={providers[Provider.OIDC] || 'SSO'} onSuccess={handleSuccess} />
+        </View>
+      )}
     </View>
   );
 }

libs/shared/data-access/api/src/lib/app-configuration/enums/provider.ts

@@ -3,4 +3,5 @@ export enum Provider {
   MICROSOFT = 'microsoft',
   GITHUB = 'github',
   FEISHU = 'feishu',
+  OIDC = 'oidc',
 }

libs/shared/utils/config/src/get-api-url.ts

@@ -1,4 +1,5 @@
-
+/* eslint-disable @nx/enforce-module-boundaries */
+
 import { appStorageService } from '@open-webui-react-native/shared/data-access/storage';
 import { appEnv } from '@open-webui-react-native/shared/utils/app-env';