Frontend for wallet authentication and PASETO claim

.gitpod.yml

@@ -1,9 +1,5 @@
-# This configuration file was automatically generated by Gitpod.
-# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
-# and commit this file to your remote git repository to share the goodness with others.
-
 tasks:
-  - init: go get && go build ./... && go test ./...
-    command: go run
-
-
+  - init: go get ./src
+    command: go run ./src
+  - init: cd auth-next-app && yarn
+    command: yarn dev

auth-next-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

auth-next-app/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

auth-next-app/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

auth-next-app/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

auth-next-app/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "authh-next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@walletconnect/web3-provider": "^1.8.0",
+    "axios": "^0.27.2",
+    "ethers": "^5.7.0",
+    "next": "12.2.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "web3modal": "^1.9.9"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.14",
+    "@types/react": "18.0.18",
+    "@types/react-dom": "18.0.6",
+    "autoprefixer": "^10.4.8",
+    "eslint": "8.23.0",
+    "eslint-config-next": "12.2.5",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
+    "typescript": "4.8.2"
+  }
+}

auth-next-app/pages/_app.tsx

@@ -0,0 +1,13 @@
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { WalletProvider } from "../src/contexts/WalletContext";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <WalletProvider>
+      <Component {...pageProps} />
+    </WalletProvider>
+  );
+}
+
+export default MyApp;

auth-next-app/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

auth-next-app/pages/index.tsx

@@ -0,0 +1,79 @@
+import type { NextPage } from "next";
+import { useContext } from "react";
+import { WalletContext } from "../src/contexts/WalletContext";
+import { Axios } from "axios";
+import {
+  ApiResponse,
+  GetFlowIdPayload,
+  PostAuthenticatePayload,
+  PostAuthenticateRequest,
+} from "./types";
+const Home: NextPage = () => {
+  const walletContext = useContext(WalletContext);
+  const verifyWithDiscord = async () => {
+    const axios = new Axios({
+      baseURL: process.env.NEXT_PUBLIC_GATEWAY_API,
+      transformRequest: (req) => JSON.stringify(req),
+      transformResponse: (data) => JSON.parse(data),
+    });
+    try {
+      const flowIdRes = await axios.get<ApiResponse<GetFlowIdPayload>>(
+        `flowid`,
+        {
+          params: {
+            walletAddress: walletContext.walletAddress,
+          },
+        }
+      );
+
+      if (flowIdRes.status != 200) {
+        throw new Error("failed to call flowid api");
+      }
+
+      const { eula, flowId } = flowIdRes.data.payload;
+      const message = eula + flowId;
+      const signature = await walletContext.web3Provider
+        ?.getSigner()
+        .signMessage(message);
+      if (!signature) {
+        alert("Failed to get signature");
+        return;
+      }
+      const authBody: PostAuthenticateRequest = {
+        flowId,
+        signature,
+      };
+      const authRes = await axios.post<ApiResponse<PostAuthenticatePayload>>(
+        `authenticate`,
+        authBody
+      );
+      if (authRes.status != 200) {
+        throw new Error("failed to call authenticate api");
+      }
+    } catch (error) {
+      console.log(error);
+      alert("Failed to verify, try again later");
+    }
+  };
+  return (
+    <div className="flex justify-center items-center h-screen">
+      {walletContext.walletAddress ? (
+        <button
+          className="bg-blue-600 font-bold rounded-lg p-3 text-2xl"
+          onClick={verifyWithDiscord}
+        >
+          Verify with discord
+        </button>
+      ) : (
+        <button
+          className="bg-green-500 font-bold rounded-lg p-3 text-2xl"
+          onClick={walletContext.getWeb3Provider}
+        >
+          Connect Wallet
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Home;

auth-next-app/pages/types.ts

@@ -0,0 +1,19 @@
+export interface ApiResponse<T> {
+    statusCode: number
+    message: string
+    payload: T
+}
+
+export interface GetFlowIdPayload {
+    eula: string
+    flowId: string
+}
+
+export interface PostAuthenticatePayload {
+    token: string
+}
+
+export interface PostAuthenticateRequest {
+    flowId: string
+    signature: string
+}

auth-next-app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

auth-next-app/sample.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_GATEWAY_API=

auth-next-app/src/contexts/WalletContext.tsx

@@ -0,0 +1,77 @@
+import { providers } from "ethers";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import Web3Modal from "web3modal";
+import WalletConnectProvider from "@walletconnect/web3-provider";
+import { Chain } from "../env";
+
+type WalletContextType = {
+  web3Provider: providers.Web3Provider | undefined;
+  getWeb3Provider: () => Promise<providers.Web3Provider>;
+  clearWallet: () => void;
+  walletAddress: string;
+};
+export let WalletContext: React.Context<WalletContextType>;
+
+const providerOptions = {
+  walletconnect: {
+    package: WalletConnectProvider,
+    options: {
+      rpc: {
+        137: "https://rpc-mumbai.matic.today/",
+      },
+    },
+  },
+};
+let web3Modal: Web3Modal;
+if (typeof window !== "undefined") {
+  web3Modal = new Web3Modal({
+    network: Chain,
+    cacheProvider: true,
+    providerOptions,
+  });
+}
+
+export function WalletProvider(props: React.PropsWithChildren) {
+  const [provider, setProvider] = useState<providers.Web3Provider>();
+  const [walletAddress, setWalletAddress] = useState("");
+  const getWeb3Provider = useCallback(async () => {
+    const wallet = await web3Modal.connect();
+    const provider = new providers.Web3Provider(wallet);
+    setWalletAddress(await provider.getSigner().getAddress());
+    setProvider(provider);
+    return provider;
+  }, []);
+
+  useEffect(() => {
+    if (web3Modal.cachedProvider) {
+      getWeb3Provider();
+    }
+  }, [getWeb3Provider]);
+
+  const clearWallet = useCallback(() => {
+    try {
+      web3Modal.clearCachedProvider();
+      setProvider(undefined);
+    } catch (error) {
+      console.log({ error });
+    }
+  }, []);
+
+  const value: WalletContextType = useMemo(
+    () => ({
+      web3Provider: provider,
+      clearWallet,
+      getWeb3Provider,
+      walletAddress,
+    }),
+    [provider, clearWallet, getWeb3Provider, walletAddress]
+  );
+
+  WalletContext = React.createContext(value);
+
+  return (
+    <WalletContext.Provider value={value}>
+      {props.children}
+    </WalletContext.Provider>
+  );
+}

auth-next-app/src/env.ts

@@ -0,0 +1 @@
+export const Chain = "mumbai"

auth-next-app/styles/globals.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+}

auth-next-app/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};