diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5e30dd035..69c8e59e5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -60,6 +60,7 @@ below.
  - Jamie Allen
  - Christopher Bennett
  - Mark Dawson
+ - Min RK
 <!-- end-shortlog -->
 
 (All contributors are identifiable with email addresses in the git version
diff --git a/changes.d/1778.fix b/changes.d/1778.fix
new file mode 100644
index 000000000..b8d3bcbf2
--- /dev/null
+++ b/changes.d/1778.fix
@@ -0,0 +1 @@
+Compatibility with JupyterHub 4.1 XSRF changes
\ No newline at end of file
diff --git a/src/graphql/graphiql.js b/src/graphql/graphiql.js
index 2a512c0e2..a2040d441 100644
--- a/src/graphql/graphiql.js
+++ b/src/graphql/graphiql.js
@@ -18,7 +18,8 @@
 // Code related to GraphiQL
 
 import { parse } from 'graphql'
-import { createGraphQLUrls, getCylcHeaders } from '@/graphql/index'
+import { createGraphQLUrls } from '@/graphql/index'
+import { getCylcHeaders } from '@/utils/urls'
 
 // TODO: https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher/issues/16
 //       the functions hasSubscriptionOperation and graphQLFetcher are both from
diff --git a/src/graphql/index.js b/src/graphql/index.js
index 17ce231af..3d2b35ed1 100644
--- a/src/graphql/index.js
+++ b/src/graphql/index.js
@@ -27,7 +27,7 @@ import { WebSocketLink } from '@apollo/client/link/ws'
 import { setContext } from '@apollo/client/link/context'
 import { SubscriptionClient } from 'subscriptions-transport-ws'
 import { store } from '@/store/index'
-import { createUrl } from '@/utils/urls'
+import { createUrl, getCylcHeaders } from '@/utils/urls'
 
 /** @typedef {import('subscriptions-transport-ws').ClientOptions} ClientOptions */
 
@@ -46,21 +46,6 @@ export function createGraphQLUrls () {
   }
 }
 
-/**
- * Get request headers for use with UI Server requests.
- *
- * - Adds X-XSRFToken header for hubless token based auth.
- */
-export function getCylcHeaders () {
-  const xsrfToken = document.cookie.match('\\b_xsrf=([^;]*)\\b')
-  const cylcHeaders = {}
-  if (Array.isArray(xsrfToken) && xsrfToken.length > 0) {
-    // pick the last match
-    cylcHeaders['X-XSRFToken'] = xsrfToken.splice(-1)
-  }
-  return cylcHeaders
-}
-
 /**
  * Create a subscription client.
  *
diff --git a/src/services/user.service.js b/src/services/user.service.js
index ebaf16d1d..3c5c4e20b 100644
--- a/src/services/user.service.js
+++ b/src/services/user.service.js
@@ -17,7 +17,7 @@
 
 import axios from 'axios'
 import User from '@/model/User.model'
-import { createUrl } from '@/utils/urls'
+import { createUrl, getCylcHeaders } from '@/utils/urls'
 
 class UserService {
   /**
@@ -25,7 +25,10 @@ class UserService {
    * @returns {Promise<*>} - a promise that dispatches Vuex action
    */
   getUserProfile () {
-    return axios.get(createUrl('userprofile')).then(({ data }) => {
+    return axios.get(
+      createUrl('userprofile'),
+      { headers: getCylcHeaders() },
+    ).then(({ data }) => {
       return new User(
         data.name,
         data.groups,
diff --git a/src/utils/urls.js b/src/utils/urls.js
index 7b92ee05f..877406262 100644
--- a/src/utils/urls.js
+++ b/src/utils/urls.js
@@ -72,6 +72,22 @@ function createUrl (path, websockets = false, baseOnly = false) {
   return normalize(url)
 }
 
+/**
+ * Get request headers for use with UI Server requests.
+ *
+ * - Adds X-XSRFToken header cookie-based auth.
+ */
+function getCylcHeaders () {
+  const xsrfToken = document.cookie.match('\\b_xsrf=([^;]*)\\b')
+  const cylcHeaders = {}
+  if (Array.isArray(xsrfToken) && xsrfToken.length > 0) {
+    // pick the last match
+    cylcHeaders['X-XSRFToken'] = xsrfToken.splice(-1)
+  }
+  return cylcHeaders
+}
+
 export {
-  createUrl
+  createUrl,
+  getCylcHeaders,
 }