Merge branch 'session-issues' into 'master'

Various issues

Closes #809

See merge request framasoft/mobilizon!1030

js/src/apollo/utils.ts

@@ -104,6 +104,11 @@ export async function refreshAccessToken(
 
   const refreshToken = localStorage.getItem(AUTH_REFRESH_TOKEN);
 
+  if (!refreshToken) {
+    console.debug("Refresh token not found");
+    return false;
+  }
+
   console.log("Refreshing access token.");
 
   try {
@@ -118,6 +123,7 @@ export async function refreshAccessToken(
 
     return true;
   } catch (err) {
+    console.debug("Failed to refresh token");
     return false;
   }
 }

js/src/components/Event/EventBanner.vue

@@ -15,7 +15,7 @@ import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
   },
 })
 export default class EventBanner extends Vue {
-  @Prop({ required: true, default: null, type: Object as PropType<IMedia> })
+  @Prop({ default: null, type: Object as PropType<IMedia> })
   picture!: IMedia | null;
 }
 </script>

js/src/components/NavBar.vue

@@ -216,7 +216,7 @@ import RouteName from "../router/name";
     loggedUser: {
       query: USER_SETTINGS,
       skip() {
-        return this.currentUser.isLoggedIn === false;
+        return !this.currentUser || this.currentUser.isLoggedIn === false;
       },
     },
   },

js/src/types/apollo.ts

@@ -1,10 +0,0 @@
-import { ServerParseError } from "@apollo/client/link/http";
-import { ServerError } from "@apollo/client/link/utils";
-
-function isServerError(
-  err: Error | ServerError | ServerParseError | undefined
-): err is ServerError {
-  return !!err && (err as ServerError).statusCode !== undefined;
-}
-
-export { isServerError };

js/src/utils/auth.ts

@@ -95,14 +95,17 @@ export async function initializeCurrentActor(
 }
 
 export async function logout(
-  apollo: ApolloClient<NormalizedCacheObject>
+  apollo: ApolloClient<NormalizedCacheObject>,
+  performServerLogout = true
 ): Promise<void> {
+  if (performServerLogout) {
     await apollo.mutate({
       mutation: LOGOUT,
       variables: {
         refreshToken: localStorage.getItem(AUTH_REFRESH_TOKEN),
       },
     });
+  }
 
   await apollo.mutate({
     mutation: UPDATE_CURRENT_USER_CLIENT,

js/src/views/Event/Event.vue

@@ -592,6 +592,7 @@ import { eventMetaDataList } from "../../services/EventMetadata";
       },
       skip() {
         return (
+          !this.currentActor.id ||
           !this.event?.attributedTo ||
           !this.event?.attributedTo?.preferredUsername
         );

js/src/views/Home.vue

@@ -372,7 +372,9 @@ import Subtitle from "../components/Utils/Subtitle.vue";
     currentUser: CURRENT_USER_CLIENT,
     loggedUser: {
       query: USER_SETTINGS,
-      fetchPolicy: "no-cache",
+      skip() {
+        return !this.currentUser || this.currentUser.isLoggedIn === false;
+      },
       error() {
         return null;
       },

js/src/views/PageNotFound.vue

@@ -38,7 +38,7 @@
           }}
         </p>
         <!--  The following should just be replaced with the SearchField component but it fails for some reason  -->
-        <form @submit="enter">
+        <form @submit.prevent="enter">
           <b-field class="search">
             <b-input
               expanded

js/src/vue-apollo.ts

@@ -11,8 +11,8 @@ import {
   NormalizedCacheObject,
   split,
 } from "@apollo/client/core";
+import { RetryLink } from "@apollo/client/link/retry";
 import buildCurrentUserResolver from "@/apollo/user";
-import { isServerError } from "@/types/apollo";
 import { AUTH_ACCESS_TOKEN } from "@/constants";
 import { logout } from "@/utils/auth";
 import { Socket as PhoenixSocket } from "phoenix";
@@ -61,9 +61,17 @@ const authMiddleware = new ApolloLink((operation, forward) => {
   return null;
 });
 
+const customFetch = async (uri: string, options: any) => {
+  const response = await fetch(uri, options);
+  if (response.status >= 400) {
+    return Promise.reject(response.status);
+  }
+  return response;
+};
+
 const uploadLink = createLink({
   uri: httpEndpoint,
-  fetch,
+  fetch: customFetch,
 });
 
 const phoenixSocket = new PhoenixSocket(wsEndpoint, {
@@ -97,17 +105,35 @@ const resolvePendingRequests = () => {
   pendingRequests = [];
 };
 
+const isAuthError = (graphQLError: GraphQLError | undefined) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return graphQLError && [403, 401].includes(graphQLError.status_code);
+};
+
 const errorLink = onError(
   ({ graphQLErrors, networkError, forward, operation }) => {
-    if (isServerError(networkError) && networkError?.statusCode === 401) {
+    console.debug("We have an apollo error", [graphQLErrors, networkError]);
+    if (
+      graphQLErrors?.some((graphQLError) => isAuthError(graphQLError)) ||
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      networkError === 401
+    ) {
+      console.debug("It's a authorization error (statusCode 401)");
       let forwardOperation;
 
       if (!isRefreshing) {
+        console.debug("Setting isRefreshing to true");
         isRefreshing = true;
 
         forwardOperation = fromPromise(
           refreshAccessToken(apolloClient)
-            .then(() => {
+            .then((res) => {
+              if (res !== true) {
+                // failed to refresh the token
+                throw "Failed to refresh the token";
+              }
               resolvePendingRequests();
 
               const context = operation.getContext();
@@ -121,9 +147,11 @@ const errorLink = onError(
               });
               return true;
             })
-            .catch(() => {
+            .catch((e) => {
+              console.debug("Something failed, let's logout", e);
               pendingRequests = [];
-              logout(apolloClient);
+              // don't perform a logout since we don't have any working access/refresh tokens
+              logout(apolloClient, false);
               return;
             })
             .finally(() => {
@@ -161,7 +189,12 @@ const errorLink = onError(
   }
 );
 
-const fullLink = authMiddleware.concat(errorLink).concat(link);
+const retryLink = new RetryLink();
+
+const fullLink = authMiddleware
+  .concat(retryLink)
+  .concat(errorLink)
+  .concat(link);
 
 const cache = new InMemoryCache({
   addTypename: true,