diff --git a/src/auth/useInteractiveLogin.ts b/src/auth/useInteractiveLogin.ts
index 2cfe78cd..cf230383 100644
--- a/src/auth/useInteractiveLogin.ts
+++ b/src/auth/useInteractiveLogin.ts
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import { useCallback } from "react";
-import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
-import { MatrixClient } from "matrix-js-sdk";
+import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
+import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { initClient, defaultHomeserver } from "../matrix-utils";
 import { Session } from "../ClientContext";
@@ -29,7 +29,7 @@ export const useInteractiveLogin = () =>
       password: string
     ) => Promise<[MatrixClient, Session]>
   >(async (homeserver: string, username: string, password: string) => {
-    const authClient = matrix.createClient(homeserver);
+    const authClient = createClient(homeserver);
 
     const interactiveAuth = new InteractiveAuth({
       matrixClient: authClient,
@@ -41,11 +41,15 @@ export const useInteractiveLogin = () =>
           },
           password,
         }),
+      stateUpdated: null,
+      requestEmailToken: null,
     });
 
+    // XXX: This claims to return an IAuthData which contains none of these
+    // things - the js-sdk types may be wrong?
     /* eslint-disable camelcase */
     const { user_id, access_token, device_id } =
-      await interactiveAuth.attemptAuth();
+      (await interactiveAuth.attemptAuth()) as any;
     const session = {
       user_id,
       access_token,
diff --git a/src/auth/useInteractiveRegistration.ts b/src/auth/useInteractiveRegistration.ts
index 2386b531..320055bf 100644
--- a/src/auth/useInteractiveRegistration.ts
+++ b/src/auth/useInteractiveRegistration.ts
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import { useState, useEffect, useCallback, useRef } from "react";
-import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
+import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { initClient, defaultHomeserver } from "../matrix-utils";
 import { Session } from "../ClientContext";
@@ -37,7 +37,7 @@ export const useInteractiveRegistration = (): [
 
   const authClient = useRef<MatrixClient>();
   if (!authClient.current) {
-    authClient.current = matrix.createClient(defaultHomeserver);
+    authClient.current = createClient(defaultHomeserver);
   }
 
   useEffect(() => {
@@ -81,11 +81,14 @@ export const useInteractiveRegistration = (): [
             });
           }
         },
+        requestEmailToken: null,
       });
 
+      // XXX: This claims to return an IAuthData which contains none of these
+      // things - the js-sdk types may be wrong?
       /* eslint-disable camelcase */
       const { user_id, access_token, device_id } =
-        await interactiveAuth.attemptAuth();
+        (await interactiveAuth.attemptAuth()) as any;
 
       const client = await initClient({
         baseUrl: defaultHomeserver,
diff --git a/src/main.jsx b/src/main.jsx
index d9a87d26..08c48798 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// We need to import this somewhere, once, so that the correct 'request'
+// function gets set. It needs to be not in the same file as we use
+// createClient, or the typescript transpiler gets confused about
+// dependency references.
+import "matrix-js-sdk/src/browser-index";
+
 import React from "react";
 import ReactDOM from "react-dom";
 import { createBrowserHistory } from "history";