docs about getting user plan in spaces (#1978)

* docs about getting user plan in spaces

* add link to space

* link

* Update docs/hub/spaces-get-user-status.md

Co-authored-by: Julien Chaumond <[email protected]>

* rename

* proof-read*

---------

Co-authored-by: Julien Chaumond <[email protected]>

Author: coyotte508

docs/hub/_toctree.yml

@@ -378,6 +378,8 @@
       title: Cookie limitations in Spaces
     - local: spaces-handle-url-parameters
       title: Set URL query and hash
+    - local: spaces-get-user-plan
+      title: Get User Plan and Status
 
 - local: other
   title: Other

docs/hub/spaces-advanced.md

@@ -10,3 +10,4 @@
 - [How to Add a Space to ArXiv](./spaces-add-to-arxiv)
 - [Cookie limitations in Spaces](./spaces-cookie-limitations)
 - [How to handle URL parameters in Spaces](./spaces-handle-url-parameters)
+- [How to get user status and plan in Spaces](./spaces-get-user-plan)

docs/hub/spaces-get-user-plan.md

@@ -0,0 +1,33 @@
+# How to get a user's plan and status in Spaces
+
+From inside a Space's iframe, you can check if a user is logged in or not on the main site, and if they have a PRO subscription or if one of their orgs has a paid subscription.
+
+```js
+window.addEventListener("message", (event) => {
+    if (event.data.type === "USER_PLAN") {
+        console.log("plan", event.data.plan);
+    }
+})
+
+window.parent.postMessage({
+    type: "USER_PLAN_REQUEST"
+}, "https://huggingface.co");
+```
+
+`event.data.plan` will be of type:
+
+```ts
+{
+    user: "anonymous",
+    org: undefined
+} | {
+    user: "pro" | "free",
+    org: undefined | "team" | "enterprise" | "plus" | "academia"
+}
+```
+
+You will get both the user's status (logged out = `"anonymous"`) and their <a href="https://huggingface.co/pricing">plan</a>.
+
+## Examples
+
+- https://huggingface.co/spaces/huggingfacejs/plan