👔 forwarding callback data

create a type and implement it in props that pass callback data from root to the component that will process the
request.

app/(auth)/auth/callback/[...provider]/page.tsx

@@ -1,13 +1,9 @@
 import OauthCallbackHandler from "@/features/oauth-callback/pages/callbackHandler";
 import React from "react";
+import { ParamProps } from "@/features/oauth-callback/types/ParamProps";
 
-interface PageProps {
+const page = ({ params, searchParams }: ParamProps) => {
-  params: { provider: string[] };
+  return <OauthCallbackHandler callbackData={{ params, searchParams }} />;
-  searchParams: { [key: string]: string | string[] | undefined };
-}
-
-const page = ({ params, searchParams }: PageProps) => {
-  return <OauthCallbackHandler />;
 };
 
 export default page;

features/oauth-callback/pages/callbackHandler.tsx

@@ -1,12 +1,17 @@
 "use client";
 
+import { ParamProps } from "../types/ParamProps";
 import { redirect } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import SecurityCheckup from "@/shared/auth/ui/SecurityCheckup";
 import SecurityCheckupFailed from "@/shared/auth/ui/SecurityCheckupFailed";
 import LoadingProcess from "../ui/LoadingProcess";
 
-const OauthCallbackHandler = () => {
+const OauthCallbackHandler = ({
+  callbackData,
+}: {
+  callbackData: ParamProps;
+}) => {
   /**
    * Create a lit component that will be used in popp, consisting of 3 component flows:
    * 1. When the user opens it, a browser environment check will be performed.
@@ -16,7 +21,7 @@ const OauthCallbackHandler = () => {
   const componentFlowList = {
     securityCheckup: <SecurityCheckup />,
     securityCheckupFailed: <SecurityCheckupFailed />,
-    proceedCallback: <LoadingProcess />,
+    proceedCallback: <LoadingProcess callbackData={callbackData} />,
   };
 
   // State to set the current page component

features/oauth-callback/types/ParamProps.ts

@@ -0,0 +1,4 @@
+export interface ParamProps {
+  params: { provider: string[] };
+  searchParams: { [key: string]: string | string[] | undefined };
+}

features/oauth-callback/ui/LoadingProcess.tsx

@@ -2,8 +2,9 @@
 
 import { CircularProgress } from "@heroui/react";
 import React from "react";
+import { ParamProps } from "../types/ParamProps";
 
-const LoadingProcess = () => {
+const LoadingProcess = ({ callbackData }: { callbackData: ParamProps }) => {
   return (
     <div className="w-full flex flex-col items-center text-center mt-[26vh]">
       <CircularProgress aria-label="Loading..." size="lg" />
@@ -12,6 +13,9 @@ const LoadingProcess = () => {
         <p className="text-sm text-neutral-400">
           Your request is being processed
         </p>
+        <p className="text-sm text-neutral-400">
+          {JSON.stringify(callbackData)}
+        </p>
       </div>
     </div>
   );