Generalize remote session creation

packages/keychain/src/components/connect/CreateController.tsx

@@ -8,9 +8,11 @@ import { isSignedUp } from "../../utils/cookie";
 export function CreateController({
   isSlot,
   loginMode,
+  onCreated,
 }: {
   isSlot?: boolean;
   loginMode?: LoginMode;
+  onCreated?: () => void;
 }) {
   const { error } = useConnection();
   const [showSignup, setShowSignup] = useState(true);
@@ -32,6 +34,7 @@ export function CreateController({
       onLogin={(username) => {
         setPrefilledUsername(username);
         setShowSignup(false);
+        onCreated?.();
       }}
       isSlot={isSlot}
     />
@@ -41,6 +44,7 @@ export function CreateController({
       onSignup={(username) => {
         setPrefilledUsername(username);
         setShowSignup(true);
+        onCreated?.();
       }}
       mode={loginMode}
       isSlot={isSlot}

packages/keychain/src/pages/failure.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Container } from "components/layout";
+import { AlertIcon, ExternalIcon } from "@cartridge/ui";
+import { Link, Text } from "@chakra-ui/react";
+import NextLink from "next/link";
+import { CARTRIDGE_DISCORD_LINK } from "const";
+
+export default function Failure() {
+  return (
+    <Container
+      variant="connect"
+      hideAccount
+      icon={<AlertIcon boxSize={9} />}
+      title="Uh-oh something went wrong"
+      description={
+        <>
+          If this problem persists swing by the Cartridge
+          <Text color="inherit">
+            support channel on{" "}
+            <Link
+              as={NextLink}
+              href={CARTRIDGE_DISCORD_LINK}
+              isExternal
+              color="link.blue"
+              display="inline-flex"
+              flexDir="row"
+              columnGap="0.1rem"
+              alignItems="center"
+            >
+              Discord
+              <ExternalIcon />
+            </Link>
+          </Text>
+        </>
+      }
+    />
+  );
+}

packages/keychain/src/pages/login.tsx

@@ -1,18 +1,29 @@
+"use client";
+
 import { useRouter } from "next/router";
 import { Login as LoginComponent } from "components/connect";
 import { useConnection } from "hooks/connection";
-import dynamic from "next/dynamic";
 
-function Login() {
+export default function Login() {
   const router = useRouter();
   const { controller, rpcUrl, chainId, error } = useConnection();
 
+  const navigateToSuccess = () => {
+    router.replace({
+      pathname: "/success",
+      query: {
+        title: "Logged in!",
+        description: "Your controller is ready",
+      },
+    });
+  };
+
   if (error) {
     return <>{error.message}</>;
   }
 
   if (controller) {
-    router.replace(`${process.env.NEXT_PUBLIC_ADMIN_URL}/profile`);
+    navigateToSuccess();
   }
 
   if (!rpcUrl || !chainId) {
@@ -22,11 +33,7 @@ function Login() {
   return (
     <LoginComponent
       onSignup={() => router.push({ pathname: "/signup", query: router.query })}
-      onSuccess={async () => {
-        router.replace(`${process.env.NEXT_PUBLIC_ADMIN_URL}/profile`);
-      }}
+      onSuccess={navigateToSuccess}
     />
   );
 }
-
-export default dynamic(() => Promise.resolve(Login), { ssr: false });

packages/keychain/src/pages/session.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Policy } from "@cartridge/controller";
+import { CreateController, CreateSession as CreateSessionComp } from "components/connect";
+
+import { useConnection } from "hooks/connection";
+import { useRouter } from "next/router";
+import { useCallback, useEffect } from "react";
+import { Call, hash } from "starknet";
+import { LoginMode } from "components/connect/types";
+
+type SessionQueryParams = Record<string, string> & {
+  callback_uri: string;
+};
+
+/**
+    This page is for creating session
+*/
+export default function CreateRemoteSession() {
+  const router = useRouter();
+  const queries = router.query as SessionQueryParams;
+
+  const { controller, policies, origin } =
+    useConnection();
+
+  const navigateBackHere = useCallback(() => {
+    router.replace({
+      pathname: "/session",
+      query: router.query,
+    });
+  }, [router]);
+
+  // Handler for calling the callback uri.
+  // Send the session details to the callback uri in the body of the
+  // POST request. If the request is successful, then redirect to the
+  // success page. Else, redirect to the failure page.
+  const onCallback = useCallback(() => {
+    const url = new URL(decodeURIComponent(queries.callback_uri));
+    const session = controller.account.sessionJson();
+    if (!url || !session) {
+      router.replace(`/failure`);
+      return;
+    }
+
+    const headers = new Headers();
+    headers.append("Content-Type", "application/json");
+
+    fetch(url, {
+      body: JSON.stringify({
+        username: controller.username,
+        credentials: {
+          publicKey: controller.publicKey,
+          credentialId: controller.credentialId,
+        },
+        session,
+      }),
+      headers,
+      method: "POST",
+    })
+      .then(async (res) => {
+        if (res.ok) {
+          return router.replace({
+            pathname: "/success",
+            query: {
+              title: "Seession Created!",
+              description: "Return to your terminal to continue",
+            },
+          });
+        }
+
+        Promise.reject();
+      })
+      .catch((e) => {
+        console.error("failed to call the callback url", e);
+        router.replace(`/failure`);
+      });
+  }, [router, queries.callback_uri, controller]);
+
+  // Handler when user clicks the Create button
+  const onConnect = useCallback(
+    (_: Policy[]) => {
+      if (!controller.account.sessionJson()) {
+        throw new Error("Session not found");
+      }
+
+      if (!queries.callback_uri) {
+        throw new Error("Callback URI is missing");
+      }
+
+      onCallback();
+    },
+    [queries.callback_uri, controller, onCallback],
+  );
+
+  // Once we have a connected controller initialized, check if a session already exists.
+  // If yes, check if the policies of the session are the same as the ones that are
+  // currently being requested. Return existing session to the callback uri if policies match.
+  useEffect(() => {
+    if (!controller || !origin) {
+      return;
+    }
+
+    let calls = policies.map((policy) => {
+      return {
+        contractAddress: policy.target,
+        entrypoint: hash.getSelector(policy.method),
+        calldata: [],
+      } as Call;
+    });
+
+    // if the requested policies has no mismatch with existing policies then return
+    // the exising session
+    if (controller.account.hasSession(calls)) {
+      onCallback();
+    }
+  }, [controller, origin, policies, onCallback]);
+
+  return controller ? (
+    <CreateController loginMode={LoginMode.Controller} onCreated={navigateBackHere} />
+  ) : (
+    <CreateSessionComp onConnect={onConnect} />
+  );
+}

packages/keychain/src/pages/signup.tsx

@@ -1,18 +1,29 @@
+"use client";
+
 import { useRouter } from "next/router";
 import { Signup as SignupComponent } from "components/connect";
 import { useConnection } from "hooks/connection";
-import dynamic from "next/dynamic";
 
-function Signup() {
+export default function Signup() {
   const router = useRouter();
   const { controller, rpcUrl, chainId, error } = useConnection();
 
+  const navigateToSuccess = (title: string) => {
+    router.replace({
+      pathname: "/success",
+      query: {
+        title,
+        description: "Your controller is ready",
+      },
+    });
+  };
+
   if (error) {
     return <>{error.message}</>;
   }
 
   if (controller) {
-    router.replace(`${process.env.NEXT_PUBLIC_ADMIN_URL}/profile`);
+    navigateToSuccess("Already signed up!");
   }
 
   if (!rpcUrl || !chainId) {
@@ -22,11 +33,7 @@ function Signup() {
   return (
     <SignupComponent
       onLogin={() => router.push({ pathname: "/login", query: router.query })}
-      onSuccess={() => {
-        router.replace(`${process.env.NEXT_PUBLIC_ADMIN_URL}/profile`);
-      }}
+      onSuccess={() => navigateToSuccess("Signed up!")}
     />
   );
 }
-
-export default dynamic(() => Promise.resolve(Signup), { ssr: false });