Merl 1698 include the viewer in use auth hook (#1744)

* Added viewer to useAuth with commonly used variables
wpengine · Jan 24, 2024 · e7745b8 · e7745b8
1 parent 664e32a
commit e7745b8
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 0 deletions.
diff --git a/.changeset/cuddly-readers-wave.md b/.changeset/cuddly-readers-wave.md
@@ -0,0 +1,5 @@
+---
+"@faustwp/core": patch
+---
+
+Exposes viewer data for use during the useAuth hook call.
diff --git a/packages/faustwp-core/src/hooks/useAuth.tsx b/packages/faustwp-core/src/hooks/useAuth.tsx
@@ -1,10 +1,12 @@
 import trim from 'lodash/trim.js';
 import defaults from 'lodash/defaults.js';
 import { useEffect, useState } from 'react';
+import { gql } from '@apollo/client';
 import {
   ensureAuthorization,
   EnsureAuthorizationOptions,
 } from '../auth/index.js';
+import { getApolloAuthClient } from '../client.js';
 
 type RedirectStrategyConfig = {
   strategy: 'redirect';
@@ -19,6 +21,26 @@ type LocalStrategyConfig = {
   skip?: boolean;
 };
 
+type ViewerType = {
+  name?: string;
+  username?: string;
+  capabilities?: string[];
+  databaseId?: number;
+  description?: string;
+  email?: string;
+  firstName?: string;
+  id?: number;
+  lastName?: string;
+  nickname?: string;
+  locale?: string;
+  registeredDate?: string;
+  slug?: string;
+  templates?: string[];
+  uri?: string;
+  url?: string;
+  userId?: number;
+};
+
 export type UseAuthConfig = RedirectStrategyConfig | LocalStrategyConfig;
 
 export function useAuth(_config?: UseAuthConfig) {
@@ -38,6 +60,7 @@ export function useAuth(_config?: UseAuthConfig) {
   const [isReady, setIsReady] = useState<boolean>(false);
   const [loginUrl, setLoginUrl] = useState<string | null>(null);
   const [called, setCalled] = useState<boolean>(false);
+  const [viewer, setViewer] = useState<ViewerType | null>(null);
 
   useEffect(() => {
     if (config.skip === true) {
@@ -114,9 +137,54 @@ export function useAuth(_config?: UseAuthConfig) {
     }, 200);
   }, [isReady, isAuthenticated, loginUrl, config]);
 
+  /**
+   * Expose viewer options to the toolbar if the user is authenticated.
+   */
+  useEffect(() => {
+    if (config.skip === true) {
+      return;
+    }
+
+    if (isAuthenticated !== true) {
+      return;
+    }
+
+    (async () => {
+      const client = getApolloAuthClient();
+
+      const { data } = await client.query({
+        query: gql`
+          query GetFaustViewer {
+            viewer {
+              name
+              username
+              capabilities
+              databaseId
+              description
+              email
+              firstName
+              id
+              lastName
+              nickname
+              locale
+              registeredDate
+              slug
+              templates
+              uri
+              url
+              userId
+            }
+          }
+        `,
+      });
+      setViewer(data.viewer as ViewerType | null);
+    })();
+  }, [isAuthenticated, config.skip]);
+
   return {
     isAuthenticated,
     isReady,
     loginUrl,
+    viewer,
   };
 }
diff --git a/packages/faustwp-core/tests/hooks/useAuth.test.ts b/packages/faustwp-core/tests/hooks/useAuth.test.ts
@@ -47,6 +47,21 @@ describe('useAuth hook', () => {
       status: 200,
       body: JSON.stringify({ accessToken: 'at', refreshToken: 'rt' }),
     });
+    fetchMock.get(`http://headless.local/index.php?graphql&query=query%20GetFaustViewer%20%7B%0A%20%20viewer%20%7B%0A%20%20%20%20name%0A%20%20%20%20username%0A%20%20%20%20capabilities%0A%20%20%20%20databaseId%0A%20%20%20%20description%0A%20%20%20%20email%0A%20%20%20%20firstName%0A%20%20%20%20id%0A%20%20%20%20lastName%0A%20%20%20%20nickname%0A%20%20%20%20locale%0A%20%20%20%20registeredDate%0A%20%20%20%20slug%0A%20%20%20%20templates%0A%20%20%20%20uri%0A%20%20%20%20url%0A%20%20%20%20userId%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D&operationName=GetFaustViewer&variables=%7B%7D`, {
+      status: 200,
+      body: JSON.stringify({
+        data: {
+          viewer: {
+            name: 'admin',
+            username: 'admin',
+            capabilities: ['administrator'],
+            databaseId: 1,
+            description: '',
+            email: '',
+          },
+        },
+      }),
+    });
 
     const { result, waitForNextUpdate } = renderHook(() => useAuth());
 
@@ -111,6 +126,21 @@ describe('useAuth hook', () => {
         refreshToken: 'rt',
       }),
     });
+    fetchMock.get(`http://headless.local/index.php?graphql&query=query%20GetFaustViewer%20%7B%0A%20%20viewer%20%7B%0A%20%20%20%20name%0A%20%20%20%20username%0A%20%20%20%20capabilities%0A%20%20%20%20databaseId%0A%20%20%20%20description%0A%20%20%20%20email%0A%20%20%20%20firstName%0A%20%20%20%20id%0A%20%20%20%20lastName%0A%20%20%20%20nickname%0A%20%20%20%20locale%0A%20%20%20%20registeredDate%0A%20%20%20%20slug%0A%20%20%20%20templates%0A%20%20%20%20uri%0A%20%20%20%20url%0A%20%20%20%20userId%0A%20%20%20%20__typename%0A%20%20%7D%0A%7D&operationName=GetFaustViewer&variables=%7B%7D`, {
+      status: 200,
+      body: JSON.stringify({
+        data: {
+          viewer: {
+            name: 'admin',
+            username: 'admin',
+            capabilities: ['administrator'],
+            databaseId: 1,
+            description: '',
+            email: '',
+          },
+        },
+      }),
+    });
 
     const { result, waitForNextUpdate } = renderHook(() => useAuth());
 
@@ -140,4 +170,10 @@ describe('useAuth hook', () => {
 
     fetchMock.restore();
   });
+
+  it('returns the viewer object', () => {
+    const { result } = renderHook(() => useAuth());
+    expect(result.current.viewer).toBeDefined();
+  });
+
 });