feat(react): ✨ add useOn custom hook for onSignIn and onSignOut functions

Author: movinsilva

packages/react/src/components/SignIn/fragments/BasicAuth.tsx

@@ -72,7 +72,9 @@ const BasicAuth = ({
 
   return (
     <UISignIn.Paper className="asgardeo-basic-auth-paper">
-      <UISignIn.Typography title>{t(keys.login.login.heading)}</UISignIn.Typography>
+      <UISignIn.Typography title className="basic-auth-title">
+        {t(keys.login.login.heading)}
+      </UISignIn.Typography>
 
       {alert && (
         <UISignIn.Alert className="asgardeo-basic-auth-alert" {...alert?.alertType}>

packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx

@@ -29,7 +29,7 @@ import {SignIn as UISignIn} from '../../../oxygen-ui-react-auth-components';
 
 const images: {[key: string]: string} = {
   'Email OTP': emailSolid,
-  Facebook: facebook,
+  facebook: facebook,
   Github: github,
   Google: google,
   Microsoft: microsoft,

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

@@ -37,7 +37,9 @@ const useAuthentication = (): UseAuthentication => {
   const signOut: () => void = () => {
     signOutApiCall().then(() => {
       sessionStorage.clear();
-      window.location.reload();
+      if (contextValue.onSignOutRef.current) {
+        contextValue.onSignOutRef.current();
+      }
     });
   };
 

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

@@ -0,0 +1,44 @@
+/**
+ * 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 {useContext, useEffect} from 'react';
+import AsgardeoContext from '../contexts/asgardeo-context';
+import AuthContext from '../models/auth-context';
+import {Hooks, UseOnProps} from '../models/use-on';
+import {AsgardeoUIException} from '@asgardeo/js-ui-core';
+
+const useOn = (props: UseOnProps) => {
+  const {callback, event} = props;
+
+  const contextValue: AuthContext = useContext(AsgardeoContext);
+
+  useEffect(() => {
+    switch (event) {
+      case Hooks.SignIn:
+        contextValue.setOnSignIn(callback);
+        break;
+      case Hooks.SignOut:
+        contextValue.setOnSignOut(callback);
+        break;
+      default:
+        throw new AsgardeoUIException('REACT-USE_ON-UO-IV-01', 'Invalid event type provided.');
+    }
+  }, []);
+};
+
+export default useOn;

packages/react/src/index.ts

@@ -20,3 +20,4 @@ export * from './components/public-components';
 export * from './models/public-models';
 export {default as AsgardeoProvider} from './providers/AsgardeoProvider';
 export {default as useAuthentication} from './hooks/use-authentication';
+export {default as useOn} from './hooks/use-on';

packages/react/src/models/auth-context.ts

@@ -26,10 +26,13 @@ interface AuthContext {
   isBrandingLoading: boolean;
   isGlobalLoading: boolean;
   isTextLoading: boolean;
+  onSignOutRef: React.MutableRefObject<Function>;
   setAuthentication: () => void;
   setIsAuthLoading: (value: boolean) => void;
   setIsBrandingLoading: (value: boolean) => void;
   setIsTextLoading: (value: boolean) => void;
+  setOnSignIn: (response?: any) => void | Promise<void>;
+  setOnSignOut: (response?: any) => void | Promise<void>;
   user: MeAPIResponse;
 }
 

packages/react/src/models/public-models.ts

@@ -17,3 +17,4 @@
  */
 
 export type {UIAuthConfig} from '@asgardeo/js-ui-core';
+export {Hooks} from './use-on';

packages/react/src/models/use-on.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+export enum Hooks {
+  SignIn,
+  SignOut,
+}
+
+export interface UseOnProps {
+  /**
+   * The callback to be executed when the event is triggered.
+   */
+  callback: (response?: any) => void | Promise<void>;
+  /**
+   * The event to listen to.
+   */
+  event: Hooks;
+}

packages/react/src/providers/AsgardeoProvider.tsx

@@ -17,7 +17,7 @@
  */
 
 import {AuthClient, CryptoUtils, MeAPIResponse, Store, UIAuthClient, getProfileInformation} from '@asgardeo/js-ui-core';
-import {FC, PropsWithChildren, useCallback, useEffect, useMemo, useState} from 'react';
+import {FC, PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import BrandingPreferenceProvider from './BrandingPreferenceProvider';
 import I18nProvider from './I18nProvider';
 import AsgardeoContext from '../contexts/asgardeo-context';
@@ -52,6 +52,23 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
   const [isTextLoading, setIsTextLoading] = useState<boolean>(true);
   const [isAuthLoading, setIsAuthLoading] = useState<boolean>(false);
 
+  const onSignInRef: React.MutableRefObject<Function> = useRef<Function>();
+  const onSignOutRef: React.MutableRefObject<Function> = useRef<Function>();
+
+  const setOnSignIn: (newOnSignIn: Function) => void = useCallback(
+    (newOnSignIn: Function): void => {
+      onSignInRef.current = newOnSignIn;
+    },
+    [], // Add any dependencies here...
+  );
+
+  const setOnSignOut: (newOnSignOut: Function) => void = useCallback(
+    (newOnSignOut: Function): void => {
+      onSignOutRef.current = newOnSignOut;
+    },
+    [], // Add any dependencies here...
+  );
+
   const storeInstance: Store = store || new SessionStore();
 
   const spaUtils: CryptoUtils = new SPACryptoUtils();
@@ -64,14 +81,20 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
   const setAuthentication: () => void = useCallback((): void => {
     authClient.isAuthenticated().then((isAuth: boolean) => {
       setIsAuthenticated(isAuth);
-    });
 
-    authClient.getAccessToken().then((accessTokenFromClient: string) => {
-      if (accessTokenFromClient) {
-        setAccessToken(accessTokenFromClient);
+      if (isAuth) {
+        authClient.getAccessToken().then((accessTokenFromClient: string) => {
+          if (accessTokenFromClient) {
+            setAccessToken(accessTokenFromClient);
 
-        getProfileInformation().then((response: MeAPIResponse) => {
-          setUser(response);
+            getProfileInformation().then((response: MeAPIResponse) => {
+              setUser(response);
+            });
+
+            if (onSignInRef.current) {
+              onSignInRef.current();
+            }
+          }
         });
       }
     });
@@ -105,13 +128,27 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       isBrandingLoading,
       isGlobalLoading: isBrandingLoading || isTextLoading || isAuthLoading,
       isTextLoading,
+      onSignOutRef,
       setAuthentication,
       setIsAuthLoading,
       setIsBrandingLoading,
       setIsTextLoading,
+      setOnSignIn,
+      setOnSignOut,
       user,
     }),
-    [accessToken, config, isAuthLoading, isAuthenticated, isBrandingLoading, isTextLoading, setAuthentication, user],
+    [
+      accessToken,
+      config,
+      isAuthLoading,
+      isAuthenticated,
+      isBrandingLoading,
+      isTextLoading,
+      setAuthentication,
+      setOnSignIn,
+      setOnSignOut,
+      user,
+    ],
   );
 
   return (