fix expired token experience

Author: christianalfoni

packages/app/package.json

@@ -73,9 +73,9 @@
     "@apollo/react-hooks": "^3.1.3",
     "@babel/plugin-transform-destructuring": "^7.5.0",
     "@babel/preset-env": "^7.5.5",
+    "@codesandbox/components": "0.0.1",
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.1.0",
-    "@codesandbox/components": "0.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",
@@ -162,9 +162,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^22.0.0-1580488381342",
+    "overmind": "^23.0.0-1582189759083",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^23.0.0-1580488381342",
+    "overmind-react": "^24.0.0-1582189759083",
     "phoenix": "^1.4.11",
     "postcss": "^7.0.26",
     "postcss-selector-parser": "^2.2.3",

packages/app/src/app/overmind/factories.ts

@@ -28,25 +28,27 @@ export const withLoadApp = <T>(
   actions.internal.setStoredSettings();
   effects.codesandboxApi.listen(actions.server.onCodeSandboxAPIMessage);
 
+  try {
+    state.user = await effects.api.getCurrentUser();
+  } catch (error) {
+    actions.internal.handleError({
+      message: '',
+      error,
+    });
+  }
+
+  state.isAuthenticating = false;
+
   if (state.jwt) {
-    try {
-      state.user = await effects.api.getCurrentUser();
-      actions.internal.setPatronPrice();
-      actions.internal.setSignedInCookie();
-      effects.analytics.identify('signed_in', true);
-      effects.analytics.setUserId(state.user.id);
-      actions.internal.showUserSurveyIfNeeded();
-      effects.live.connect();
-      actions.userNotifications.internal.initialize();
-      effects.api.preloadTemplates();
-    } catch (error) {
-      actions.internal.handleError({
-        message: 'We had trouble with signing you in',
-        error,
-      });
-    }
+    actions.internal.setPatronPrice();
+    actions.internal.setSignedInCookie();
+    effects.analytics.identify('signed_in', true);
+    effects.analytics.setUserId(state.user.id);
+    actions.internal.showUserSurveyIfNeeded();
+    effects.live.connect();
+    actions.userNotifications.internal.initialize();
+    effects.api.preloadTemplates();
   } else {
-    effects.jwt.reset();
     effects.analytics.setAnonymousId();
   }
 
@@ -55,7 +57,6 @@ export const withLoadApp = <T>(
   }
 
   state.hasLoadedApp = true;
-  state.isAuthenticating = false;
 
   try {
     const response = await effects.http.get<{

packages/app/src/app/overmind/internalActions.ts

@@ -407,7 +407,10 @@ export const handleError: Action<{
   message: string;
   error: ApiError | Error;
   hideErrorMessage?: boolean;
-}> = ({ actions, effects }, { message, error, hideErrorMessage = false }) => {
+}> = (
+  { state, actions, effects },
+  { message, error, hideErrorMessage = false }
+) => {
   if (hideErrorMessage) {
     effects.analytics.logError(error);
     effects.notificationToast.add({
@@ -438,7 +441,7 @@ export const handleError: Action<{
 
   if (response?.status === 401) {
     // Reset existing sign in info
-    effects.jwt.reset();
+    state.jwt = effects.jwt.reset();
     effects.analytics.setAnonymousId();
 
     // Allow user to sign in again in notification

packages/app/src/app/pages/NewSandbox/index.tsx

@@ -1,26 +1,30 @@
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import React, { FunctionComponent, useEffect } from 'react';
-import Media from 'react-media';
-
 import {
-  CreateSandbox,
   COLUMN_MEDIA_THRESHOLD,
+  CreateSandbox,
 } from 'app/components/CreateNewSandbox/CreateSandbox';
 import { useOvermind } from 'app/overmind';
 import { Navigation } from 'app/pages/common/Navigation';
+import React, { FunctionComponent, useEffect } from 'react';
+import Media from 'react-media';
 
-import {MaxWidth} from './elements'
+import { MaxWidth } from './elements';
 
 export const NewSandbox: FunctionComponent = () => {
   const {
+    state: { isAuthenticating },
     actions: { sandboxPageMounted },
   } = useOvermind();
 
   useEffect(() => {
     sandboxPageMounted();
   }, [sandboxPageMounted]);
 
+  if (isAuthenticating) {
+    return null;
+  }
+
   return (
     <MaxWidth>
       <Margin horizontal={1.5} style={{ height: '100%' }} vertical={1.5}>