From 83ad1b6142a9f60ac5fc0b4b26998f7fe82d32fb Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 4 Nov 2022 11:26:30 -0230
Subject: [PATCH 1/2] Port JWTgenerator

---
 apps/docs/components/JwtGenerator.js       | 117 +++++++++++++++++++++
 apps/docs/components/index.tsx             |   5 +-
 apps/docs/docs/guides/hosting/overview.mdx |   2 -
 3 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 apps/docs/components/JwtGenerator.js

diff --git a/apps/docs/components/JwtGenerator.js b/apps/docs/components/JwtGenerator.js
new file mode 100644
index 00000000000..d4c39218734
--- /dev/null
+++ b/apps/docs/components/JwtGenerator.js
@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+import KJUR from 'jsrsasign'
+import CodeBlock from './CodeBlock/CodeBlock'
+import { Button } from 'ui'
+
+const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
+const now = new Date()
+const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+const fiveYears = new Date(now.getFullYear() + 5, now.getMonth(), now.getDate())
+const anonToken = `
+{
+    "role": "anon",
+    "iss": "supabase",
+    "iat": ${Math.floor(today / 1000)},
+    "exp": ${Math.floor(fiveYears / 1000)}
+}
+`.trim()
+
+const serviceToken = `
+{
+    "role": "service_role",
+    "iss": "supabase",
+    "iat": ${Math.floor(today / 1000)},
+    "exp": ${Math.floor(fiveYears / 1000)}
+}
+`.trim()
+
+export default function JwtGenerator({}) {
+  const secret = [...Array(40)].map(() => Math.random().toString(36)[2]).join('')
+
+  const [jwtSecret, setJwtSecret] = useState(secret)
+  const [token, setToken] = useState(anonToken)
+  const [signedToken, setSignedToken] = useState('')
+
+  const handleKeySelection = (e) => {
+    const val = e.target.value
+    if (val == 'service') setToken(serviceToken)
+    else setToken(anonToken)
+  }
+  const generate = () => {
+    const signedJWT = KJUR.jws.JWS.sign(null, JWT_HEADER, token, jwtSecret)
+    setSignedToken(signedJWT)
+  }
+
+  return (
+    <div>
+      <div style={styles.inputContainer}>
+        <label>JWT Secret:</label>
+        <input
+          type="text"
+          style={styles.input}
+          placeholder="JWT Secret (at least 32 characters)"
+          value={jwtSecret}
+          onChange={(e) => setJwtSecret(e.target.value)}
+        />
+      </div>
+      <div style={styles.inputContainer}>
+        <label>Preconfigured Payload:</label>
+        <select onChange={handleKeySelection} style={styles.input}>
+          <option value="anon">ANON_KEY</option>
+          <option value="service">SERVICE_KEY</option>
+        </select>
+      </div>
+      <div style={styles.inputContainer}>
+        <label>Payload:</label>
+        <textarea
+          type="text"
+          style={styles.input}
+          rows="5"
+          placeholder="A valid JWT Token"
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+        />
+      </div>
+      <Button type="primary" onClick={generate}>
+        Generate JWT
+      </Button>
+
+      {signedToken && (
+        <div style={{ marginTop: 20 }}>
+          <h4>Generated Token</h4>
+          <CodeBlock language="bash" className="relative">
+            {signedToken}
+          </CodeBlock>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const styles = {
+  inputContainer: {
+    marginBottom: '15px',
+  },
+  input: {
+    border: '1px solid var(--colors-gray5)',
+    borderRadius: 4,
+    backgroundColor: 'var(--colors-gray3)',
+    margin: 0,
+    padding: '6px 8px',
+    width: '100%',
+  },
+  card: {
+    border: '1px solid var(--colors-gray5)',
+    borderRadius: 5,
+    padding: 8,
+  },
+  title: {
+    margin: 0,
+    fontSize: '0.9rem',
+    border: '1px solid var(--colors-gray5)',
+  },
+  description: {
+    fontSize: '0.8rem',
+    margin: 0,
+  },
+}
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index f97096022d1..56e0b9b3b2d 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -1,10 +1,11 @@
-import { Tabs, Alert } from 'ui'
+import { Button, Tabs, Alert } from 'ui'
 
 // Common components
 import Admonition from './Admonition'
 import ButtonCard from './ButtonCard'
 import CodeBlock from './CodeBlock/CodeBlock'
 import { parseNumericRange } from './CodeBlock/CodeBlock.utils'
+import JwtGenerator from './JwtGenerator'
 
 // Page specific components
 import Frameworks from './Frameworks'
@@ -18,11 +19,13 @@ import ProjectSetup from './MDX/project_setup.mdx'
 
 const components = {
   Admonition,
+  Button,
   ButtonCard,
   CodeBlock,
   Frameworks,
   AuthProviders,
   FunctionsExamples,
+  JwtGenerator,
   QuickstartIntro,
   ProjectSetup,
   Alert: (props: any) => (
diff --git a/apps/docs/docs/guides/hosting/overview.mdx b/apps/docs/docs/guides/hosting/overview.mdx
index 368ba3ce8b1..00c9a6b9b14 100644
--- a/apps/docs/docs/guides/hosting/overview.mdx
+++ b/apps/docs/docs/guides/hosting/overview.mdx
@@ -5,8 +5,6 @@ sidebar_label: Overview
 description: Getting started with Self Hosting.
 ---
 
-import JwtGenerator from '@site/src/components/JwtGenerator'
-
 There are several ways to use Supabase:
 
 - [Supabase Cloud](https://app.supabase.com): you don't need to deploy anything. We will manage and scale your infrastructure.

From c9bfb7edb6f7cdbc0b01ab3ed7eb5f180e69541b Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 4 Nov 2022 12:44:09 -0230
Subject: [PATCH 2/2] Remove inline styles

---
 apps/docs/components/JwtGenerator.js | 57 +++++++++-------------------
 1 file changed, 18 insertions(+), 39 deletions(-)

diff --git a/apps/docs/components/JwtGenerator.js b/apps/docs/components/JwtGenerator.js
index d4c39218734..46dd4758e31 100644
--- a/apps/docs/components/JwtGenerator.js
+++ b/apps/docs/components/JwtGenerator.js
@@ -44,41 +44,48 @@ export default function JwtGenerator({}) {
 
   return (
     <div>
-      <div style={styles.inputContainer}>
-        <label>JWT Secret:</label>
+      <div className="grid mb-8">
+        <label for="secret">JWT Secret:</label>
         <input
+          id="secret"
+          className="border rounded bg-gray-200 w-full"
           type="text"
-          style={styles.input}
           placeholder="JWT Secret (at least 32 characters)"
           value={jwtSecret}
           onChange={(e) => setJwtSecret(e.target.value)}
         />
       </div>
-      <div style={styles.inputContainer}>
-        <label>Preconfigured Payload:</label>
-        <select onChange={handleKeySelection} style={styles.input}>
+      <div className="grid mb-8">
+        <label for="service">Preconfigured Payload:</label>
+        <select
+          id="service"
+          onChange={handleKeySelection}
+          className="border rounded bg-gray-200 w-full"
+        >
           <option value="anon">ANON_KEY</option>
           <option value="service">SERVICE_KEY</option>
         </select>
       </div>
-      <div style={styles.inputContainer}>
-        <label>Payload:</label>
+
+      <div className="grid mb-8">
+        <label for="token">Payload:</label>
         <textarea
+          id="token"
           type="text"
-          style={styles.input}
           rows="5"
           placeholder="A valid JWT Token"
           value={token}
           onChange={(e) => setToken(e.target.value)}
         />
       </div>
+
       <Button type="primary" onClick={generate}>
         Generate JWT
       </Button>
 
       {signedToken && (
-        <div style={{ marginTop: 20 }}>
-          <h4>Generated Token</h4>
+        <div className="mt-8">
+          <h4>Generated Token:</h4>
           <CodeBlock language="bash" className="relative">
             {signedToken}
           </CodeBlock>
@@ -87,31 +94,3 @@ export default function JwtGenerator({}) {
     </div>
   )
 }
-
-const styles = {
-  inputContainer: {
-    marginBottom: '15px',
-  },
-  input: {
-    border: '1px solid var(--colors-gray5)',
-    borderRadius: 4,
-    backgroundColor: 'var(--colors-gray3)',
-    margin: 0,
-    padding: '6px 8px',
-    width: '100%',
-  },
-  card: {
-    border: '1px solid var(--colors-gray5)',
-    borderRadius: 5,
-    padding: 8,
-  },
-  title: {
-    margin: 0,
-    fontSize: '0.9rem',
-    border: '1px solid var(--colors-gray5)',
-  },
-  description: {
-    fontSize: '0.8rem',
-    margin: 0,
-  },
-}