Merge pull request #24 from thisyahlen-deriv/thisyahlen/auth2-hook

chore: add useoauth2 hook

src/context/index.ts

@@ -1,2 +1,2 @@
 export { OAuth2Provider } from './auth-context';
-export { useOAuth2 } from './use-oauth2';
+export { useOAuth2Context } from './use-oauth2';

src/context/use-oauth2.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { OAuth2Context } from '../context/auth-context';
 
-export const useOAuth2 = () => {
+export const useOAuth2Context = () => {
     const context = useContext(OAuth2Context);
     if (!context) {
         throw new Error('useOAuth2 must be used within an OAuth2Provider');

src/hooks/index.ts

@@ -0,0 +1 @@
+export { useOAuth2 } from './useOAuth2';

src/hooks/useOAuth2.ts

@@ -0,0 +1,55 @@
+import { useEffect, useCallback } from 'react';
+import { getOAuthLogoutUrl, getOAuthOrigin } from '../constants/';
+
+type MessageEvent = {
+    data: 'logout_complete' | 'logout_error';
+    origin: string;
+};
+
+/**
+ * Custom hook to handle OAuth2 logout and redirection.
+ *
+ * @param {(oauthUrl: string) => Promise<void>} WSLogoutAndRedirect - Function to handle logout and redirection.
+ * @returns {{ OAuth2Logout: () => Promise<void> }} - Object containing the OAuth2Logout function.
+ */
+export const useOAuth2 = (WSLogoutAndRedirect: () => Promise<void>) => {
+    useEffect(() => {
+        const onMessage = async (event: MessageEvent) => {
+            const allowedOrigin = getOAuthOrigin();
+            if (allowedOrigin === event.origin) {
+                if (event.data === 'logout_complete') {
+                    WSLogoutAndRedirect();
+                } else {
+                    console.warn('Unexpected message received: ', event.data);
+                }
+            } else {
+                console.warn('Unexpected postmessage origin: ', event.origin);
+            }
+        };
+
+        window.addEventListener('message', onMessage);
+        return () => window.removeEventListener('message', onMessage);
+    }, [WSLogoutAndRedirect]);
+
+    const OAuth2Logout = useCallback(async () => {
+        let iframe: HTMLIFrameElement | null = document.getElementById('logout-iframe') as HTMLIFrameElement;
+        if (!iframe) {
+            iframe = document.createElement('iframe');
+            iframe.id = 'logout-iframe';
+            iframe.style.display = 'none';
+            document.body.appendChild(iframe);
+
+            setTimeout(() => {
+                WSLogoutAndRedirect();
+            }, 10000);
+        }
+
+        iframe.src = getOAuthLogoutUrl();
+
+        iframe.onerror = error => {
+            console.error('There has been a problem with the logout: ', error);
+        };
+    }, [WSLogoutAndRedirect]);
+
+    return { OAuth2Logout };
+};

src/index.ts

@@ -1 +1,2 @@
 export * from './context/';
+export * from './hooks/';