Merge branch '1602-allow-embedding-iframes-of-baserow-to-work-with-authentication-cookies' into 'develop'

Resolve "Allow embedding iframes of Baserow to work with authentication cookies"

Closes #1602

See merge request bramw/baserow!1274

web-frontend/modules/core/layouts/app.vue

@@ -48,6 +48,31 @@ export default {
       isCollapsed: 'sidebar/isCollapsed',
     }),
   },
+  created() {
+    /*
+     The authentication middleware supports loading a refresh token from a query
+     param called token. If used we don't want to fill up the users URL bar with a
+     massive token, so we want remove it.
+
+     However, crucially, we cannot remove it by issuing a 302 redirect from nuxt
+     server as this completely throws away vuex's state, which will
+     throw away any authorization obtained by the query param in the auth store.
+
+     Normally this is fine as the client can just reload the token from a cookie,
+     however when Baserow is embedded in an iframe on a 3rd party site it cannot
+     access these cookies as they are sameSite:lax. So by not issuing a redirect in
+     the server to remove the query.token, but instead doing it here, we preserve
+     the auth stores state as nuxt will populate it server side and ship it to client.
+
+     This way the client does not need to read the token from the cookies unless they
+     refresh the page.
+    */
+    if (this.$route.query.token) {
+      const queryWithoutToken = { ...this.$route.query }
+      delete queryWithoutToken.token
+      this.$router.replace({ query: queryWithoutToken })
+    }
+  },
   mounted() {
     // Connect to the web socket so we can start receiving real time updates.
     this.$realtime.connect()

web-frontend/modules/core/middleware/authenticated.js

@@ -13,10 +13,4 @@ export default function ({ req, store, route, redirect }) {
     }
     return redirect({ name: 'login', query })
   }
-
-  // remove the token if encoded in the URL and continue to the requested page.
-  if (route.query.token) {
-    delete route.query.token
-    return redirect({ path: route.path, query: route.query })
-  }
 }

web-frontend/modules/database/pages/form.vue

@@ -53,7 +53,7 @@ export default {
   async asyncData({ params, error, app, route, redirect, store }) {
     const slug = params.slug
     const publicAuthToken = await store.dispatch(
-      'page/view/public/setAuthTokenFromCookies',
+      'page/view/public/setAuthTokenFromCookiesIfNotSet',
       { slug }
     )
 

web-frontend/modules/database/pages/publicView.vue

@@ -32,7 +32,7 @@ export default {
 
     // in case the view is password protected, use the token saved in the cookies (if any)
     const publicAuthToken = await store.dispatch(
-      'page/view/public/setAuthTokenFromCookies',
+      'page/view/public/setAuthTokenFromCookiesIfNotSet',
       { slug }
     )
 

web-frontend/modules/database/pages/publicViewLogin.vue

@@ -28,7 +28,6 @@
             class="button button--large button--primary"
             :class="{ 'button--loading': loading }"
             :disabled="loading || $v.$invalid"
-            @click="authorizeView()"
           >
             {{ $t('publicViewAuthLogin.enter') }}
           </button>
@@ -88,7 +87,7 @@ export default {
         // Subsequent requests will use the token saved into the store.
         const { original } = this.$route.query
         if (original && isRelativeUrl(original)) {
-          this.$nuxt.$router.push(original)
+          await this.$router.push(original)
         }
       } catch (e) {
         const statusCode = e.response?.status

web-frontend/modules/database/store/view/public.js

@@ -15,10 +15,14 @@ export const mutations = {
 }
 
 export const actions = {
-  setAuthTokenFromCookies({ commit }, { slug }) {
-    const token = getToken(this.app, slug)
-    commit('SET_AUTH_TOKEN', token)
-    return token
+  setAuthTokenFromCookiesIfNotSet({ state, commit }, { slug }) {
+    if (!state.authToken) {
+      const token = getToken(this.app, slug)
+      commit('SET_AUTH_TOKEN', token)
+      return token
+    } else {
+      return state.authToken
+    }
   },
   setAuthToken({ commit }, { slug, token }) {
     setToken(this.app, token, slug)