Fix some login problems (#6810)

* ensure that active organization is set after logging in

* avoid unnecessary page refresh after logging in

* update changelog

* explain hard reload

CHANGELOG.unreleased.md

@@ -15,6 +15,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Changed
 
 ### Fixed
+- Fixed a benign error message which briefly appeared after logging in. [#6810](https://github.com/scalableminds/webknossos/pull/6810)
 
 ### Removed
 

frontend/javascripts/admin/admin_rest_api.ts

@@ -142,11 +142,14 @@ export function sendFailedRequestAnalyticsEvent(
 export async function loginUser(formValues: {
   email: string;
   password: string;
-}): Promise<Record<string, any>> {
+}): Promise<[APIUser, APIOrganization]> {
   await Request.sendJSONReceiveJSON("/api/auth/login", {
     data: formValues,
   });
-  return getActiveUser();
+  const activeUser = await getActiveUser();
+  const organization = await getOrganization(activeUser.organization);
+
+  return [activeUser, organization];
 }
 
 export async function getUsers(): Promise<Array<APIUser>> {

frontend/javascripts/admin/auth/login_form.tsx

@@ -8,6 +8,7 @@ import { setActiveUserAction } from "oxalis/model/actions/user_actions";
 import Store from "oxalis/store";
 import messages from "messages";
 import features from "features";
+import { setActiveOrganizationAction } from "oxalis/model/actions/organization_actions";
 
 const FormItem = Form.Item;
 const { Password } = Input;
@@ -34,9 +35,9 @@ function LoginForm({ layout, onLoggedIn, hideFooter, style }: Props) {
 
   // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'formValues' implicitly has an 'any' typ... Remove this comment to see the full error message
   const onFinish = async (formValues) => {
-    const user = await loginUser(formValues);
-    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Record<string, any>' is not assi... Remove this comment to see the full error message
+    const [user, organization] = await loginUser(formValues);
     Store.dispatch(setActiveUserAction(user));
+    Store.dispatch(setActiveOrganizationAction(organization));
 
     if (onLoggedIn) {
       onLoggedIn();

frontend/javascripts/admin/auth/registration_form.tsx

@@ -8,6 +8,7 @@ import Request from "libs/request";
 import Store from "oxalis/throttled_store";
 import messages from "messages";
 import { setHasOrganizationsAction } from "oxalis/model/actions/ui_actions";
+import { setActiveOrganizationAction } from "oxalis/model/actions/organization_actions";
 const FormItem = Form.Item;
 const { Password } = Input;
 type Props = {
@@ -38,12 +39,12 @@ function RegistrationForm(props: Props) {
     const tryAutoLogin = props.tryAutoLogin || props.inviteToken != null || autoVerified;
 
     if (tryAutoLogin) {
-      const user = await loginUser({
+      const [user, organization] = await loginUser({
         email: formValues.email,
         password: formValues.password.password1,
       });
-      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Record<string, any>' is not assi... Remove this comment to see the full error message
       Store.dispatch(setActiveUserAction(user));
+      Store.dispatch(setActiveOrganizationAction(organization));
     }
 
     props.onRegistered(tryAutoLogin);

frontend/javascripts/admin/auth/spotlight_registration_form.tsx

@@ -6,6 +6,7 @@ import { setActiveUserAction } from "oxalis/model/actions/user_actions";
 import Request from "libs/request";
 import Store from "oxalis/throttled_store";
 import messages from "messages";
+import { setActiveOrganizationAction } from "oxalis/model/actions/organization_actions";
 const FormItem = Form.Item;
 const { Password } = Input;
 type Props = {
@@ -40,12 +41,12 @@ function SpotlightRegistrationForm(props: Props) {
         organizationDisplayName: `${formValues.firstName} ${formValues.lastName} Lab`,
       },
     });
-    const user = await loginUser({
+    const [user, organization] = await loginUser({
       email: formValues.email,
       password: formValues.password.password1,
     });
-    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Record<string, any>' is not assi... Remove this comment to see the full error message
     Store.dispatch(setActiveUserAction(user));
+    Store.dispatch(setActiveOrganizationAction(organization));
     props.onRegistered(true);
   }
 

frontend/javascripts/router.tsx

@@ -60,6 +60,7 @@ import { Redirect, Route, Router, Switch } from "react-router-dom";
 import { APICompoundTypeEnum, APIUser, TracingTypeEnum } from "types/api_flow_types";
 
 import ErrorBoundary from "components/error_boundary";
+import { Store } from "oxalis/singletons";
 
 const { Content } = Layout;
 
@@ -264,11 +265,15 @@ class ReactRouter extends React.Component<Props> {
               <RouteWithErrorBoundary
                 path="/dashboard"
                 render={() => {
-                  if (isAuthenticated) {
+                  // Imperatively access store state to avoid race condition when logging in.
+                  // The `isAuthenticated` prop could be outdated for a short time frame which
+                  // would lead to an unnecessary browser refresh.
+                  const { activeUser } = Store.getState();
+                  if (activeUser) {
                     return <DashboardView userId={null} isAdminView={false} initialTabKey={null} />;
                   }
 
-                  // Hard navigate
+                  // Hard navigate so that webknossos.org is shown for the demo instance.
                   window.location.href = "/";
                   return null;
                 }}