feat: add zk login

.env.example

@@ -2,3 +2,8 @@ ACME_EMAIL=
 NEXT_PUBLIC_PROXY_URL=
 NEXT_PUBLIC_PROXY_WALLET=
 NEXT_PUBLIC_USDC_TYPE= # e.g. for testnet '0xa1ec7fc00a6f40db9693ad1415d0c193ad3906494428cf252621037bd7117e29::usdc::USDC'
+NEXT_PUBLIC_SUI_RPC_URL=
+NEXT_PUBLIC_PROVER_URL=
+NEXT_PUBLIC_GOOGLE_OAUTH_SCOPE="openid email profile"
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=
+NEXT_PUBLIC_GOOGLE_REDIRECT_URI="/auth/google"

.github/workflows/deploy.yml

@@ -33,8 +33,13 @@ jobs:
       - name: Build
         env:
           NEXT_PUBLIC_PROXY_URL: "https://credentials.atoma.network"
-          NEXT_PUBLIC_USDC_TYPE: "0xa1ec7fc00a6f40db9693ad1415d0c193ad3906494428cf252621037bd7117e29::usdc::USDC"
           NEXT_PUBLIC_PROXY_WALLET: "0xec2c53f7c706e37518afedb71bbe46021fb5b1ab1c2a56754541120cac8d7a9e"
+          NEXT_PUBLIC_USDC_TYPE: "0xa1ec7fc00a6f40db9693ad1415d0c193ad3906494428cf252621037bd7117e29::usdc::USDC"
+          NEXT_PUBLIC_SUI_RPC_URL: "https://fullnode.testnet.sui.io:443"
+          NEXT_PUBLIC_PROVER_URL: "http://77.37.96.94:5001"
+          NEXT_PUBLIC_GOOGLE_OAUTH_SCOPE: "openid email profile"
+          NEXT_PUBLIC_GOOGLE_CLIENT_ID: "135471414073-41r9t89rejgfr6bc9aptjpm75o4oedk2.apps.googleusercontent.com"
+          NEXT_PUBLIC_GOOGLE_REDIRECT_URI: "https://cloud.atoma.network/auth/google"
         run: npm run build
 
       - name: Upload artifact

app/GlobalStateContext.tsx

@@ -1,27 +1,34 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
 import ModalError from "./ModalError";
+import ZkLogin from "@/lib/zklogin";
+
+
+export type LoginState = 'loggedIn' | 'loggedOut' | 'loggingIn';
 
 interface GlobalState {
-  isLoggedIn: boolean;
-  setIsLoggedIn: (isLoggedIn: boolean) => void;
+  logState: LoginState;
+  setLogState: (logState: LoginState) => void;
   error?: string;
   setError: (error: string) => void;
+  zkLogin: ZkLogin;
 }
 
 const GlobalStateContext = createContext<GlobalState | undefined>(undefined);
 
 export const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [logState, setLogState] = useState<LoginState>('loggingIn');
   const [error, setError] = useState<string | undefined>(undefined);
+  const [zkLogin] = useState(new ZkLogin(setLogState));
 
   useEffect(() => {
-    if (localStorage.getItem("access_token")) {
-      setIsLoggedIn(true);
+    if (localStorage.getItem("access_token") && !localStorage.getItem("id_token")) {
+      // This is when the user is logged in but not via zklogin. Zklogin will check the state of the user and set the state accordingly.
+      setLogState('loggedIn');
     }
   }, []);
 
   return (
-    <GlobalStateContext.Provider value={{ isLoggedIn, setIsLoggedIn, error, setError }}>
+    <GlobalStateContext.Provider value={{ logState: logState, setLogState: setLogState, error, setError, zkLogin }}>
       {children}
       {error && <ModalError message={error} onClose={() => setError(undefined)}/>}
     </GlobalStateContext.Provider>

app/page.tsx

@@ -23,6 +23,7 @@ export default function Home() {
       <link rel="icon" type="image/png" sizes="32x32" href="https://mintlify.s3-us-west-1.amazonaws.com/atoma/_generated/favicon/favicon-32x32.png?v=3"/>
       <link rel="icon" type="image/png" sizes="16x16" href="https://mintlify.s3-us-west-1.amazonaws.com/atoma/_generated/favicon/favicon-16x16.png?v=3"/>
       <link rel="shortcut icon" type="image/x-icon" href="https://mintlify.s3-us-west-1.amazonaws.com/atoma/_generated/favicon/favicon.ico?v=3" />
+      <script src="https://accounts.google.com/gsi/client" async defer></script>
       <QueryClientProvider client={queryClient}>
         <SuiClientProvider networks={networkConfig} defaultNetwork="testnet">
           <WalletProvider autoConnect={true}>