+
+ );
+ }
if (isSandpackBundlerError && errorMessage) {
return (
@@ -98,15 +153,23 @@ export const ErrorOverlay: React.FC+ Unable to fetch required dependency. +
+ +
+
+
+ + Authentication required. Please sign in to your account (make sure + to allow pop-ups to this page) and try again. If the issue persists, + contact{" "} + + support + {" "} + for further assistance. +
+
+
+
+
+
+
);
};
diff --git a/sandpack-react/src/components/common/LoadingOverlay.tsx b/sandpack-react/src/components/common/LoadingOverlay.tsx
index 58f143d93..bddefbd2b 100644
--- a/sandpack-react/src/components/common/LoadingOverlay.tsx
+++ b/sandpack-react/src/components/common/LoadingOverlay.tsx
@@ -12,6 +12,7 @@ import {
absoluteClassName,
buttonClassName,
errorBundlerClassName,
+ errorClassName,
errorMessageClassName,
fadeIn,
iconStandaloneClassName,
@@ -39,15 +40,16 @@ const loadingClassName = css({
backgroundColor: "$colors$surface1",
});
-export const LoadingOverlay = ({
+export const LoadingOverlay: React.FC<
+ LoadingOverlayProps & React.HTMLAttributes+ Something went wrong +
+ +{errorMessage || children} -
- This means sandpack cannot connect to the runtime or your network is - having some issues. Please check the network tab in your browser and - try again. If the problem persists, report it via{" "} - - email - {" "} - or submit an issue on{" "} - - GitHub. - -
+
+
- + This means sandpack cannot connect to the runtime or your network + is having some issues. Please check the network tab in your + browser and try again. If the problem persists, report it via{" "} + + email + {" "} + or submit an issue on{" "} + + GitHub. + +
+++ENV: {environment}
ERROR: TIME_OUT -
+}`,
+ }}
+/>
+
+```
+
+4. **Sign-in:** When Sandpack loads, you will be asked to sign in; after doing that, it's done.
+
+
+
+
+
+
+## Security
+
+It is important to us to ensure that the information and tokens of the npm registry are kept private. As such, we have added some extra measures to prevent any type of leakage.
+
+### Persisting the `auth` token
+
+The `auth` token is stored in our database in an encrypted form, using a key that's rolled and not available to the database itself. Even in the unlikely event that our database gets compromised, your `auth` token would be encrypted and inaccessible.
+
+### Single-Sandbox key
+
+We never send the `auth` token to the browser. Instead, we give every editor of the sandbox a key that only gives them access to that specific sandbox.
+
+If they want to retrieve a package from the private npm registry, they will have to ask our API. The API will fetch the `auth` token, request the npm registry on behalf of the user and return the response to the user.
+
+### Trusted domain only
+
+Sandpack uses the HTTP Content-Security-Policy (CSP) frame-ancestors directive to validate parents' window that may embed the given sandpack iFrame.
+
+With this extra security layer, only websites you trust (and provide to us) can render and fetch private packages from your registry. This can avoid phishing websites and the potential leakage of private data.
+
diff --git a/website/docs/src/pages/guides/private-packages.mdx b/website/docs/src/pages/guides/private-packages.mdx
deleted file mode 100644
index ca39d972c..000000000
--- a/website/docs/src/pages/guides/private-packages.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-# Private Packages
-
-
- - - The custom private NPM registry allows Sandpack instances to retrieve private - NPM packages from your own registry. This option requires running a third - service (Node.js server) and configuring your Sandpack provider to consume - these dependencies from another registry, not the public ones. - - - - -**You'll need:** - -- Host a Node.js server, which will run registry proxy; -- GitHub/NPM authentication token with read access; - -## Self-host the proxy - -We recommend hosting a service that allows you to proxy your private packages from a registry (GitHub/Npm/your own) to a new one, which would make the packages available through another URL. -As Sandpack bundles everything in-browser, it needs to find a way to connect to the registry which provides the project dependencies. -First, Sandpack will try to fetch all dependencies from public registries, for example, `react` or `redux`. Then you can let Sandpack know which dependencies (or scoped dependencies) should be fetched from a different registry. For example, your custom registry. - -### Our recommendation - -Suppose you don't already have a public registry, we recommend using [Verdaccio](https://verdaccio.org/). An open-source project that creates a private registry and can proxy other registries, such as GitHub and Npm. -You can find examples of how to use the [examples folder](https://github.com/codesandbox/sandpack/tree/main/examples) in the main repository. - -## Sandpack configuration - -Once the proxy is running and configured, you need to set some options in your Sandpack context: - -```jsx -
-
-
- )
-}
-`,
- }}
- template="react"
-/>
-```
-
-## Security
-
-It's essential to keep the information and tokens of the npm registry private! By using this method, it's best to keep in mind that it could expose all private packages in your account. Be careful where and how this proxy will be used. Make sure to use authentication tokens with **read-only access**.
-
-It's also possible to expose only specific packages. If the custom scopes are `@scope/package-name` instead of `@scope/*`, it will only expose that particular package. You can even do something like `@scope/design-system*` to expose all packages of the design system.
+
+
+
+
+## Security
+
+It is important to us to ensure that the information and tokens of the npm registry are kept private. As such, we have added some extra measures to prevent any type of leakage.
+
+### Persisting the `auth` token
+
+The `auth` token is stored in our database in an encrypted form, using a key that's rolled and not available to the database itself. Even in the unlikely event that our database gets compromised, your `auth` token would be encrypted and inaccessible.
+
+### Single-Sandbox key
+
+We never send the `auth` token to the browser. Instead, we give every editor of the sandbox a key that only gives them access to that specific sandbox.
+
+If they want to retrieve a package from the private npm registry, they will have to ask our API. The API will fetch the `auth` token, request the npm registry on behalf of the user and return the response to the user.
+
+### Trusted domain only
+
+Sandpack uses the HTTP Content-Security-Policy (CSP) frame-ancestors directive to validate parents' window that may embed the given sandpack iFrame.
+
+With this extra security layer, only websites you trust (and provide to us) can render and fetch private packages from your registry. This can avoid phishing websites and the potential leakage of private data.
+
diff --git a/website/docs/src/pages/guides/private-packages.mdx b/website/docs/src/pages/guides/private-packages.mdx
deleted file mode 100644
index ca39d972c..000000000
--- a/website/docs/src/pages/guides/private-packages.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-# Private Packages
-
-- - - The custom private NPM registry allows Sandpack instances to retrieve private - NPM packages from your own registry. This option requires running a third - service (Node.js server) and configuring your Sandpack provider to consume - these dependencies from another registry, not the public ones. - - - - -**You'll need:** - -- Host a Node.js server, which will run registry proxy; -- GitHub/NPM authentication token with read access; - -## Self-host the proxy - -We recommend hosting a service that allows you to proxy your private packages from a registry (GitHub/Npm/your own) to a new one, which would make the packages available through another URL. -As Sandpack bundles everything in-browser, it needs to find a way to connect to the registry which provides the project dependencies. -First, Sandpack will try to fetch all dependencies from public registries, for example, `react` or `redux`. Then you can let Sandpack know which dependencies (or scoped dependencies) should be fetched from a different registry. For example, your custom registry. - -### Our recommendation - -Suppose you don't already have a public registry, we recommend using [Verdaccio](https://verdaccio.org/). An open-source project that creates a private registry and can proxy other registries, such as GitHub and Npm. -You can find examples of how to use the [examples folder](https://github.com/codesandbox/sandpack/tree/main/examples) in the main repository. - -## Sandpack configuration - -Once the proxy is running and configured, you need to set some options in your Sandpack context: - -```jsx -