fix(toolkit): use correct hook for fetching auth code (#457)

* fix(toolkit): use correct hook for fetching auth code

* fix(toolkit): use correct hook for fetching auth code

* fix(toolkit): fix next issue

src/interfaces/coral_web/src/app/(auth)/auth/[strategy]/CompleteOauth.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+import { Text } from '@/components/Shared';
+import { useAuthConfig } from '@/hooks/authConfig';
+import { useSession } from '@/hooks/session';
+import { getQueryString } from '@/utils';
+
+/**
+ * @description This page handles callbacks from OAuth providers and forwards the request to the backend.
+ */
+const CompleteOauth: React.FC = () => {
+  const router = useRouter();
+  const params = useParams();
+  const search = useSearchParams();
+
+  const { oidcSSOMutation, googleSSOMutation } = useSession();
+  const redirect = getQueryString(search.get('redirect_uri'));
+  const code = getQueryString(search.get('code'));
+  const { loginStrategies: ssoLogins } = useAuthConfig();
+
+  const loginType = ssoLogins.find(
+    (login) => encodeURIComponent(login.strategy.toLowerCase()) == params.strategy
+  );
+
+  useEffect(() => {
+    if (!loginType || !code) {
+      return;
+    }
+
+    if (loginType.strategy.toLowerCase() === 'google') {
+      googleSSOMutation.mutate(
+        {
+          code,
+        },
+        {
+          onSuccess: () => {
+            router.push(redirect || '/');
+          },
+          onError: () => {
+            router.push('/login');
+          },
+        }
+      );
+      return;
+    }
+
+    oidcSSOMutation.mutate(
+      {
+        code,
+        strategy: loginType.strategy,
+      },
+      {
+        onSuccess: () => {
+          router.push(redirect || '/');
+        },
+        onError: () => {
+          router.push('/login');
+        },
+      }
+    );
+  }, [loginType]);
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <Text as="h1" styleAs="h3">
+        Logging in
+      </Text>
+    </div>
+  );
+};
+
+export default CompleteOauth;

src/interfaces/coral_web/src/app/(auth)/auth/[strategy]/page.tsx

@@ -1,72 +1,13 @@
-'use client';
-
 import { NextPage } from 'next';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { Suspense } from 'react';
 
-import { Text } from '@/components/Shared';
-import { useAuthConfig } from '@/hooks/authConfig';
-import { useSession } from '@/hooks/session';
-import { getQueryString } from '@/utils';
+import CompleteOauth from './CompleteOauth';
 
-/**
- * @description This page handles callbacks from OAuth providers and forwards the request to the backend.
- */
 const CompleteOauthPage: NextPage = () => {
-  const router = useRouter();
-  const params = useParams();
-  const { oidcSSOMutation, googleSSOMutation } = useSession();
-  const redirect = getQueryString(params.redirect_uri);
-  const { loginStrategies: ssoLogins } = useAuthConfig();
-
-  const loginType = ssoLogins.find(
-    (login) => encodeURIComponent(login.strategy.toLowerCase()) == params.strategy
-  );
-
-  useEffect(() => {
-    if (!loginType) {
-      return;
-    }
-
-    if (loginType.strategy.toLowerCase() === 'google') {
-      googleSSOMutation.mutate(
-        {
-          code: params.code as string,
-        },
-        {
-          onSuccess: () => {
-            router.push(redirect || '/');
-          },
-          onError: () => {
-            router.push('/login');
-          },
-        }
-      );
-      return;
-    }
-
-    oidcSSOMutation.mutate(
-      {
-        code: params.code as string,
-        strategy: loginType.strategy,
-      },
-      {
-        onSuccess: () => {
-          router.push(redirect || '/');
-        },
-        onError: () => {
-          router.push('/login');
-        },
-      }
-    );
-  }, [loginType]);
-
   return (
-    <div className="flex flex-col items-center justify-center">
-      <Text as="h1" styleAs="h3">
-        Logging in
-      </Text>
-    </div>
+    <Suspense>
+      <CompleteOauth />
+    </Suspense>
   );
 };
 

src/interfaces/coral_web/src/app/(auth)/register/Register.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
 import { AuthLink } from '@/components/AuthLink';
@@ -19,9 +19,9 @@ type RegisterStatus = 'idle' | 'pending';
 /**
  * @description The register page supports creating an account with an email and password.
  */
-const Register = () => {
+const Register: React.FC = () => {
   const router = useRouter();
-  const params = useParams();
+  const search = useSearchParams();
 
   const { registerMutation } = useSession();
 
@@ -40,7 +40,7 @@ const Register = () => {
     }
   };
 
-  const redirect = getQueryString(params.redirect_uri);
+  const redirect = getQueryString(search.get('redirect_uri'));
 
   const errors: string[] = [];
 

src/interfaces/coral_web/src/app/(auth)/register/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import { Suspense } from 'react';
 
 import Register from './Register';
 
@@ -7,7 +8,11 @@ export const metadata: Metadata = {
 };
 
 const RegisterPage = () => {
-  return <Register />;
+  return (
+    <Suspense>
+      <Register />
+    </Suspense>
+  );
 };
 
 export default RegisterPage;

src/interfaces/coral_web/src/app/(main)/new/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import { Suspense } from 'react';
 
 import { CreateAgent } from '@/components/Agents/CreateAgent';
 
@@ -7,7 +8,11 @@ export const metadata: Metadata = {
 };
 
 const NewAssistantPage: React.FC = () => {
-  return <CreateAgent />;
+  return (
+    <Suspense>
+      <CreateAgent />
+    </Suspense>
+  );
 };
 
 export default NewAssistantPage;

src/interfaces/coral_web/src/utils/queryString.ts

@@ -5,7 +5,7 @@
  *    : router.query.[param];
  */
 
-export const getQueryString = (param?: string | string[]) => {
+export const getQueryString = (param?: string | string[] | null) => {
   if (!param) return;
   if (Array.isArray(param)) {
     return param[0] as string;