JwtGenerator() — supabase Function Reference

Architecture documentation for the JwtGenerator() function in JwtGenerator.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ JwtGenerator() — supabase Function Reference

Dependency Diagram

graph TD
  7bc1a88f_c0db_9a28_6231_dd969c041964["JwtGenerator()"]
  5a090369_1c3c_5ea2_b963_0aa9c80c5013["generateRandomString()"]
  7bc1a88f_c0db_9a28_6231_dd969c041964 -->|calls| 5a090369_1c3c_5ea2_b963_0aa9c80c5013
  style 7bc1a88f_c0db_9a28_6231_dd969c041964 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/components/JwtGenerator/JwtGenerator.tsx lines 56–141

export default function JwtGenerator() {
  const secret = generateRandomString(40)

  const [jwtSecret, setJwtSecret] = useState(secret)
  const [token, setToken] = useState(anonToken)
  const [signedToken, setSignedToken] = useState('')
  const [err, setErr] = useState<string>('')

  const handleKeySelection = (e: ChangeEvent<HTMLSelectElement>) => {
    const val = e.target.value
    if (val == 'service') setToken(serviceToken)
    else setToken(anonToken)
  }

  const handleClaimsChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    try {
      const newTok = JSON.parse(e.target.value)
      setToken(newTok)
      setErr('')
    } catch (err) {
      const errMessage =
        !!err && typeof err === 'object' && 'message' in err && typeof err.message === 'string'
          ? err.message
          : ''
      setErr('Not a valid JSON body' + (errMessage ? `: ${errMessage}` : ''))
    }
  }

  const generate = () => {
    const signedJWT = KJUR.jws.JWS.sign(null, JWT_HEADER, token, jwtSecret)
    setSignedToken(signedJWT)
  }

  return (
    <div className="border rounded-lg p-4">
      <div className="grid mb-8">
        <label htmlFor="secret">JWT Secret:</label>
        <Input
          id="secret"
          type="text"
          placeholder="JWT Secret (at least 32 characters)"
          value={jwtSecret}
          style={{ fontFamily: 'monospace' }}
          onChange={(e) => setJwtSecret(e.target.value)}
        />
      </div>
      <div className="grid mb-8">
        <label htmlFor="service">Key:</label>
        <Select id="service" style={{ fontFamily: 'monospace' }} onChange={handleKeySelection}>
          <Select.Option value="anon">ANON_KEY</Select.Option>
          <Select.Option value="service">SERVICE_KEY</Select.Option>
        </Select>
      </div>

      <div className="grid mb-8">
        <label htmlFor="token">The JWT will be generated from this info:</label>
        <Input.TextArea
          key={JSON.stringify(token)}
          id="token"
          type="text"
          rows={6}
          placeholder="A valid JWT Token"
          defaultValue={JSON.stringify(token, null, 2)}
          style={{ fontFamily: 'monospace' }}
          onChange={handleClaimsChange}
        />
        {err && (
          <span className="text-sm text-destructive-600">Input must be valid JSON. {err}</span>
        )}
      </div>

      <Button type="primary" onClick={generate}>
        Generate JWT
      </Button>

      {signedToken && (
        <div className="mt-8">
          <h4>Generated Token:</h4>
          <CodeBlock language="bash" className="relative font-mono">
            {signedToken}
          </CodeBlock>
        </div>
      )}
    </div>
  )
}