Login optimizations

packages/keychain/src/components/Auth/Authenticate.tsx

@@ -5,7 +5,6 @@ import { doSignup } from "hooks/account";
 import { Container } from "../Container";
 import { PortalBanner } from "components/PortalBanner";
 import { PortalFooter } from "components/PortalFooter";
-import { requestStorageDropCookie } from "./utils";
 
 type AuthAction = "signup" | "login";
 
@@ -24,8 +23,6 @@ export function Authenticate({
   const onAuth = useCallback(async () => {
     setIsLoading(true);
 
-    await requestStorageDropCookie();
-
     try {
       switch (action) {
         case "signup":
@@ -76,10 +73,7 @@ export function Authenticate({
   return (
     <>
       <Container hideAccount>
-        <PortalBanner
-          title={title}
-          description={description}
-        />
+        <PortalBanner title={title} description={description} />
 
         <PortalFooter>
           <Button colorScheme="colorful" onClick={onAuth} isLoading={isLoading}>

packages/keychain/src/components/Auth/Login.tsx

@@ -14,7 +14,6 @@ import { useAnalytics } from "hooks/analytics";
 import { fetchAccount, validateUsernameFor } from "./utils";
 import { RegistrationLink } from "./RegistrationLink";
 import { useControllerTheme } from "hooks/theme";
-import { PopupCenter } from "utils/url";
 import { doLogin } from "hooks/account";
 import { Error as ErrorComp } from "components/Error";
 
@@ -29,26 +28,38 @@ export function Login({
   const { event: log } = useAnalytics();
   const theme = useControllerTheme();
   const [isLoading, setIsLoading] = useState(false);
+  const [expiresAt] = useState<bigint>(3000000000n);
   const [error, setError] = useState();
 
   const onSubmit = useCallback(
     async (values: FormValues) => {
       setIsLoading(true);
 
-      let address;
-      try {
-        const {
-          account: {
-            credentials: {
-              webauthn: [{ id: credentialId, publicKey }],
-            },
-            contractAddress,
+      const {
+        account: {
+          credentials: {
+            webauthn: [{ id: credentialId, publicKey }],
           },
-        } = await fetchAccount(values.username);
-        address = contractAddress;
+          contractAddress: address,
+        },
+      } = await fetchAccount(values.username);
+
+      try {
+        const controller = new Controller(address, publicKey, credentialId);
 
-        await doLogin(values.username, credentialId, publicKey);
-        onSuccess(new Controller(address, publicKey, credentialId));
+        if (isSlot) {
+          await doLogin(values.username, credentialId, publicKey);
+        } else {
+          await controller.approve(
+            context.origin,
+            chainId,
+            expiresAt,
+            context.policies,
+          );
+        }
+
+        controller.store();
+        onSuccess(controller);
 
         log({ type: "webauthn_login", address });
       } catch (e) {
@@ -118,23 +129,6 @@ export function Login({
                 type="submit"
                 colorScheme="colorful"
                 isLoading={isLoading}
-                onClick={async (ev) => {
-                  // Storage request must be done in onClick rather than onSubmit
-                  document.requestStorageAccess().catch((e) => {
-                    console.error(e);
-                    PopupCenter(
-                      `/authenticate?name=${encodeURIComponent(
-                        props.values.username,
-                      )}&action=login`,
-                      "Cartridge Login",
-                      480,
-                      640,
-                    );
-
-                    // Prevent onsubmit from firing
-                    ev.preventDefault();
-                  });
-                }}
               >
                 Log in
               </Button>

packages/keychain/src/components/Auth/Signup.tsx

@@ -8,7 +8,11 @@ import {
   useFormikContext,
 } from "formik";
 import { constants } from "starknet";
-import { PORTAL_FOOTER_MIN_HEIGHT, PortalBanner, PortalFooter } from "components";
+import {
+  PORTAL_FOOTER_MIN_HEIGHT,
+  PortalBanner,
+  PortalFooter,
+} from "components";
 import { useCallback, useEffect, useState } from "react";
 import { DeployAccountDocument, useAccountQuery } from "generated/graphql";
 import Controller from "utils/controller";
@@ -57,7 +61,7 @@ export function Signup({
 
     doSignup(decodeURIComponent(values.username))
       .catch((e) => {
-        setError(e)
+        setError(e);
       })
       .finally(() => setIsLoading(false));
   }, []);
@@ -138,6 +142,7 @@ function Form({
           chainId: "starknet:SN_SEPOLIA",
         });
         await controller.account(constants.StarknetChainId.SN_SEPOLIA).sync();
+        controller.store();
 
         // TODO: Enable once controller is ready for mainnet
         // controller.account(constants.StarknetChainId.SN_MAIN).status =

packages/keychain/src/components/Auth/utils.ts

@@ -48,21 +48,6 @@ export function fetchAccount(username: string) {
   });
 }
 
-// Cross-site cookies access will eventually be disabled on all major browsers, use storage access api
-// for now, then migrate to CHIPS when golang 1.23 with support for partitioned cookies is released.
-// https://developers.google.com/privacy-sandbox/3pcd
-export async function requestStorageDropCookie() {
-  await document.requestStorageAccess();
-
-  if (process.env.NODE_ENV === "development") {
-    document.cookie = "visited=true; path=/";
-    return;
-  }
-
-  document.cookie =
-    "visited=true; domain=.cartridge.gg; path=/; samesite=none; secure";
-}
-
 export function isIframe() {
   return typeof window !== "undefined" ? window.top !== window.self : false;
 }

packages/keychain/src/pages/index.tsx

@@ -298,6 +298,7 @@ const Index: NextPage = () => {
           />
         ) : (
           <Login
+            chainId={chainId}
             prefilledName={prefilledUsername}
             onSignup={(username) => {
               setPrefilledUsername(username);

packages/keychain/src/utils/controller.ts

@@ -58,13 +58,6 @@ export default class Controller {
         },
       ),
     ];
-
-    Storage.set(
-      selectors[VERSION].admin(this.address, process.env.NEXT_PUBLIC_ADMIN_URL),
-      {},
-    );
-    Storage.set(selectors["0.0.1"].active(), address);
-    this.store();
   }
 
   async getUser() {
@@ -105,11 +98,10 @@ export default class Controller {
       throw new Error("Account not found");
     }
 
-    const credentials = await account.cartridge
-      .createSession(policies, expiresAt)
-      .catch((e) => {
-        console.log(e);
-      });
+    const credentials = await account.cartridge.createSession(
+      policies,
+      expiresAt,
+    );
 
     Storage.set(selectors[VERSION].session(this.address, origin, chainId), {
       policies,
@@ -144,6 +136,13 @@ export default class Controller {
 
   store() {
     Storage.set("version", VERSION);
+
+    Storage.set(
+      selectors[VERSION].admin(this.address, process.env.NEXT_PUBLIC_ADMIN_URL),
+      {},
+    );
+    Storage.set(selectors[VERSION].active(), this.address);
+
     return Storage.set(selectors[VERSION].account(this.address), {
       address: this.address,
       publicKey: this.publicKey,