Fix Custom JWT page

Author: shahbaz17

docs/authentication/advanced/id-token.mdx

@@ -1,5 +1,5 @@
 ---
-title: Web3AuthIdentity Token
+title: Web3Auth Identity Token
 sidebar_label: Identity Token
 image: "images/docs-meta-cards/documentation-card.png"
 description: "Identity Token | Documentation - Web3Auth"

docs/authentication/custom-connections/custom-jwt.mdx

@@ -5,6 +5,9 @@ description: "Custom JWT Login with Web3Auth | Documentation - Web3Auth"
 image: "images/docs-meta-cards/documentation-card.png"
 ---
 
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
 import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
 import CustomJWTConnection from "@site/static/images/dashboard/custom-connection.png";
 
@@ -29,10 +32,14 @@ Web3Auth Dashboard.
 To use this feature, developers must go to the `Custom Connections` tab in the
 [Web3Auth Dashboard](https://dashboard.web3auth.io).
 
-<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
+<div style={{ display: "flex", margin: "20px 0" }}>
   <img
     src={CustomConnectionOptions}
-    style={{ alignSelf: "center", maxWidth: "100%" }}
+    style={{
+      maxWidth: "600px",
+      borderRadius: "8px",
+      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
+    }}
     alt="Custom Connection Options"
   />
 </div>
@@ -54,27 +61,209 @@ Follow these steps to create a AWS Cognito connection:
    1. Next, type aud as a field and `your-audience` as a value.
 1. Finally, click on the `Add Connection` button.
 
-<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
+<div style={{ display: "flex", margin: "20px 0" }}>
   <img
     src={CustomJWTConnection}
-    style={{ alignSelf: "center", maxWidth: "100%" }}
+    style={{
+      maxWidth: "600px",
+      borderRadius: "8px",
+      boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
+    }}
     alt="Custom JWT Connection"
   />
 </div>
 
-## Generate JWT
+## Create JWT
+
+To generate the JWT, developers may use a package of their choice. Web3Auth provides documentation
+and examples using both the `jsonwebtoken` and `jose` libraries.
+
+### Generate Private Key
+
+Developers can generate a private key using the `openssl` command-line tool. This private key will
+be used to sign the ID token.
+
+<Tabs
+defaultValue="rsa"
+values={[
+  { label: "RSA256", value: "rsa" },
+  { label: "ECDSA", value: "ecdsa" },
+]}
+>
+<TabItem value="rsa">
+
+Developers can run the following command in the terminal to generate a new `privateKey.pem` file
+containing the `RSA256` key details.
+
+```bash
+openssl genrsa -out privateKey.pem 2048
+```
+
+Once the private key is generated, developers can generate the public key which can be used to
+verify the JWT and [convert it to JWKS](#how-to-convert-pem-to-jwks).
+
+```bash
+openssl rsa -in privateKey.pem -pubout -out publicKey.pem
+```
+
+</TabItem>
+
+<TabItem value="ecdsa">
+
+Developers can run the following command in the terminal to generate a new `privateKey.pem` file
+containing the `ECDSA` key details.
 
-To generate the JWT, you can choose package of your choice. We have documented few of the well known
-packages.
+```bash
+openssl ecparam -name secp256k1 -genkey -noout -out ec-secp256k1-privateKey.pem
+```
+
+Once the private key is generated, developers can generate the public key which can be used to
+verify the JWT and [convert it to JWKS](#how-to-convert-pem-to-jwks).
 
-- [Generate JWT using jsonwebtoken](/docs/authentication/custom-connections/custom/jsonwebtoken)
-- [Generate JWT using jose](/docs/authentication/custom-connections/custom/jose)
+```bash
+openssl ec -in ec-secp256k1-privateKey.pem -pubout -out ec-secp256k1-publicKey.pem
+```
 
-  :::warning Facing issue with JWT?
+</TabItem>
+</Tabs>
 
-  Check out [**this troubleshooting page to fix those.**](/troubleshooting/jwt-errors)
+### Install JWT Library
 
-  :::
+Developers can install a JWT library of their choice. Following are the documentation and examples
+using both the `jsonwebtoken` and `jose` libraries.
+
+```bash npm2yarn
+npm i jsonwebtoken
+
+npm i jose
+```
+
+### Generate JWT
+
+<Tabs
+defaultValue="jsonwebtoken"
+values={[
+  { label: "jsonwebtoken", value: "jsonwebtoken" },
+  { label: "jose", value: "jose" },
+]}
+>
+<TabItem value="jsonwebtoken">
+
+Web3Auth provides documentation for using RSA256 and ECDSA—two of the most commonly used
+algorithms—for generating JWTs with the `jsonwebtoken` package. For a complete list of supported
+algorithms, developers can refer to the
+[jsonwebtoken documentation](https://www.npmjs.com/package/jsonwebtoken#algorithms-supported).
+
+<Tabs
+defaultValue="rsa"
+values={[
+  { label: "RSA256", value: "rsa" },
+  { label: "ECDSA", value: "ecdsa" },
+]}
+>
+<TabItem value="rsa">
+
+Developers can create an `index.js` file and insert the following code snippet to generate a JWT
+using the `RSA` algorithm.
+
+```tsx
+import jwt from "jsonwebtoken";
+import fs from "fs";
+
+var privateKey = fs.readFileSync("privateKey.pem");
+
+var token = jwt.sign(
+  {
+    sub: "faj2720i2fdG7NsqznOKrthDvq43", // must be unique to each user
+    name: "Mohammad Shahbaz Alam",
+    email: "shahbaz@web3auth.io",
+    aud: "urn:my-resource-server", // -> to be used in Custom Authentication as JWT Field
+    iss: "https://my-authz-server", // -> to be used in Custom Authentication as JWT Field
+    iat: Math.floor(Date.now() / 1000),
+    exp: Math.floor(Date.now() / 1000) + 60 * 60,
+  },
+  privateKey,
+  { algorithm: "RS256", keyid: "1bb9605c36e69386830202b2d" }, // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
+);
+
+console.log(token);
+```
+
+</TabItem>
+<TabItem value="ecdsa">
+
+Developers can create an `index.js` file and insert the following code snippet to generate a JWT
+using the `ECDSA` algorithm.
+
+```tsx
+import jwt from "jsonwebtoken";
+import fs from "fs";
+
+var privateKey = fs.readFileSync("ec-secp256k1-privateKey.pem");
+
+var token = jwt.sign(
+  {
+    sub: "faj2720i2fdG7NsqzncndijwnKrthDvq43",
+    name: "Mohammad Shahbaz Alam",
+    email: "shahbaz@web3auth.io",
+    aud: "urn:my-resource-server", // -> to be used in Custom Authentication as JWT Field
+    iss: "https://my-authz-server", // -> to be used in Custom Authentication as JWT Field
+    iat: Math.floor(Date.now() / 1000),
+    exp: Math.floor(Date.now() / 1000) + 60 * 60,
+  },
+  privateKey,
+  { algorithm: "ECDSA", keyid: "1bb9605c36e69386830202b2d" }, // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
+);
+
+console.log(token);
+```
+
+</TabItem>
+</Tabs>
+
+</TabItem>
+<TabItem value="jose">
+
+Create an index.js file and paste the below code to generate the JWT using RSA algorithm.
+
+```tsx
+import * as jose from "jose";
+import fs from "fs";
+var privateKey = fs.readFileSync("privateKey.pem");
+var publicKey = fs.readFileSync("publicKey.pem");
+
+const jwt = await new jose.SignJWT({ "urn:example:claim": true })
+  .setProtectedHeader({ alg: "RS256", kid: "1bb9605c36e69386830202b2d" }) // <-- Replace it with your kid. This has to be present in the JWKS endpoint.
+  .setIssuedAt()
+  .setIssuer("https://my-authz-server")
+  .setAudience("urn:my-resource-server")
+  .setExpirationTime("2h")
+  .sign(privateKey);
+
+console.log(jwt);
+
+// Verifying the JWT using Remote JWK Set.
+// This is just to show how the Verify works, look above to set-up custom jwt verifier on the Web3Auth Dashboard.
+// Check the steps below to see how once can generate the JWKS
+const JWKS = jose.createRemoteJWKSet(new URL("https://my-authz-server/.well-known/jwks.json"));
+
+const { payload, protectedHeader } = await jose.jwtVerify(jwt, JWKS, {
+  issuer: "https://my-authz-server",
+  audience: "urn:my-resource-server",
+});
+
+console.log(protectedHeader);
+console.log(payload);
+```
+
+</TabItem>
+</Tabs>
+
+:::warning Facing issue with JWT?
+
+Check out [**this troubleshooting page to fix those.**](/troubleshooting/jwt-errors)
+
+:::
 
 ## Usage
 
@@ -108,7 +297,7 @@ createRoot(document.getElementById("root")!).render(
 );
 ```
 
-Since, the `Firebase Connection` details are available from Dashboard, developers don't need to pass
+Since, the `Custom Connection` details are available from Dashboard, developers don't need to pass
 any additional parameters to the `Web3AuthProvider`.
 
 > Follow our [Quickstart Guide](/quick-start) to setup the basic flow.