feat: OAuth

README.md

@@ -41,11 +41,16 @@ After installing the extension,
 1. Click on the newly-added Source Academy icon on the left sidebar.
 2. Launch the Source Academy panel.
 
-<img src="./docs/images/launch-panel-from-sidebar.png" width="600">
+   <img src="./docs/images/launch-panel-from-sidebar.png" width="600">
 
-Alternatively, use the `Source Academy: Show the Source Academy Panel` command.
+   Alternatively, use the `Source Academy: Show the Source Academy Panel` command.
 
-Once the panel loads, you'll be prompted to log in. Afterwards, begin coding by opening any assessment.
+3. Choose a login method and authenticate in your browser.
+
+   - When prompted, click **Open** to proceed to the external website.
+   - After login, click **Open** again to allow the extension to open the URI. Optionally, check `Do not ask me again for this extension`.
+
+4. You may now begin coding by opening any assessment.
 
 ### Changing the frontend
 

src/commands/showPanel.tsx

@@ -22,24 +22,24 @@ export async function showPanel(
     language = LANGUAGES.SOURCE_1;
   }
 
-  // Get a reference to the active editor (before the focus is switched to our newly created webview)
-  // firstEditor = vscode.window.activeTextEditor!;
-
-  messageHandler.panel = vscode.window.createWebviewPanel(
-    "source-academy-panel",
-    "Source Academy",
-    vscode.ViewColumn.Beside,
-    {
-      enableScripts: true, // Enable scripts in the webview
-      retainContextWhenHidden: true,
-    },
-  );
+  // Don't recreate the panel it already exists. There will only be one panel at anytime.
+  if (!messageHandler.panel) {
+    messageHandler.panel = vscode.window.createWebviewPanel(
+      "source-academy-panel",
+      "Source Academy",
+      vscode.ViewColumn.Beside,
+      {
+        enableScripts: true, // Enable scripts in w the webview
+        retainContextWhenHidden: true,
+      },
+    );
 
-  messageHandler.panel.webview.onDidReceiveMessage(
-    (message: MessageType) => messageHandler.handleMessage(context, message),
-    undefined,
-    context.subscriptions,
-  );
+    messageHandler.panel.webview.onDidReceiveMessage(
+      (message: MessageType) => messageHandler.handleMessage(context, message),
+      undefined,
+      context.subscriptions,
+    );
+  }
 
   const iframeUrl = new URL(route ?? "/playground", config.frontendBaseUrl)
     .href;

src/extension.ts

@@ -51,6 +51,20 @@ export function activate(context: vscode.ExtensionContext) {
       "*.js": "source",
     });
   }
+
+  vscode.window.registerUriHandler({
+    handleUri(uri: vscode.Uri) {
+      const searchParams = new URLSearchParams(uri.query);
+      // The following two params are available when logging in via OAuth providers
+      const code = searchParams.get("code");
+      const clientRequestId = searchParams.get("client-request-id");
+
+      vscode.commands.executeCommand(
+        "source-academy.show-panel",
+        `/login/vscode_callback?code=${code}&client-request-id=${clientRequestId}`,
+      );
+    },
+  });
 }
 
 // This method is called when your extension is deactivated

src/utils/messageHandler.tsx

@@ -173,6 +173,9 @@ export class MessageHandler {
             this.panel?.reveal(vscode.ViewColumn.Two);
           }
           break;
+      case MessageTypeNames.LoginWithBrowser:
+        const { route } = message;
+        vscode.env.openExternal(vscode.Uri.parse(route));
       }
       console.log(`${Date.now()} Finish handleMessage: ${message.type}`);
     }

src/utils/messages.ts

@@ -89,6 +89,9 @@ const Messages = createMessages({
     questionId,
     choice,
   }),
+  LoginWithBrowser: (route: string) => ({
+    route,
+  }),
 });
 
 export default Messages;