refactor(devtools): updated authentication flow (#6098)

.changeset/cuddly-wasps-boil.md

@@ -0,0 +1,8 @@
+---
+"@refinedev/devtools-server": patch
+"@refinedev/devtools-ui": patch
+---
+
+refactor(devtools): updated flow for login callbacks
+
+Previously, when the login flow had an error, the Devtools UI was displaying it in the secondary window, which was not user-friendly and lead to multiple clients to connect unnecessarily. This change updates the flow to display the error message in the main Devtools window.

.changeset/curly-peas-swim.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/devtools-ui": patch
+---
+
+chore(devtools-ui): fix slider image loader
+
+In the welcome page of the Devtools UI, feature slider was re-mounting every image at transition, causing polluted network tab in the browser even though the images were cached and loaded already. This change fixes the issue by loading the images only once and reusing them on transition.

.changeset/cyan-paws-press.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/cli": patch
+---
+
+chore(cli): remove unused command
+
+Previously `@refinedev/cli` had a `proxy` command that is no longer in use and not required in any of the projects. This change removes the command from the CLI without a fallback.

.changeset/funny-schools-draw.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/devtools-shared": patch
+---
+
+chore(devtools-shared): add login callback events
+
+Added new events to handle login errors on the main devtools window rather than external windows. This change is accompanied by new event handlers in the `@refinedev/devtools-ui` and `@refinedev/devtools-server` packages.

.changeset/short-rabbits-flash.md

@@ -0,0 +1,8 @@
+---
+"@refinedev/devtools-shared": patch
+"@refinedev/devtools": patch
+---
+
+chore(devtools): update devtools url fallback values
+
+Updated fallback values for the Devtools URL and use single fallback value until its provided by the `@refinedev/devtools-server` when client is connected.

.changeset/small-mangos-matter.md

@@ -0,0 +1,8 @@
+---
+"@refinedev/devtools-server": patch
+"@refinedev/devtools-ui": patch
+---
+
+refactor(devtools): updated auth flow
+
+Previously, a proxy in the Devtools Server was used as an auth server to handle sign-ins in the localhost (Devtools Server). This change updates the flow and moves the authentication flow to `https://auth.refine.dev` to handle sign-ins and sign-outs. Now the Devtools Server is only responsible for the connection between the auth server and the user interface while also managing the user's session.

.changeset/spotty-turkeys-grab.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/devtools-server": patch
+---
+
+refactor(devtools-server): handle project id without polluting user console
+
+When project ID is missing in the project, Devtools Server was returning with `400` and `404` status codes, which leads to unwanted logs in the user console. To avoid this, the server now returns a `200` status code with an error message in the response body. This change is accompanied by a new error handler in the `@refinedev/devtools-ui` package to handle the error message and display it in the user interface.

examples/data-provider-strapi-v4/package.json

@@ -43,7 +43,6 @@
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "cypress": "^13.6.3",
-    "http-proxy-middleware": "^2.0.6",
     "typescript": "^5.4.2",
     "vite": "^5.1.6"
   }

examples/data-provider-strapi/package.json

@@ -44,7 +44,6 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "http-proxy-middleware": "^2.0.6",
     "typescript": "^5.4.2",
     "vite": "^5.1.6"
   }

examples/store/package.json

@@ -26,7 +26,7 @@
     "body-scroll-lock": "^4.0.0-beta.0",
     "clsx": "^1.1.1",
     "cross-env": "^7.0.3",
-    "http-proxy-middleware": "^2.0.6",
+    "http-proxy-middleware": "^3.0.0",
     "keen-slider": "^6.6.3",
     "lodash": "^4.17.21",
     "medusa-react": "^0.3.5",

packages/cli/package.json

@@ -52,7 +52,6 @@
     "globby": "^11.1.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
-    "http-proxy-middleware": "^2.0.6",
     "inquirer": "^8.2.5",
     "inquirer-autocomplete-prompt": "^2.0.0",
     "jscodeshift": "0.15.2",

packages/cli/src/cli.ts

@@ -5,7 +5,6 @@ import figlet from "figlet";
 
 import checkUpdates from "@commands/check-updates";
 import createResource from "@commands/create-resource";
-import proxy from "@commands/proxy";
 import { build, dev, run, start } from "@commands/runner";
 import swizzle from "@commands/swizzle";
 import update from "@commands/update";
@@ -49,7 +48,6 @@ const bootstrap = () => {
   run(program);
   checkUpdates(program);
   whoami(program);
-  proxy(program);
   devtools(program);
   add(program);
 

packages/devtools-server/package.json

@@ -46,7 +46,6 @@
     "types": "node ../shared/generate-declarations.js"
   },
   "dependencies": {
-    "@ory/client": "^1.5.2",
     "@refinedev/devtools-shared": "1.1.9",
     "body-parser": "^1.20.2",
     "boxen": "^5.1.2",
@@ -58,7 +57,7 @@
     "fs-extra": "^10.1.0",
     "globby": "^11.1.0",
     "gray-matter": "^4.0.3",
-    "http-proxy-middleware": "^2.0.6",
+    "http-proxy-middleware": "^3.0.0",
     "jscodeshift": "0.15.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",

packages/devtools-server/src/constants.ts

@@ -1,9 +1,17 @@
 export const DEFAULT_SERVER_PORT = 5001;
 export const SERVER_PORT = DEFAULT_SERVER_PORT;
 
+export const AUTH_SERVER_URL = __DEVELOPMENT__
+  ? "https://develop.auth.refine.dev"
+  : "https://auth.refine.dev";
+
 export const REFINE_API_URL = __DEVELOPMENT__
   ? "https://develop.cloud.refine.dev"
   : "https://cloud2.refine.dev";
 
+export const AUTH_TRIGGER_API_PATH = "/api/login";
+export const AUTH_CALLBACK_API_PATH = "/api/login-callback";
+export const AUTH_CALLBACK_UI_PATH = "/after-login";
+
 export const FEED_MD_URL =
   "https://raw.githubusercontent.com/refinedev/refine/master/packages/devtools-server/FEED.md";

packages/devtools-server/src/index.ts

@@ -112,6 +112,19 @@ export const server = async ({
         });
       });
 
+      receive(
+        client as any,
+        DevtoolsEvent.DEVTOOLS_LOGIN_FAILURE,
+        ({ error, code }) => {
+          ws.clients.forEach((c) => {
+            send(c as any, DevtoolsEvent.DEVTOOLS_DISPLAY_LOGIN_FAILURE, {
+              error,
+              code,
+            });
+          });
+        },
+      );
+
       // close connected app if client disconnects
       client.on("close", (_, reason) => {
         if (__DEVELOPMENT__) {

packages/devtools-server/src/serve-api.ts

@@ -131,17 +131,23 @@ export const serveApi = (app: Express, db: Data) => {
   });
 
   app.get("/api/project-id/status", async (_, res) => {
+    const CODES = {
+      OK: 0,
+      NOT_FOUND: 1,
+      ERROR: 2,
+    };
+
     const projectId = await getProjectIdFromPackageJson();
 
     if (projectId) {
-      res.status(200).json({ projectId });
+      res.status(200).json({ projectId, status: CODES.OK });
       return;
     }
     if (projectId === false) {
-      res.status(404).json({ projectId: null });
+      res.status(200).json({ projectId: null, status: CODES.NOT_FOUND });
       return;
     }
-    res.status(500).json({ projectId: null });
+    res.status(200).json({ projectId: null, status: CODES.ERROR });
     return;
   });