chore: enable signing in when developing in CSB (#6882)

Author: CompuIves

.codesandbox/tasks.json

@@ -14,6 +14,9 @@
       "runAtStart": true,
       "preview": {
         "port": 3000
+      },
+      "restartOn": {
+        "files": ["yarn.lock", "packages/app/scripts/*"]
       }
     },
     "app:home:fast": {

packages/app/scripts/start.js

@@ -226,12 +226,7 @@ function addMiddleware(devServer, index) {
   if (process.env.LOCAL_SERVER) {
     devServer.use(
       cors({
-        origin: [
-          'http://localhost:3000',
-          'http://localhost:3002',
-          'http://localhost:8000',
-          'http://localhost:8001',
-        ],
+        origin: true,
         credentials: true,
       })
     );
@@ -291,9 +286,9 @@ function runDevServer(port, protocol, index) {
     host: process.env.LOCAL_SERVER
       ? 'localhost'
       : process.env.DEV_DOMAIN || 'codesandbox.test',
-    disableHostCheck: !(
-      process.env.LOCAL_SERVER || process.env.CODESANDBOX_HOST
-    ),
+    disableHostCheck:
+      Boolean(process.env.CSB) ||
+      !(process.env.LOCAL_SERVER || process.env.CODESANDBOX_HOST),
     contentBase: false,
     clientLogLevel: 'warning',
     overlay: true,

packages/app/src/app/overmind/effects/live/index.ts

@@ -173,7 +173,8 @@ class Live {
   private connectionPromise: Promise<Socket>;
   private async connect(): Promise<Socket> {
     if (!this.socket) {
-      const protocol = process.env.LOCAL_SERVER ? 'ws' : 'wss';
+      const protocol =
+        process.env.LOCAL_SERVER && !process.env.CSB ? 'ws' : 'wss';
       let jwt = await this.provideJwtCached();
       const params = () => ({
         guardian_token: jwt,

packages/common/src/config/env.ts

@@ -42,6 +42,10 @@ export default Object.keys(process.env)
     },
     {
       'process.env.NODE_ENV': NODE_ENV,
+      'process.env.CSB': Boolean(process.env.CSB || false),
+      'process.env.ENDPOINT': JSON.stringify(
+        process.env.ENDPOINT || 'codesandbox.io'
+      ),
       'process.env.STAGING_API': STAGING_API,
       'process.env.CODESANDBOX_HOST': JSON.stringify(getHost()),
       'process.env.LOCAL_SERVER': Boolean(LOCAL_SERVER),

packages/common/src/utils/url-generator.ts

@@ -34,7 +34,35 @@ const buildEncodedUri = (
     .map((value, i) => `${encodeURIComponent(value)}${strings[i + 1]}`)
     .join('');
 
+const REGEX = /(?<id>\w{5,6})-(?<port>\d{1,5})\.(?<hostname>.*)/;
+function getCodeSandboxDevHost(port: number): string | undefined {
+  if (typeof window === 'undefined') {
+    // eslint-disable-next-line global-require
+    const hostname = require('os').hostname();
+
+    return `${hostname}-${port}.preview.csb.app`;
+  }
+
+  const currentUrl = location.host;
+  const currentMatch = currentUrl.match(REGEX);
+
+  if (!currentMatch?.groups) {
+    return undefined;
+  }
+  const { id, hostname } = currentMatch.groups;
+
+  if (!id || !port || !hostname) {
+    return undefined;
+  }
+
+  return `${id}-${port}.${hostname}`;
+}
+
 export const host = () => {
+  if (process.env.CSB && getCodeSandboxDevHost(3000)) {
+    return getCodeSandboxDevHost(3000);
+  }
+
   if (process.env.NODE_ENV === 'production') {
     return process.env.CODESANDBOX_HOST.split('//')[1];
   }