feat(react): add providers & custom hooks

packages/core/src/branding/get-branding.ts

@@ -31,7 +31,7 @@ import GetBrandingProps from '../models/get-branding-props';
  * @returns {Promise<Branding>} A promise that resolves with the merged branding properties.
  */
 const getBranding = async (props: GetBrandingProps): Promise<Branding> => {
-  const {customization, merged} = props;
+  const {branding, merged} = props;
   let mergedBranding: Branding;
 
   /**
@@ -46,12 +46,12 @@ const getBranding = async (props: GetBrandingProps): Promise<Branding> => {
     }
 
     if (brandingFromConsole?.preference?.configs?.isBrandingEnabled) {
-      mergedBranding = merge(DEFAULT_BRANDING, brandingFromConsole ?? {}, customization ?? {});
+      mergedBranding = merge(DEFAULT_BRANDING, brandingFromConsole ?? {}, branding ?? {});
     } else {
-      mergedBranding = merge(DEFAULT_BRANDING, customization ?? {});
+      mergedBranding = merge(DEFAULT_BRANDING, branding ?? {});
     }
   } else {
-    mergedBranding = merge(merged, customization ?? {});
+    mergedBranding = merge(merged, branding ?? {});
   }
 
   return mergedBranding;

packages/core/src/i18n/get-localization.ts

@@ -16,11 +16,14 @@
  * under the License.
  */
 
+import {AuthClientConfig} from '@asgardeo/auth-js';
 import merge from 'lodash.merge';
 import {TextObject} from './screens/model';
 import getBrandingPreferenceText from '../api/get-branding-preference-text';
 import {AuthClient} from '../auth-client';
 import AsgardeoUIException from '../exception';
+import {UIAuthConfig} from '../models/auth-config';
+import {BrandingPreferenceTypes} from '../models/branding-api-response';
 import {BrandingPreferenceTextAPIResponse} from '../models/branding-text-api-response';
 import GetLocalizationProps from '../models/get-localization-props';
 
@@ -31,20 +34,22 @@ import GetLocalizationProps from '../models/get-localization-props';
  * @returns {Promise<Customization>} A promise that resolves with the merged branding properties.
  */
 const getLocalization = async (props: GetLocalizationProps): Promise<TextObject> => {
-  const {componentCustomization, locale, providerCustomization, screen} = props;
+  const {componentTextOverrides, locale, providerTextOverrides, screen} = props;
 
   const module: TextObject = await import(`./screens/${screen}/${locale}.ts`);
 
   let textFromConsoleBranding: BrandingPreferenceTextAPIResponse;
 
+  const configData: AuthClientConfig<UIAuthConfig> = await AuthClient.getInstance().getDataLayer().getConfigData();
+
   try {
-    if ((await AuthClient.getInstance().getDataLayer().getConfigData()).enableConsoleTextBranding ?? true) {
-      textFromConsoleBranding = await getBrandingPreferenceText(
+    if (configData.enableConsoleTextBranding ?? true) {
+      textFromConsoleBranding = await getBrandingPreferenceText({
         locale,
-        providerCustomization.name,
+        name: configData.name ?? 'carbon.super',
         screen,
-        providerCustomization.type,
-      );
+        type: configData.type ?? BrandingPreferenceTypes.Org,
+      });
     }
   } catch (error) {
     throw new AsgardeoUIException(
@@ -69,11 +74,11 @@ const getLocalization = async (props: GetLocalizationProps): Promise<TextObject>
     /**
      * PRIORITY 02: Text from provider customization
      */
-    providerCustomization?.preference?.text?.[locale]?.[screen] ?? {},
+    providerTextOverrides?.[locale]?.[screen] ?? {},
     /**
      * PRIORITY 01: Text from component customization
      */
-    componentCustomization?.preference?.text?.[locale]?.[screen] ?? {},
+    componentTextOverrides?.[locale]?.[screen] ?? {},
   );
 
   return mergedText;

packages/core/src/models/auth-config.ts

@@ -17,6 +17,7 @@
  */
 
 import {AsgardeoAuthClient, AuthClientConfig} from '@asgardeo/auth-js';
+import {BrandingPreferenceTypes} from './branding-api-response';
 
 /**
  * Interface for the configuration extension from the AuthClientConfig of '@asgardeo/auth-js'.
@@ -39,16 +40,7 @@ interface AuthClientConfigExtension {
   /**
    * Type to filter the retrieval of customizations.
    */
-  type?: OrgType;
-}
-
-/**
- * Enum for the organization type.
- */
-export enum OrgType {
-  App = 'APP',
-  Custom = 'CUSTOM',
-  Org = 'ORG',
+  type?: BrandingPreferenceTypes;
 }
 
 /**

packages/core/src/models/branding.ts

@@ -25,6 +25,8 @@ import {TextPreference} from '../i18n/screens/model';
  */
 export type BrandingPreferenceText = Record<string, TextPreference>;
 
+export type BrandingPreferenceTextProps = RecursivePartial<BrandingPreferenceText>;
+
 interface BrandingPreferenceWithText extends BrandingPreference {
   text?: BrandingPreferenceText;
 }

packages/core/src/models/get-branding-props.ts

@@ -25,7 +25,7 @@ interface GetBrandingProps {
   /**
    * Customization prop passed to the component/provider.
    */
-  customization?: BrandingProps;
+  branding?: BrandingProps;
   /**
    * Merged customization object.
    */

packages/core/src/models/get-localization-props.ts

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import {BrandingProps} from './branding';
+import {BrandingPreferenceTextProps} from './branding';
 import {ScreenType} from './screen-type';
 
 /**
@@ -26,15 +26,15 @@ interface GetLocalizationProps {
   /**
    * Customiztion prop passed to the component
    */
-  componentCustomization?: BrandingProps;
+  componentTextOverrides?: BrandingPreferenceTextProps;
   /**
    * Locale to filter the retrieval of localization.
    */
   locale: string;
   /**
    * Customization prop passed to the provider
    */
-  providerCustomization?: BrandingProps;
+  providerTextOverrides?: BrandingPreferenceTextProps;
   /**
    * Screen to filter the retrieval of localization.
    */

packages/react/.eslintrc.cjs

@@ -32,4 +32,7 @@ module.exports = {
     project: [path.resolve(__dirname, 'tsconfig.lib.json'), path.resolve(__dirname, 'tsconfig.eslint.json')],
   },
   plugins: ['@wso2'],
+  rules: {
+    'class-methods-use-this': 'off',
+  },
 };

packages/react/package.json

@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
+    "@types/randombytes": "^2.0.3",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?fa0b844715320a3953d6d055997c0770f8695082",
@@ -46,12 +47,17 @@
     "sass": "^1.75.0",
     "stylelint": "15.1.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
+    "typescript": "5.1.6"
   },
   "dependencies": {
     "@asgardeo/js-ui-core": "*",
     "@oxygen-ui/react": "^1.11.0",
-    "clsx": "^2.1.1"
+    "base64url": "^3.0.1",
+    "buffer": "^6.0.3",
+    "clsx": "^2.1.1",
+    "fast-sha256": "^1.3.0",
+    "jose": "^5.3.0",
+    "randombytes": "^2.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

packages/react/src/contexts/asgardeo-context.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Context, createContext} from 'react';
+import AuthContext from '../models/auth-context';
+
+const AsgardeoContext: Context<AuthContext> = createContext<AuthContext>(undefined);
+
+export default AsgardeoContext;

packages/react/src/contexts/branding-preference-context.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {BrandingProps} from '@asgardeo/js-ui-core';
+import {Context, createContext} from 'react';
+
+const BrandingPreferenceContext: Context<BrandingProps> = createContext<BrandingProps>(undefined);
+
+export default BrandingPreferenceContext;

packages/react/src/contexts/i18n-context.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Context, createContext} from 'react';
+import {I18n} from '../models/i18n';
+
+const I18nContext: Context<I18n> = createContext<I18n>(undefined);
+
+export default I18nContext;

packages/react/src/hooks/use-authentication.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {signOut as signOutApiCall} from '@asgardeo/js-ui-core';
+import {useContext} from 'react';
+import AsgardeoContext from '../contexts/asgardeo-context';
+import AuthContext from '../models/auth-context';
+import UseAuthentication from '../models/use-authentication';
+
+/**
+ * `useAuthentication` is a custom hook that provides access to the authentication context.
+ * It returns an object containing the current user, the authentication status, the access token, and a sign out function.
+ *
+ * @returns {UseAuthentication} An object containing the current user (`user`), the authentication status (`isAuthenticated`),
+ * the access token (`accessToken`), and a sign out function (`signOut`).
+ */
+const useAuthentication = (): UseAuthentication => {
+  const contextValue: AuthContext = useContext(AsgardeoContext);
+
+  const {user, isAuthenticated, accessToken} = contextValue;
+
+  const signOut: () => void = () => {
+    signOutApiCall();
+    sessionStorage.clear();
+    window.location.reload();
+  };
+
+  return {accessToken, isAuthenticated, signOut, user};
+};
+
+export default useAuthentication;

packages/react/src/hooks/use-config.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {UIAuthConfig} from '@asgardeo/js-ui-core';
+import {useContext} from 'react';
+import AsgardeoContext from '../contexts/asgardeo-context';
+import UseConfig from '../models/use-config';
+
+/**
+ * Custom hook to access the authentication configuration from the AsgardeoProviderContext.
+ * @returns An object containing the authentication configuration.
+ */
+export const useConfig = (): UseConfig => {
+  const {config} = useContext(AsgardeoContext) as {
+    config: UIAuthConfig;
+  };
+
+  return {config};
+};