Creating a Protected Dashboard

What We Are Doing:

Adding a protected resource (e.g., /dashboard) that only verified users can access.
Decoding the access_token to display user information extracted from the credential.

Why: To show the end result of verification, we`ll display a dashboard page that uses the credential data.

Steps: Create public/dashboard.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Dashboard</title>
</head>
<body>
  <h2>Welcome to the Dashboard!</h2>
  <p>DID: <span id="did"></span></p>
  <p>First Name: <span id="first-name"></span></p>
  <p>Last Name: <span id="last-name"></span></p>
  <p>Age: <span id="age"></span></p>

  <script>
    (async () => {
      const token = localStorage.getItem("access_token");
      if (!token) return;

      const res = await fetch('/decode-access-token', {
        headers: { Authorization: `Bearer ${token}` }
      });
      const data = await res.json();
      document.getElementById("did").innerText = data.did;
      document.getElementById("first-name").innerText = data.formData.firstName;
      document.getElementById("last-name").innerText = data.formData.lastName;
      document.getElementById("age").innerText = data.formData.age;
    })();
  </script>
</body>
</html>

Add a route to decode the token and extract data in src/routes.ts:

import jwt from "jsonwebtoken";
import { VerifiablePresentation } from "@empe/identity";

router.get("/decode-access-token", (req: Request, res: Response) => {
  const authHeader = req.headers["authorization"];
  const access_token = authHeader?.split(" ")[1];
  if (!access_token) res.status(401).json({ error: "Unauthorized" });

  try {
    const decoded = jwt.verify(access_token, "your-jwt-secret") as jwt.JwtPayload;
    let formData: Record<string, any> = {};

    if (decoded.vp) {
      const vp = VerifiablePresentation.fromJSON(decoded.vp);
      vp.verifiableCredentials().forEach((vc) => {
        formData = { ...formData, ...vc.credentialSubject() };
      });
    }

    res.json({
      did: decoded.sub,
      formData,
    });
  } catch (error) {
    res.status(500).json({ error: "Internal server error" });
  }
});

router.get("/dashboard", (req: Request, res: Response) => {
  res.sendFile("dashboard.html", { root: "public" });
});

Now, after verification, the user is redirected to /dashboard, and their credential info is displayed.

PreviousCreating a Verification Endpoint NextTesting the Verification Flow

Last updated 3 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Dashboard</title> </head> <body> <h2>Welcome to the Dashboard!</h2> <p>DID: <span id="did"></span></p> <p>First Name: <span id="first-name"></span></p> <p>Last Name: <span id="last-name"></span></p> <p>Age: <span id="age"></span></p> <script> (async () => { const token = localStorage.getItem("access_token"); if (!token) return; const res = await fetch('/decode-access-token', { headers: { Authorization: `Bearer ${token}` } }); const data = await res.json(); document.getElementById("did").innerText = data.did; document.getElementById("first-name").innerText = data.formData.firstName; document.getElementById("last-name").innerText = data.formData.lastName; document.getElementById("age").innerText = data.formData.age; })(); </script> </body> </html>

import jwt from "jsonwebtoken"; import { VerifiablePresentation } from "@empe/identity"; router.get("/decode-access-token", (req: Request, res: Response) => { const authHeader = req.headers["authorization"]; const access_token = authHeader?.split(" ")[1]; if (!access_token) res.status(401).json({ error: "Unauthorized" }); try { const decoded = jwt.verify(access_token, "your-jwt-secret") as jwt.JwtPayload; let formData: Record<string, any> = {}; if (decoded.vp) { const vp = VerifiablePresentation.fromJSON(decoded.vp); vp.verifiableCredentials().forEach((vc) => { formData = { ...formData, ...vc.credentialSubject() }; }); } res.json({ did: decoded.sub, formData, }); } catch (error) { res.status(500).json({ error: "Internal server error" }); } }); router.get("/dashboard", (req: Request, res: Response) => { res.sendFile("dashboard.html", { root: "public" }); });