Refresh token logic in dashboards

src/atoms/editor/index.ts

@@ -46,6 +46,11 @@ export const previewAccessTokenState = atom<string>({
   default: "",
 });
 
+export const previewRefreshTokenState = atom<string>({
+  key: "previewRefreshTokenState",
+  default: "",
+});
+
 export const lastDashboardMetadata = atom<Dashboard | null>({
   key: "lastDashboardMetadata",
   default: null,

src/components/editor/auth/AuthDrawer.tsx

@@ -1,10 +1,13 @@
-import { isAuthDrawerOpen, previewAccessTokenState } from "@/atoms/editor";
+import {
+  isAuthDrawerOpen,
+  previewAccessTokenState,
+  previewRefreshTokenState,
+} from "@/atoms/editor";
 import {
   Accordion,
   AccordionItem,
   Divider,
   Input,
-  semanticColors,
   Switch,
 } from "@nextui-org/react";
 import { motion } from "framer-motion";
@@ -22,16 +25,22 @@ const AuthDrawer = () => {
   const { dashboard, updateDashboard } = useDashboard();
   const { theme } = useTheme();
   const setPreviewAccessToken = useSetRecoilState(previewAccessTokenState);
+  const setPreviewRefreshToken = useSetRecoilState(previewRefreshTokenState);
 
   const {
     enabled,
     loginQueryData,
+    refreshQueryData,
     accessTokenField,
+    refreshTokenField,
+    refreshResponseTokenField,
     passwordInputLabel,
     userInputLabel,
     userQueryParameter,
     passwordQueryParameter,
     previewAccessToken,
+    previewRefreshToken,
+    refreshQueryParameter,
     title,
     buttonText,
     buttonColor,
@@ -125,6 +134,18 @@ const AuthDrawer = () => {
                 }}
                 isDisabled={!enabled}
               />
+              <Input
+                label="Refresh Token Field"
+                placeholder={"Example: refresh_token"}
+                labelPlacement="outside"
+                value={refreshTokenField || ""}
+                onValueChange={(value) => {
+                  updateAuth({
+                    refreshTokenField: value,
+                  });
+                }}
+                isDisabled={!enabled}
+              />
               <Input
                 label="Preview Access Token"
                 placeholder={"Access token used in editor queries"}
@@ -140,6 +161,70 @@ const AuthDrawer = () => {
               />
             </div>
           </AccordionItem>
+          <AccordionItem
+            key="refresh"
+            title="Refresh"
+            className="pb-5 pt-3"
+            classNames={{
+              title: "font-medium",
+            }}
+          >
+            <div className={"flex flex-col gap-3 mt-3"}>
+              <QuerySelection
+                selectedQueryId={refreshQueryData?.queryId || ""}
+                onQuerySelect={(refreshQuery) => {
+                  updateAuth({
+                    refreshQueryData: {
+                      queryId: refreshQuery.id,
+                      connectionId: refreshQuery.connection_id,
+                      method: refreshQuery.metadata.method,
+                    },
+                  });
+                }}
+                label={"Refresh Query"}
+                placeholder={"Select refresh query"}
+                isDisabled={!enabled}
+                type={QueryType.UPDATE}
+              />
+              <Input
+                label="Access Token Field"
+                placeholder={"Example: access_token"}
+                labelPlacement="outside"
+                value={refreshResponseTokenField || ""}
+                onValueChange={(value) => {
+                  updateAuth({
+                    refreshResponseTokenField: value,
+                  });
+                }}
+                isDisabled={!enabled}
+              />
+              <Input
+                label="Preview Refresh Token"
+                placeholder={"Refresh token used in editor queries"}
+                labelPlacement="outside"
+                value={previewRefreshToken || ""}
+                onValueChange={(value) => {
+                  setPreviewRefreshToken(value);
+                  updateAuth({
+                    previewRefreshToken: value,
+                  });
+                }}
+                isDisabled={!enabled}
+              />
+              <QueryParameterSelection
+                queryId={refreshQueryData?.queryId || ""}
+                selectedKey={refreshQueryParameter || ""}
+                onSelectionChange={(value) => {
+                  updateAuth({
+                    refreshQueryParameter: value,
+                  });
+                }}
+                label={"Refresh Query Parameter"}
+                disabledKeys={[refreshQueryParameter || ""]}
+                isDisabled={!enabled}
+              />
+            </div>
+          </AccordionItem>
           <AccordionItem
             key={"inputs"}
             title="Inputs"

src/components/editor/auth/AuthVerifier.tsx

@@ -16,6 +16,8 @@ import { useRecoilValue } from "recoil";
 import { isAuthDrawerOpen } from "@/atoms/editor";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { useTheme } from "next-themes";
+import { useRefreshToken } from "@/hooks/useRefreshToken";
+import useDashboard from "@/hooks/dashboards/useDashboard";
 
 interface LogInForm {
   user: string;
@@ -35,8 +37,24 @@ const AuthVerifier = ({
 }) => {
   const { theme } = useTheme();
   const { accessToken, updateAccessToken } = useAccessToken({ dashboardId });
+  const { updateDashboard } = useDashboard();
+
+  const { updateRefreshToken } = useRefreshToken({ dashboardId });
   const isAuthOpen = useRecoilValue(isAuthDrawerOpen);
 
+  const updateAuth = (auth: any) => {
+    updateDashboard((prev) => ({
+      ...prev,
+      metadata: {
+        ...prev.metadata,
+        auth: {
+          ...prev.metadata.auth,
+          ...auth,
+        },
+      },
+    }));
+  };
+
   const { execute, isPending } = useExecuteQuery({
     dashboardId,
     onError: (error) => {
@@ -50,8 +68,28 @@ const AuthVerifier = ({
       if (auth && response.body[auth?.accessTokenField] !== undefined) {
         if (mode === "editor") {
           toast.success("Logged in successfully");
+          if (
+            auth?.refreshTokenField &&
+            response.body[auth?.refreshTokenField] !== undefined
+          ) {
+            updateAuth({
+              previewAccessToken: response.body[auth?.accessTokenField],
+              previewRefreshToken: response.body[auth?.refreshTokenField],
+            });
+          } else {
+            updateAuth({
+              previewAccessToken: response.body[auth?.accessTokenField],
+            });
+          }
         } else {
           updateAccessToken(response.body[auth?.accessTokenField]);
+
+          if (
+            auth?.refreshTokenField &&
+            response.body[auth?.refreshTokenField] !== undefined
+          ) {
+            updateRefreshToken(response.body[auth?.refreshTokenField]);
+          }
         }
       } else {
         toast.error("No access token found in response");

src/components/editor/fastboard-components/sidebar/FastboardSidebar.tsx

@@ -1,9 +1,13 @@
 import { Icon } from "@/components/shared/IconPicker";
 import useNavigation from "@/hooks/useNavigation";
 import { SidebarProperties } from "@/types/editor/sidebar-types";
-import { extendVariants, Tab, Tabs } from "@nextui-org/react";
+import { Button, extendVariants, Tab, Tabs } from "@nextui-org/react";
 import { useTheme } from "next-themes";
 import { Key } from "react";
+import { Logout } from "iconsax-react";
+import { useParams } from "next/navigation";
+import useDashboard from "@/hooks/dashboards/useDashboard";
+import { isPublishPage, isPreviewPage } from "@/lib/helpers";
 
 export default function FastboardSidebar({
   properties,
@@ -12,16 +16,29 @@ export default function FastboardSidebar({
 }) {
   const { theme } = useTheme();
   const { currentPage, changePage } = useNavigation();
-  const { menuItems, backgroundColor, textColor, selectedColor } = properties;
-  const cursorClassName = `bg-[${selectedColor.light}]`;
+
+  const { id: dashboardId } = useParams();
+
+  const { dashboard } = useDashboard(isPublishPage() ? "published" : "editor");
+
+  const { menuItems, backgroundColor, textColor } = properties;
 
   function handleSelectionChange(key: Key) {
     changePage(key.toString());
   }
 
+  const handleLogout = () => {
+    localStorage.removeItem(`auth-${dashboardId}`);
+    localStorage.removeItem(`refresh-${dashboardId}`);
+
+    window.location.reload();
+  };
+
+  const isEditorPage = !isPreviewPage() && !isPublishPage();
+
   return (
     <div
-      className="h-full"
+      className="h-full relative"
       style={{
         backgroundColor:
           theme === "light" ? backgroundColor.light : backgroundColor.dark,
@@ -61,6 +78,16 @@ export default function FastboardSidebar({
             ></Tab>
           ))}
         </Tabs>
+        {/*  logout button*/}
+        {dashboard?.metadata?.auth?.enabled && !isEditorPage && (
+          <Button
+            className={`absolute bottom-5 left-5 text-danger bg-transparent`}
+            onPress={handleLogout}
+          >
+            <Logout />
+            <span>Log out</span>
+          </Button>
+        )}
       </div>
     </div>
   );

src/components/shared/Viewport.tsx

@@ -2,7 +2,10 @@ import useDashboard from "@/hooks/dashboards/useDashboard";
 import AuthVerifier from "../editor/auth/AuthVerifier";
 import FastboardComponent from "../editor/fastboard-components/FastboardComponent";
 import { useSetRecoilState } from "recoil";
-import { previewAccessTokenState } from "@/atoms/editor";
+import {
+  previewAccessTokenState,
+  previewRefreshTokenState,
+} from "@/atoms/editor";
 import useNavigation from "@/hooks/useNavigation";
 import { useEffect } from "react";
 import { getLayout } from "../editor/fastboard-components/utils";
@@ -16,15 +19,20 @@ export default function Viewport({
   mode: "editor" | "preview" | "published";
 }) {
   const { dashboard, loading, isError, error, getComponent } = useDashboard(
-    mode === "editor" || mode === "preview" ? "editor" : "published"
+    mode === "editor" || mode === "preview" ? "editor" : "published",
   );
   const setPreviewAccessToken = useSetRecoilState(previewAccessTokenState);
+  const setPreviewRefreshToken = useSetRecoilState(previewRefreshTokenState);
   const { currentPage } = useNavigation();
 
   useEffect(() => {
     if (mode === "editor" && dashboard?.metadata?.auth?.previewAccessToken) {
       setPreviewAccessToken(dashboard.metadata.auth.previewAccessToken);
     }
+
+    if (mode === "editor" && dashboard?.metadata?.auth?.previewRefreshToken) {
+      setPreviewRefreshToken(dashboard.metadata.auth.previewRefreshToken);
+    }
   }, [dashboard]);
 
   const sidebarVisible = dashboard?.metadata?.sidebar?.visible ?? false;
@@ -34,7 +42,7 @@ export default function Viewport({
     : "100%";
   const layoutsHeight = isHeaderVisible ? "90%" : "100%";
   const header = getComponent(
-    dashboard?.metadata?.header?.componentId as string
+    dashboard?.metadata?.header?.componentId as string,
   );
   const sidebar = dashboard?.metadata?.sidebar?.id
     ? getComponent(dashboard.metadata.sidebar?.id)
@@ -109,8 +117,8 @@ export default function Viewport({
               layout,
               currentPage,
               index,
-              mode === "editor" ? "editable" : "view"
-            )
+              mode === "editor" ? "editable" : "view",
+            ),
           )}
         </div>
       </div>

src/hooks/adapter/useExecuteQuery.ts

@@ -4,8 +4,14 @@ import { queryClient } from "@/app/providers";
 import { adapterService } from "@/lib/services/adapter";
 import { useState } from "react";
 import { useRecoilValue } from "recoil";
-import { previewAccessTokenState } from "@/atoms/editor";
+import {
+  previewAccessTokenState,
+  previewRefreshTokenState,
+} from "@/atoms/editor";
 import { AxiosRequestConfig } from "axios";
+import { DashboardAuth } from "@/types/editor";
+import useDashboard from "@/hooks/dashboards/useDashboard";
+import { isPublishPage } from "@/lib/helpers";
 
 const useExecuteQuery = ({
   onSuccess,
@@ -17,6 +23,10 @@ const useExecuteQuery = ({
   dashboardId: string;
 }) => {
   const previewAccessToken = useRecoilValue(previewAccessTokenState);
+  const previewRefreshToken = useRecoilValue(previewRefreshTokenState);
+
+  const { dashboard } = useDashboard(isPublishPage() ? "published" : "editor");
+
   const [invalidateQueries, setInvalidateQueries] =
     useState<InvalidateQueryFilters>();
   const {
@@ -46,6 +56,8 @@ const useExecuteQuery = ({
         parameters,
         previewAccessToken,
         config,
+        previewRefreshToken,
+        dashboard?.metadata?.auth as DashboardAuth | null,
       );
     },
     onSuccess: (data, variables) => {

src/hooks/useData.ts

@@ -3,13 +3,23 @@ import { ContentType, QueryData } from "@/types/connections";
 import { adapterService } from "@/lib/services/adapter";
 import { useMemo, useState } from "react";
 import { useRecoilValue } from "recoil";
-import { previewAccessTokenState } from "@/atoms/editor";
+import {
+  previewAccessTokenState,
+  previewRefreshTokenState,
+} from "@/atoms/editor";
 import { useParams } from "next/navigation";
+import useDashboard from "@/hooks/dashboards/useDashboard";
+import { isPublishPage } from "@/lib/helpers";
+import { DashboardAuth } from "@/types/editor";
 
 const useData = (componentId: string, queryData: QueryData | null) => {
   const { queryId, connectionId } = queryData || {};
   const { id: dashboardId } = useParams();
   const previewAccessToken = useRecoilValue(previewAccessTokenState);
+  const previewRefreshToken = useRecoilValue(previewRefreshTokenState);
+
+  const { dashboard } = useDashboard(isPublishPage() ? "published" : "editor");
+
   const { data, refetch, isLoading, isFetching, isError, error } = useQuery({
     queryKey: ["get_data", connectionId, { queryId, componentId }],
     queryFn: () => fetchData(queryData),
@@ -42,7 +52,9 @@ const useData = (componentId: string, queryData: QueryData | null) => {
           headers: {
             "Content-Type": contentType || ContentType.JSON,
           },
-        }
+        },
+        previewRefreshToken,
+        dashboard?.metadata?.auth as DashboardAuth | undefined,
       );
       let responseData = response?.body;