Allow passing the Auth0 context to the useAuth hook (#880)

Author: souyahia-monk

packages/network/src/auth/hooks.ts

@@ -1,5 +1,5 @@
-import { useAuth0 } from '@auth0/auth0-react';
-import { useCallback, useEffect } from 'react';
+import { Auth0ContextInterface, useAuth0 } from '@auth0/auth0-react';
+import { Context, useCallback, useEffect } from 'react';
 import { STORAGE_KEY_AUTH_TOKEN, useMonkAppState, useObjectMemo } from '@monkvision/common';
 
 /**
@@ -12,6 +12,10 @@ export interface UseAuthParams {
    * @default true
    */
   storeToken?: boolean;
+  /**
+   * Optional custom Auth0 context that will be passed through to the `useAuth0` hook.
+   */
+  context?: Context<Auth0ContextInterface>;
 }
 
 /**
@@ -43,7 +47,7 @@ const defaultOptions = {
  */
 export function useAuth(params?: UseAuthParams): MonkAuthHandle {
   const options = { ...defaultOptions, ...(params ?? {}) };
-  const { getAccessTokenWithPopup, logout } = useAuth0();
+  const { getAccessTokenWithPopup, logout } = useAuth0(params?.context);
   const { setAuthToken } = useMonkAppState();
 
   useEffect(() => {

packages/network/test/auth/hooks.test.ts

@@ -1,8 +1,9 @@
 import { STORAGE_KEY_AUTH_TOKEN, useMonkAppState } from '@monkvision/common';
-import { useAuth0 } from '@auth0/auth0-react';
+import { Auth0ContextInterface, useAuth0 } from '@auth0/auth0-react';
 import { act, waitFor } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useAuth } from '../../src';
+import { Context } from 'react';
 
 describe('Authentication hooks', () => {
   afterEach(() => {
@@ -116,5 +117,14 @@ describe('Authentication hooks', () => {
       unmount();
       (useAuth0 as jest.Mock).mockRestore();
     });
+
+    it('should pass the Auth0 context provided to the useAuth0 hook', async () => {
+      const context = { test: 'hello' } as unknown as Context<Auth0ContextInterface>;
+      const { unmount } = renderHook(useAuth, { initialProps: { context } });
+
+      expect(useAuth0).toHaveBeenCalledWith(context);
+
+      unmount();
+    });
   });
 });