Zotero: improve integration and reference import

- use OAuth instead of tokens - add an integration card - improve error handling - add BibLaTeX format support - fix indexing of linked .bib files on creation
2026-11-12 13:13:45 +01:00 · 2026-07-17 18:03:41 +02:00
parent c2f191b43c
commit 441d275948
26 changed files with 1153 additions and 542 deletions
@@ -190,7 +190,23 @@ export default LinkedFilesController = {
      error.message === 'Zotero account not linked'
    ) {
      res.status(400)
-      plainTextResponse(res, 'Your account is not linked with Zotero')
+      plainTextResponse(
+        res,
+        res.locals.translate(
+          'zotero_reference_loading_error_not_linked'
+        )
+      )
+    } else if (
+      error instanceof AccessDeniedError &&
+      error.message === 'Zotero access denied'
+    ) {
+      res.status(403)
+      plainTextResponse(
+        res,
+        res.locals.translate(
+          'zotero_reference_loading_error_forbidden'
+        )
+      )
    } else if (error instanceof AccessDeniedError) {
      res.status(403)
      plainTextResponse(
@@ -1192,6 +1192,10 @@ module.exports = {
        __dirname,
        '../modules/git-bridge/frontend/js/card/components/git-integration-card.tsx'
      ),
+      Path.resolve(
+        __dirname,
+        '../modules/zotero/frontend/js/components/zotero-integration-card.tsx'
+      ),
    ],
    referenceSearchSetting: [],
    settingsModalEditorTabSections: [],
@@ -1566,6 +1566,7 @@
  "project_actions": "",
  "project_approaching_file_limit": "",
  "project_categories_tags": "",
+  "problem_checking_connection_with_provider": "",
  "project_figure_modal": "",
  "project_files_history": "",
  "project_flagged_too_many_compiles": "",
@@ -487,7 +487,13 @@ export const FileTreeActionableProvider: FC<React.PropsWithChildren> = ({

  const finishCreatingLinkedFile = useCallback(
    (entity: Omit<NewLinkedFileEntity, 'endpoint'>) => {
-      return finishCreatingDocOrFile({ ...entity, endpoint: 'linked_file' })
+      const shouldReindexReferences = /\.bib$/.test(entity.name)
+      return finishCreatingDocOrFile({ ...entity, endpoint: 'linked_file' }).
+        then(() => {
+          if (shouldReindexReferences) {
+            indexAllReferences(true)
+          }
+        })
    },
    [finishCreatingDocOrFile]
  )
@@ -19,8 +19,9 @@ export type LinkedFileData = {
    provider: 'zotero'
    zoteroGroupId?: string
    importedAt: Date | string
-    importedByUserId?: string
-    importedByName?: string
+    importedByUserId: string
+    importedByName: string
+    bibFormat: 'bibtex' | 'biblatex'
  }
 }

@@ -298,6 +298,7 @@
  "choose_a_custom_color": "Wähle eine eigene Farbe",
  "choose_your_plan": "Wähle deinen Kontotyp",
  "citation": "Zitat",
+  "cite_directly_or_import_references": "Referenzen importieren",
  "city": "Stadt",
  "clear_cached_files": "Zwischengespeicherte Dateien löschen",
  "clear_search": "Suche löschen",
@@ -1176,6 +1177,7 @@
  "privacy_policy": "Datenschutz",
  "private": "Privat",
  "problem_changing_email_address": "Es gab ein Problem beim Ändern deiner E-Mail-Adresse. Bitte versuche es in ein paar Minuten erneut. Wenn das Problem bestehen bleibt, kontaktiere uns bitte.",
+  "problem_checking_connection_with_provider": "Beim Überprüfen der Verbindung mit dem __provider__-Dienst ist ein Problem aufgetreten. Bitte versuchen Sie es in einigen Augenblicken erneut.",
  "problem_talking_to_publishing_service": "Es gibt ein Problem mit unserem Veröffentlichungsservice. Bitte versuche es in einigen Minuten noch einmal",
  "problem_with_subscription_contact_us": "Es gibt ein Problem mit deinem Abonnement. Bitte kontaktiere uns für mehr Informationen.",
  "processing": "in Bearbeitung",
@@ -1588,9 +1590,9 @@
  "unlink_github_warning": "Bei allen Projekten, die mit GitHub synchronisiert sind, wird die Verlinkung entfernt und nicht länger mit GitHub synchronisiert. Bist du sicher, dass du die Verbindung zu deinem GitHub-Nutzerkonto lösen möchtest?",
  "unlink_provider_account_title": "__provider__-Konto verknüpfen",
  "unlink_provider_account_warning": "Warnung: Wenn du die Verknüpfung deines Kontos mit __provider__ aufhebst, kannst du dich nicht mehr mit __provider__ anmelden.",
-  "unlink_reference": "Link zum Referenzengeber entfernen",
+  "unlink_reference": "Link zum Referenzengeber __provider__ entfernen",
  "unlink_sso": "SSO-Verknüpfung aufheben",
-  "unlink_warning_reference": "Achtung: Wenn du dein Konto von diesem Anbieter entkoppelst, wirst du nicht in der Lage sein, Referenzen in deine Projekte zu importieren.",
+  "unlink_warning_reference": "Achtung: Wenn du dein Konto von __provider__ entkoppelst, wirst du nicht in der Lage sein, Referenzen in deine Projekte zu importieren.",
  "unlinking": "Verknüpfung wird aufgehoben",
  "unpublish": "Veröffentlichung aufheben",
  "unpublishing": "Veröffentlichung aufheben",
@@ -1678,6 +1680,7 @@
  "you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page": "Du kannst dich jederzeit auf dieser Seite für das Beta-Programm an- und abmelden",
  "you_cant_add_or_change_password_due_to_sso": "Du kannst dein Passwort nicht hinzufügen oder ändern, da deine Gruppe oder Organisation <0>Single Sign-On (SSO)</0> verwendet.",
  "you_cant_overwrite_it": "Überschreiben ist nicht möglich.",
+  "you_currently_have_x_linked_with_your_overleaf_account": "Sie haben derzeit <0>__managers__</0> mit Ihrem __appName__ Konto verknüpft.",
  "you_dont_have_any_repositories": "Du hast keine Repositories",
  "you_have_added_x_of_group_size_y": "Du hast <0>__addedUsersSize__</0> von <1>__groupSize__</1> verfügbaren Mitgliedern hinzugefügt",
  "you_will_be_able_to_contact_us_any_time_to_share_your_feedback": "Du kannst uns jederzeit kontaktieren, um uns dein Feedback mitzuteilen",
@@ -396,7 +396,7 @@
  "citation": "Citation",
  "citation_key_helper": "Unique key for citations, no spaces or special characters",
  "cite_a_reference_from_your_reference_manager_to_automatically_add_it_to_your_bib_file": "Cite a reference from your reference manager to automatically add it to your .bib file.",
-  "cite_directly_or_import_references": "Cite directly or import references",
+  "cite_directly_or_import_references": "Import references",
  "cite_faster": "Cite faster",
  "city": "City",
  "clear_cached_files": "Clear cached files",
@@ -2017,6 +2017,7 @@
  "private": "Private",
  "pro": "Pro",
  "problem_changing_email_address": "There was a problem changing your email address. Please try again in a few moments. If the problem continues please contact us.",
+  "problem_checking_connection_with_provider": "Sorry, there was a problem checking the connection with __provider__ service. Please try again in a few moments.",
  "problem_talking_to_publishing_service": "There is a problem with our publishing service, please try again in a few minutes",
  "problem_with_subscription_contact_us": "There is a problem with your subscription. Please contact us for more information.",
  "proceed_to_paypal": "Proceed to PayPal",
@@ -2939,12 +2940,12 @@
  "unlink_linked_google_account": "Unlink your Google account. <0>Remove it in Account settings (under Linked Accounts).</0>",
  "unlink_provider_account_title": "Unlink __provider__ Account",
  "unlink_provider_account_warning": "Warning: When you unlink your account from __provider__ you will not be able to sign in using __provider__ anymore.",
-  "unlink_reference": "Unlink References Provider",
+  "unlink_reference": "Unlink __provider__ References Provider",
  "unlink_sso": "Unlink SSO",
  "unlink_the_project_from_the_current_github_repo": "Unlink the project from the current GitHub repository and create a connection to a repository you own.",
  "unlink_user_explanation": "You’re about to remove the SSO login option for <0>__email__</0>. This will force them to reauthenticate their Overleaf account with your IdP. They’ll receive an email asking them to do this.",
  "unlink_users": "Unlink users",
-  "unlink_warning_reference": "Warning: When you unlink your account from this provider you will not be able to import references into your projects.",
+  "unlink_warning_reference": "Warning: When you unlink your account from __provider__ you will not be able to import references into your projects.",
  "unlinking": "Unlinking",
  "unmerge_cells": "Unmerge cells",
  "unpause_subscription": "Unpause subscription",
@@ -98,6 +98,7 @@
  "checking_dropbox_status": "Проверка состояния Dropbox",
  "checking_project_github_status": "Проверка статуса проекта на GitHub",
  "choose_your_plan": "Выберите тариф",
+  "cite_directly_or_import_references": "Импортировать ссылки",
  "city": "Город",
  "clear_cached_files": "Очистить кэшированные файлы",
  "clear_sessions": "Завершить сессии",
@@ -188,6 +189,8 @@
  "features": "Возможности",
  "february": "Февраль",
  "files_cannot_include_invalid_characters": "Файлы не могут содержать символы ’*’ и ’/’",
+  "file_name": "Имя файла",
+  "file_name_in_this_project": "Имя файла в этом проекте",
  "filter_projects": "Фильтровать проекты",
  "filter_users": "Фильтровать пользователей",
  "first_name": "Имя",
@@ -197,6 +200,7 @@
  "fr": "Французский",
  "free": "Бесплатно",
  "free_dropbox_and_history": "Бесплатные Dropbox и История",
+  "from_provider": "Из __provider__",
  "full_doc_history": "Полная история изменений",
  "general": "Общие",
  "generate_token": "Создать токен",
@@ -231,6 +235,7 @@
  "i_want_to_stay": "Я хочу остаться",
  "ignore_validation_errors": "Не проверять синтаксис",
  "ill_take_it": "Беру!",
+  "import_a_bibtex_file_from_your_provider_account": "Импортируйте BibTeX файл из Вашего аккаунта __provider__",
  "import_from_github": "Импорт с GitHub",
  "import_to_sharelatex": "Импортировать в __appName__",
  "imported_from_zotero_at_date": "Импортировано из Zotero в __formattedDate__ __relativeDate__",
@@ -265,6 +270,7 @@
  "leave_group": "Покинуть группу",
  "leave_now": "Покинуть",
  "leave_projects": "Оставить проекты",
+  "library": "Библиотека",
  "link_to_github": "Привязать аккаунт на GitHub",
  "link_to_github_description": "Вам необходимо авторизовать __appName__ для доступа к Вашему GitHub аккаунту, чтобы разрешить нам синхронизацию Ваших проектов.",
  "links": "Ссылки",
@@ -298,6 +304,7 @@
  "monthly": "Цена за месяц",
  "more": "еще",
  "must_be_email_address": "Введите правильный адрес электронной почты.",
+  "my_library": "Моя библиотека",
  "name": "Имя",
  "native": "браузер",
  "navigation": "Навигация",
@@ -370,6 +377,7 @@
  "privacy_policy": "Конфиденциальность",
  "private": "Закрытый",
  "problem_changing_email_address": "Возникла проблема при обновлении Вашего адреса электронной почты. Пожалуйста, попробуйте через некоторое время снова. Если проблема повторится, пожалуйста свяжитесь с нами.",
+  "problem_checking_connection_with_provider": "При проверке соединения со службой __provider__ возникла проблема. Пожалуйста, повторите попытку через некоторое время.",
  "problem_talking_to_publishing_service": "Проблема с сервером публикации. Пожалуйста, попробуйте через некоторое время ещё раз",
  "problem_with_subscription_contact_us": "Возникли проблемы с Вашей подпиской. Пожалуйста, свяжитесь с нами, чтобы узнать подробности.",
  "processing": "обработка",
@@ -538,6 +546,8 @@
  "unlink": "Отсоединить",
  "unlink_github_repository": "Отсоединить Git-репозиторий",
  "unlink_github_warning": "Все проекты, которые Вы синхронизировали с GitHub, будут отсоединены и больше не будут синхронизироваться с GitHub. Вы уверены, что хотите отсоединить Ваш GitHub аккаунт?",
+  "unlink_reference": "Отсоединить провайдер ссылок __provider__",
+  "unlink_warning_reference": "Если вы отсоедините аккаунт, у Вас не будет возможности импортировать ссылки из __provider__ в Ваши проекты.",
  "unpublish": "Отменить публикацию",
  "unpublishing": "Отмена публикации",
  "unset_admin": "Убрать админина",
@@ -578,6 +588,7 @@
  "year": "год",
  "you": "Вы",
  "you_cant_overwrite_it": "Перезаписать нельзя.",
+  "you_currently_have_x_linked_with_your_overleaf_account": "Для вашей учётной записи __appName__ в настоящее время настроена интеграция с <0>__managers__</0>.",
  "you_dont_have_any_repositories": "У вас нет ни одного репозитория",
  "you_have_added_x_of_group_size_y": "Вы добавили <0>__addedUsersSize__</0> из <1>__groupSize__</1> доступных участников",
  "your_git_access_info": "При запросе пароля используйте ваш токен аутентификации Git.",
@@ -595,6 +606,7 @@
  "zh-CN": "Китайский",
  "zotero_account_linked_successfully": "Ваш аккаунт Zotero успешно подключён.",
  "zotero_groups_loading_error": "При загрузке групп из Zotero произошла ошибка",
+  "zotero_groups_relink": "При загрузке данных из Zotero произошла ошибка, по-видимости вызванная отсутствием разрешения на доступ. Пожалуйста, подключите аккаунт заново и попробуйте ещё раз.",
  "zotero_reference_loading_error": "Ошибка: не удалось загрузить ссылки из Zotero",
  "zotero_reference_loading_error_expired": "Срок действия токена Zotero истёк, пожалуйста, повторно подключите аккаунт",
  "zotero_reference_loading_error_forbidden": "Не удалось загрузить ссылки из Zotero, пожалуйста, повторно подключите аккаунт и попробуйте снова",
@@ -1,66 +1,82 @@
-import AccessTokenEncryptorClass from '@overleaf/access-token-encryptor'
+import logger from '@overleaf/logger'
 import Settings from '@overleaf/settings'
 import fs from 'node:fs'
 import crypto from 'node:crypto'
 import Path from 'node:path'
+import AccessTokenEncryptorClass from '@overleaf/access-token-encryptor'

-const CIPHER_KEY_FILE = '/var/lib/overleaf/data/.zotero-cipher-key'
-const CIPHER_LABEL = '2024.1-v3'
+const TOKEN_CIPHER_FILE = '/var/lib/overleaf/data/.token-cipher.json'
+const TOKEN_CIPHER_LABEL = 'OL_CEP-v3'

 let encryptorInstance = null

 /**
- * Get or create a stable cipher password that persists across container
+ * Get or create a stable encryptor data that persists across container
 * recreations. Priority:
 *   1. ZOTERO_CIPHER_PASSWORD env var (explicit user config)
- *   2. Key file in the persistent volume (/var/lib/overleaf/data/)
+ *   2. JSON file with encryptor data in the persistent volume (/var/lib/overleaf/data/)
 *      — auto-generated on first use, survives container rebuilds
 */
-function _getStableCipherPassword() {
-  if (process.env.ZOTERO_CIPHER_PASSWORD) {
-    return process.env.ZOTERO_CIPHER_PASSWORD
-  }
-  try {
-    const existing = fs.readFileSync(CIPHER_KEY_FILE, 'utf8').trim()
-    if (existing.length >= 16) {
-      return existing
+function _getEncryptorData() {
+  const cipherPassword = process.env.ZOTERO_TOKEN_CIPHER_PASSWORD || process.env.TOKEN_CIPHER_PASSWORD
+  const cipherLabel = process.env.ZOTERO_TOKEN_CIPHER_LABEL ||
+                      process.env.TOKEN_CIPHER_LABEL ||
+                      TOKEN_CIPHER_LABEL
+  if (cipherPassword) {
+    return {
+      cipherLabel,
+      cipherPasswords: {
+        [cipherLabel]: cipherPassword
+      }
    }
-  } catch {
-    // File doesn't exist yet — generate one
  }
-  const newKey = crypto.randomBytes(32).toString('base64')
-  const dir = Path.dirname(CIPHER_KEY_FILE)
-  fs.mkdirSync(dir, { recursive: true })
-  fs.writeFileSync(CIPHER_KEY_FILE, newKey, { mode: 0o600 })
-  return newKey
+  // cipherPassword is not set, use file
+  const cipherFile = process.env.ZOTERO_TOKEN_CIPHER_FILE ||
+                     process.env.TOKEN_CIPHER_FILE ||
+                     TOKEN_CIPHER_FILE
+  try {
+    return JSON.parse(fs.readFileSync(cipherFile, 'utf8'))
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      logger.info({ cipherFile }, 'Creating new cipherFile')
+    } else {
+      logger.error({ err, cipherFile }, 'Bad cipherFile')
+      throw err
+    }
+  }
+  // File doesn't exist yet — generate one
+  try {
+    const encryptorData = {
+      cipherLabel,
+      cipherPasswords: {
+        [cipherLabel]: crypto.randomBytes(32).toString('base64')
+      },
+    }
+
+    const dir = Path.dirname(cipherFile)
+    fs.mkdirSync(dir, { recursive: true })
+    fs.writeFileSync(cipherFile, JSON.stringify(encryptorData, null, 2), { mode: 0o600 })
+    return encryptorData
+
+  } catch (err) {
+    logger.error({ err, cipherFile }, 'Cannot create cipherFile')
+    throw err
+  }
 }

 function _getEncryptor() {
  if (!encryptorInstance) {
-    const encryptorSettings = Settings.zotero?.encryptor || Settings.oauthProviders?.encryptor
-    if (!encryptorSettings) {
-      const cipherLabel = process.env.ZOTERO_CIPHER_LABEL || CIPHER_LABEL
-      const cipherPassword = _getStableCipherPassword()
-      encryptorInstance = new AccessTokenEncryptorClass({
-        cipherLabel,
-        cipherPasswords: {
-          [cipherLabel]: cipherPassword,
-        },
-      })
-    } else {
-      encryptorInstance = new AccessTokenEncryptorClass(encryptorSettings)
-    }
+    const encryptorData = _getEncryptorData()
+    encryptorInstance = new AccessTokenEncryptorClass(encryptorData)
  }
  return encryptorInstance
 }

 export const AccessTokenEncryptor = {
-  promises: {
-    async encryptJson(json) {
-      return await _getEncryptor().promises.encryptJson(json)
-    },
-    async decryptToJson(encryptedJson) {
-      return await _getEncryptor().promises.decryptToJson(encryptedJson)
-    },
+  async encryptJson(json) {
+    return await _getEncryptor().promises.encryptJson(json)
+  },
+  async decryptToJson(encryptedJson) {
+    return await _getEncryptor().promises.decryptToJson(encryptedJson)
  },
 }
@@ -0,0 +1,43 @@
+import logger from '@overleaf/logger'
+import { User } from '../../../../app/src/models/User.mjs'
+import { AccessTokenEncryptor } from './AccessTokenEncryptorHelper.mjs'
+
+/**
+ * Decrypt stored Zotero credentials from user record.
+ * Returns { apiKey, zoteroUserId } or null if not linked.
+ */
+async function getCredentials(userId) {
+  const user = await User.findById(userId, 'refProviders.zotero').exec()
+
+  if (!user?.refProviders?.zotero?.apiKeyEncrypted) return null
+
+  try {
+    const decrypted = await AccessTokenEncryptor.decryptToJson(
+      user.refProviders.zotero.apiKeyEncrypted
+    )
+    return decrypted
+  } catch (err) {
+    logger.error({ userId, err }, 'failed to decrypt Zotero credentials, treating as not connected')
+    return null
+  }
+}
+
+/**
+ * Link a Zotero account (store encrypted credentials).
+ */
+async function storeCredentials(userId, apiKey, zoteroUserId) {
+  const apiKeyEncrypted = await AccessTokenEncryptor.encryptJson({
+    apiKey,
+    zoteroUserId: String(zoteroUserId),
+  })
+  await User.updateOne(
+    { _id: userId },
+    { $set: { 'refProviders.zotero': { apiKeyEncrypted } } }
+  ).exec()
+}
+
+
+export default {
+  getCredentials,
+  storeCredentials,
+}
@@ -1,208 +1,197 @@
 import logger from '@overleaf/logger'
-import Settings from '@overleaf/settings'
 import OError from '@overleaf/o-error'
-import { fetchJson, fetchString } from '@overleaf/fetch-utils'
+import AbortError from 'node-fetch'
+import {
+  fetchNothing,
+  fetchJson,
+  fetchString,
+  fetchStringWithResponse,
+  RequestFailedError,
+} from '@overleaf/fetch-utils'
 import { User } from '../../../../app/src/models/User.mjs'
-import { AccessTokenEncryptor } from './AccessTokenEncryptorHelper.mjs'
+import {
+   NotFoundError,
+   TooManyRequestsError,
+   ServiceNotConfiguredError,
+   ForbiddenError,
+} from '../../../../app/src/Features/Errors/Errors.js'
+import TokenManager from './TokenManager.mjs'

 const ZOTERO_API_URL = 'https://api.zotero.org'
+const REQUEST_TIMEOUT_MS = 60 * 1000
+// TODO: implement conditional requests 

 /**
- * Decrypt stored Zotero credentials from user record.
- * Returns { apiKey, zoteroUserId } or null if not linked.
+ * Build a header for Zotero API request.
 */
-async function _getCredentials(userId) {
-  const user = await User.findById(userId, 'refProviders.zotero').exec()
-  if (!user?.refProviders?.zotero?.apiKeyEncrypted) {
-    return null
-  }
-  try {
-    const decrypted = await AccessTokenEncryptor.promises.decryptToJson(
-      user.refProviders.zotero.apiKeyEncrypted
-    )
-    return decrypted
-  } catch (err) {
-    throw OError.tag(err, 'failed to decrypt Zotero credentials', { userId })
-  }
-}
-
-/**
- * Make a request to the Zotero API with the user's API key.
- */
-async function _zoteroApiRequest(apiKey, path, opts = {}) {
-  const url = `${ZOTERO_API_URL}${path}`
+function buildHeaders(apiKey, opts = {}) {
  const headers = {
    'Zotero-API-Version': '3',
    'Zotero-API-Key': apiKey,
-    ...(opts.headers || {}),
+    'User-Agent': 'Overleaf-CEP-Zotero',
+    ...opts,
+  }
+  return headers
+}
+
+/**
+ * Checks connection to Zotero by calling /keys/{key}.
+ */
+async function getConnectionStatus(userId) {
+  const credentials = await TokenManager.getCredentials(userId)
+  if (!credentials) return false
+
+  const { apiKey } = credentials
+  try {
+    await fetchJson(`${ZOTERO_API_URL}/keys/${apiKey}`, {
+      headers: buildHeaders(apiKey),
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+    })
+    return true
+  } catch (err) {
+    normalizeApiError(err, 'getConnectionStatus')
  }
-  return { url, headers }
 }

 /**
 * Get the list of groups for a user.
 */
 async function getGroupsForUser(userId) {
-  const credentials = await _getCredentials(userId)
-  if (!credentials) {
-    throw new ZoteroAccountNotLinkedError()
-  }
+  const credentials = await TokenManager.getCredentials(userId)
+  if (!credentials) return null
+
  const { apiKey, zoteroUserId } = credentials
-  const { url, headers } = await _zoteroApiRequest(
-    apiKey,
-    `/users/${zoteroUserId}/groups`
-  )
  try {
-    const groups = await fetchJson(url, { headers })
+    const groups = await fetchJson(`${ZOTERO_API_URL}/users/${zoteroUserId}/groups`, {
+      headers: buildHeaders(apiKey),
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS)
+    })
    return groups.map(g => ({
      id: String(g.id),
      name: g.data?.name || `Group ${g.id}`,
    }))
  } catch (err) {
-    logger.err({ err, userId }, 'error fetching Zotero groups')
-    if (err.response?.status === 403) {
-      throw new ZoteroForbiddenError('forbidden')
-    }
-    throw OError.tag(err, 'error fetching Zotero groups')
+    normalizeApiError(err, 'getGroupsForUser')
  }
 }

 /**
- * Export the user's entire library as BibTeX.
+ * Export a library as BibTeX / BibLaTeX.
 */
-async function getUserLibraryBibtex(userId) {
-  const credentials = await _getCredentials(userId)
+async function getLibraryBibtex(userId, groupId, format) {
+  const credentials = await TokenManager.getCredentials(userId)
  if (!credentials) {
-    throw new ZoteroAccountNotLinkedError()
+    throw new ServiceNotConfiguredError({
+      message: 'RefProvider credentials missed',
+      info: { userId, status: 400 }
+    })
  }
-  return _fetchBibtex(
-    credentials.apiKey,
-    `/users/${credentials.zoteroUserId}/items`
-  )
-}

-/**
- * Export a group library as BibTeX.
- */
-async function getGroupLibraryBibtex(userId, groupId) {
-  const credentials = await _getCredentials(userId)
-  if (!credentials) {
-    throw new ZoteroAccountNotLinkedError()
-  }
-  return _fetchBibtex(credentials.apiKey, `/groups/${groupId}/items`)
+  // Main library or group?
+  let basePath
+  if (groupId) basePath = `/groups/${groupId}/items`
+  else basePath = `/users/${credentials.zoteroUserId}/items`
+
+  return _fetchBibtex(credentials.apiKey, basePath, format)
 }

 /**
 * Fetch all items from a Zotero library endpoint as BibTeX.
 * Handles pagination (Zotero API limits to 100 items per request).
 */
-async function _fetchBibtex(apiKey, basePath) {
-  let allBibtex = ''
-  let start = 0
+async function _fetchBibtex(apiKey, basePath, format) {
  const limit = 100
+  let allBibtex = ''

-  while (true) {
-    const { url, headers } = await _zoteroApiRequest(apiKey, basePath, {
-      headers: {},
-    })
-    const fullUrl = `${url}?format=bibtex&limit=${limit}&start=${start}`
-    try {
-      const response = await fetch(fullUrl, { headers })
-      if (!response.ok) {
-        if (response.status === 403) {
-          throw new ZoteroForbiddenError('Zotero API returned 403')
-        }
-        throw new Error(`Zotero API returned ${response.status}`)
-      }
-      const bibtex = await response.text()
-      if (bibtex.trim()) {
-        allBibtex += bibtex + '\n'
-      }
-      const totalResults = parseInt(
-        response.headers.get('Total-Results') || '0',
-        10
-      )
+  try {
+    let start = 0
+    const headers = buildHeaders(apiKey)
+    while (true) {
+      const url = `${ZOTERO_API_URL}${basePath}?format=${format}&limit=${limit}&start=${start}`
+      const { body: bibtex, response } = await fetchStringWithResponse(url, {
+        headers,
+        signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS)
+      })
+
+      if (bibtex.trim()) allBibtex += bibtex
+
+      const totalResults = parseInt(response.headers.get('Total-Results') || '0', 10)
      start += limit
      if (start >= totalResults) {
        break
      }
-    } catch (err) {
-      if (err instanceof ZoteroForbiddenError) {
-        throw err
-      }
-      throw OError.tag(err, 'error fetching BibTeX from Zotero', { basePath })
    }
+  } catch (err) {
+    normalizeApiError(err, '_fetchBibtex')
  }
  return allBibtex
 }

-/**
- * Validate a Zotero API key by calling /keys/{key}.
- * Returns { zoteroUserId } on success, throws on failure.
- */
-async function validateApiKey(apiKey) {
-  const url = `${ZOTERO_API_URL}/keys/${encodeURIComponent(apiKey)}`
-  try {
-    const data = await fetchJson(url, {
-      headers: { 'Zotero-API-Version': '3' },
-    })
-    if (!data.userID) {
-      throw new Error('Zotero API key response missing userID')
-    }
-    return { zoteroUserId: String(data.userID) }
-  } catch (err) {
-    if (err.response?.status === 404 || err.response?.status === 403) {
-      throw new ZoteroForbiddenError('Invalid Zotero API key')
-    }
-    throw OError.tag(err, 'error validating Zotero API key')
-  }
-}
-
-/**
- * Link a Zotero account (store encrypted credentials).
- */
-async function storeCredentials(userId, apiKey, zoteroUserId) {
-  const apiKeyEncrypted = await AccessTokenEncryptor.promises.encryptJson({
-    apiKey,
-    zoteroUserId: String(zoteroUserId),
-  })
-  await User.updateOne(
-    { _id: userId },
-    { $set: { 'refProviders.zotero': { apiKeyEncrypted } } }
-  ).exec()
-}
-
 /**
 * Unlink a Zotero account.
 */
 async function unlinkAccount(userId) {
+  const credentials = await TokenManager.getCredentials(userId)
+  if (!credentials) return
+
  await User.updateOne(
    { _id: userId },
    { $unset: { 'refProviders.zotero': 1 } }
  ).exec()
+
+  try {
+    const { apiKey } = credentials
+    await fetchNothing(`${ZOTERO_API_URL}/keys/${apiKey}`, {
+      method: 'DELETE',
+      headers: buildHeaders(apiKey),
+      signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
+    })
+  } catch (err) {
+     logger.error({ err }, 'failed to detete key from Zotero account')
+  }
+
 }

-export class ZoteroForbiddenError extends Error {
-  constructor(message) {
-    super(message)
-    this.name = 'ZoteroForbiddenError'
-  }
-}
+function normalizeApiError(err, operation) {
+  logger.error({ operation }, 'Zotero API request failed')

-export class ZoteroAccountNotLinkedError extends Error {
-  constructor(message = 'Zotero account not linked') {
-    super(message)
-    this.name = 'ZoteroAccountNotLinkedError'
+  if (err.name === 'AbortError') {
+    throw new OError('RefProvider request timed out', { operation, status: 504 }).withCause(err)
  }
+
+  if (!(err instanceof RequestFailedError)) {
+    throw new OError('Something wrong with RefProvider request', { operation, status: 500 }).withCause(err)
+  }
+
+  const status = err.response?.status || 500
+
+  if (status === 403) {
+    throw new ForbiddenError({
+       message: 'Access denied',
+       info: { operation, status }
+    }).withCause(err)
+  }
+
+  if (status === 404) {
+    throw new NotFoundError({
+       message: 'Not found',
+       info: { operation, status }
+    }).withCause(err)
+  }
+
+  if (status === 429) {
+    throw new TooManyRequestsError({
+      message: 'Rate limit exeeded',
+      info: { operation, status }
+    }).withCause(err)
+  }
+
+  throw new OError('RefProvider request error', { operation, status }).withCause(err)
 }

 export default {
+  getConnectionStatus,
  getGroupsForUser,
-  getUserLibraryBibtex,
-  getGroupLibraryBibtex,
-  validateApiKey,
-  storeCredentials,
+  getLibraryBibtex,
  unlinkAccount,
-  ZoteroForbiddenError,
-  ZoteroAccountNotLinkedError,
 }
@@ -1,71 +1,134 @@
 import logger from '@overleaf/logger'
+import OError from '@overleaf/o-error'
+import crypto from 'crypto'
 import SessionManager from '../../../../app/src/Features/Authentication/SessionManager.mjs'
+import HttpErrorHandler from '../../../../app/src/Features/Errors/HttpErrorHandler.mjs'
 import ZoteroApiClient from './ZoteroApiClient.mjs'
-import { ZoteroForbiddenError } from './ZoteroApiClient.mjs'
+import ZoteroOAuth from './ZoteroOAuth.mjs'
+import TokenManager from './TokenManager.mjs'
+
+async function oauth(req, res) {
+  try {
+    const requestToken = await ZoteroOAuth.getRequestToken()
+    const isPopup = req.query.popup === '1'
+
+    req.session.zoteroOAuth = {
+      token: requestToken.oauth_token,
+      tokenSecret: requestToken.oauth_token_secret,
+      isPopup
+    }
+
+    const authUrl = ZoteroOAuth.getAuthorizationUrl(requestToken.oauth_token)
+    res.redirect(authUrl)
+
+  } catch (err) {
+    logger.error(OError.getFullStack(err))
+    const info = OError.getFullInfo(err)
+    logger.error({ info }, "Failed to start Zotero authorization")
+
+    HttpErrorHandler.badRequest(req, res, 'Failed to start Zotero authorization')
+    return
+  }
+}
+
+async function oauthCallback(req, res) {
+  const userId = SessionManager.getLoggedInUserId(req.session)
+
+  const {
+    oauth_token: oauthToken,
+    oauth_verifier: oauthVerifier,
+  } = req.query
+
+  const saved = req.session.zoteroOAuth
+  delete req.session.zoteroOAuth
+
+  if (!saved || saved.token !== oauthToken) {
+    HttpErrorHandler.forbidden(req, res, 'Invalid OAuth token')
+    return
+  }
+
+  try {
+    const { accessToken, zoteroUserId } = await ZoteroOAuth.exchangeRequestTokenForAccessToken(
+      oauthToken,
+      saved.tokenSecret,
+      oauthVerifier,
+    )
+    await TokenManager.storeCredentials(userId, accessToken, zoteroUserId)
+
+  } catch (err) {
+    logger.error(OError.getFullStack(err))
+    const info = OError.getFullInfo(err)
+    logger.error({ info }, "Failed to obtain Zotero access token'")
+
+    HttpErrorHandler.badRequest(req, res, 'Failed to obtain Zotero access token')
+    return
+  }
+
+  const nonce = crypto.randomBytes(16).toString('base64')
+  const csp = res.getHeader('Content-Security-Policy')
+
+  res.setHeader(
+    'Content-Security-Policy',
+    `${csp}; script-src 'nonce-${nonce}'`
+  )
+
+  res.send(`
+    <!doctype html>
+    <html>
+      <body>
+        <script nonce="${nonce}">
+          const channel = new BroadcastChannel('zotero')
+          channel.postMessage({ type: 'zotero-linked' })
+          ${saved.isPopup
+            ? 'window.close()'
+            : "location.href = '/user/settings#references'"
+          }
+        </script>
+      </body>
+    </html>
+  `)
+}

 /**
- * GET /zotero/groups
- * Returns the user's Zotero groups (for the create-file modal).
+ * GET /user/zotero/status
+ * Returns the user's Zotero connection status, true or false
+ */
+async function getConnectionStatus(req, res) {
+  const userId = SessionManager.getLoggedInUserId(req.session)
+
+  try {
+    const isConnected = await ZoteroApiClient.getConnectionStatus(userId)
+    res.json(isConnected)
+
+  } catch (err) {
+    const info = OError.getFullInfo(err)
+    const errStatus = info?.status || 500
+    logger.error(OError.getFullStack(err))
+    logger.error({ info }, "failed to check user connection")
+    return res.status(errStatus).json({ message: err.message })
+  }
+}
+
+/**
+ * GET /user/zotero/groups
+ * Returns the user's Zotero groups or null, if account is not linked
 */
 async function getGroups(req, res) {
  const userId = SessionManager.getLoggedInUserId(req.session)
  try {
    const groups = await ZoteroApiClient.getGroupsForUser(userId)
-    res.json({ groups })
+    res.json(groups)
  } catch (err) {
-    if (err instanceof ZoteroForbiddenError) {
-      return res.status(403).json({
-        error: 'forbidden',
-        message: 'zotero_groups_relink',
-      })
-    }
-    logger.err({ err, userId }, 'error fetching Zotero groups')
-    res.status(500).json({
-      error: 'internal',
-      message: 'zotero_groups_loading_error',
-    })
+    const info = OError.getFullInfo(err)
+    const errStatus = info?.status || 500
+    logger.error(OError.getFullStack(err))
+    logger.error({ info }, "failed to get user groups")
+    return res.status(errStatus).json({ message: err.message })
  }
 }

 /**
- * POST /zotero/link
- * Links a Zotero account by validating the user-provided API key
- * and storing the encrypted credentials.
- *
- * Users create their API key at https://www.zotero.org/settings/keys
- * with "Allow library access" and "Allow read access to all groups".
- */
-async function link(req, res) {
-  const userId = SessionManager.getLoggedInUserId(req.session)
-  const { apiKey } = req.body
-
-  if (!apiKey || typeof apiKey !== 'string' || apiKey.trim().length === 0) {
-    return res.status(400).json({ error: 'missing_api_key' })
-  }
-
-  try {
-    const { zoteroUserId } = await ZoteroApiClient.validateApiKey(
-      apiKey.trim()
-    )
-    await ZoteroApiClient.storeCredentials(userId, apiKey.trim(), zoteroUserId)
-    res.json({ success: true })
-  } catch (err) {
-    if (err instanceof ZoteroForbiddenError) {
-      return res.status(400).json({
-        error: 'invalid_api_key',
-        message: 'zotero_api_key_invalid',
-      })
-    }
-    logger.err({ err, userId }, 'error linking Zotero account')
-    res.status(500).json({
-      error: 'internal',
-      message: 'generic_something_went_wrong',
-    })
-  }
-}
-
-/**
- * POST /zotero/unlink
+ * DELETE /user/zotero/unlink
 * Unlinks the user's Zotero account.
 */
 async function unlink(req, res) {
@@ -74,13 +137,18 @@ async function unlink(req, res) {
    await ZoteroApiClient.unlinkAccount(userId)
    res.sendStatus(200)
  } catch (err) {
-    logger.err({ err, userId }, 'error unlinking Zotero')
-    res.sendStatus(500)
+    const info = OError.getFullInfo(err)
+    const errStatus = info?.status || 500
+    logger.error(OError.getFullStack(err))
+    logger.error({ info }, "error unlinking Zotero account")
+    return res.status(errStatus).json({ message: err.message })
  }
 }

 export default {
+  oauth,
+  oauthCallback,
+  getConnectionStatus,
  getGroups,
-  link,
-  unlink,
+  unlink
 }
@@ -1,15 +1,17 @@
 import logger from '@overleaf/logger'
 import { callbackify } from '@overleaf/promise-utils'
+import { Project } from '../../../../app/src/models/Project.mjs'
+import ProjectLocator from '../../../../app/src/Features/Project/ProjectLocator.mjs'
 import UserGetter from '../../../../app/src/Features/User/UserGetter.mjs'
+import {
+   NotFoundError,
+   TooManyRequestsError,
+   ServiceNotConfiguredError,
+   ForbiddenError
+} from '../../../../app/src/Features/Errors/Errors.js'
 import LinkedFilesHandler from '../../../../app/src/Features/LinkedFiles/LinkedFilesHandler.mjs'
 import LinkedFilesErrors from '../../../../app/src/Features/LinkedFiles/LinkedFilesErrors.mjs'
 import ZoteroApiClient from './ZoteroApiClient.mjs'
-import { ZoteroForbiddenError, ZoteroAccountNotLinkedError } from './ZoteroApiClient.mjs'
-
-const {
-  AccessDeniedError,
-  RemoteServiceError,
-} = LinkedFilesErrors

 /**
 * Create a linked .bib file from Zotero (either My Library or a Group Library).
@@ -19,8 +21,9 @@ const {
 *     provider: 'zotero'
 *     zoteroGroupId?: string
 *     importedAt: Date | string
- *     importedByUserId?: string
- *     importedByName?: string
+ *     importedByUserId: string
+ *     importedByName: string
+ *     bibFormat: 'bibtex' || 'biblatex'
 *   }
 *
 *  - If zoteroGroupId is present, export that group's library.
@@ -33,13 +36,14 @@ async function createLinkedFile(
  parentFolderId,
  userId
 ) {
-  logger.debug(
-    { projectId, userId, groupId: linkedFileData.zoteroGroupId },
-    'creating Zotero linked file'
-  )

  linkedFileData.importedByUserId = userId
-  linkedFileData.importedByName = await _getUserName(userId)
+  linkedFileData.importedByName = await _getUserName(userId) || 'Unknown'
+
+  logger.debug(
+    { projectId, userId, linkedFileData },
+    'creating Zotero linked file'
+  )

  const bibtex = await _getBibtex(linkedFileData)

@@ -65,10 +69,26 @@ async function refreshLinkedFile(
  userId
 ) {
  logger.debug(
-    { projectId, userId, groupId: linkedFileData.zoteroGroupId },
+    { projectId, userId, linkedFileData },
    'refreshing Zotero linked file'
  )

+// refresh importer's displayed name
+// if the importer is the owner, name is not displayed, refresh is not needed
+// if the importer is not available, the old name is preserved
+  const userName = await _getUserName(linkedFileData.importedByUserId)
+  if (userName && linkedFileData.importedByUserId != userId) {
+    linkedFileData.importedByName = userName
+    const { element, path } = await ProjectLocator.promises.findElement({
+      project_id: projectId,
+      element_id: parentFolderId,
+      type: 'folders'
+    })
+    const fileIndex = element.fileRefs.findIndex(file => file.name === name)
+    const updatePath = `${path.mongo}.fileRefs.${fileIndex}.linkedFileData.importedByName`
+    await Project.updateOne({ _id: projectId }, { $set: { [updatePath]: userName } })
+  }
+
  const bibtex = await _getBibtex(linkedFileData)

  const file = await LinkedFilesHandler.promises.importContent(
@@ -85,22 +105,27 @@ async function refreshLinkedFile(
 async function _getBibtex(linkedFileData) {
  const userId = linkedFileData.importedByUserId
  try {
-    if (linkedFileData.zoteroGroupId) {
-      return await ZoteroApiClient.getGroupLibraryBibtex(
-        userId,
-        linkedFileData.zoteroGroupId
-      )
-    } else {
-      return await ZoteroApiClient.getUserLibraryBibtex(userId)
-    }
+    return await ZoteroApiClient.getLibraryBibtex(
+      userId,
+      linkedFileData.zoteroGroupId,  // == null for main library
+      linkedFileData.bibFormat || 'bibtex'
+    )
  } catch (err) {
-    if (err instanceof ZoteroForbiddenError) {
-      throw new AccessDeniedError('Zotero access denied').withCause(err)
+
+    if (err instanceof ForbiddenError) {
+      logger.debug({ linkedFileData, err }, 'Zotero access denied')
+      throw new LinkedFilesErrors.AccessDeniedError('Zotero access denied').withCause(err)
    }
-    if (err instanceof ZoteroAccountNotLinkedError) {
-      throw new AccessDeniedError('Zotero account not linked').withCause(err)
+    if (err instanceof ServiceNotConfiguredError) {
+      logger.debug({ userId: linkedFileData.importedByUserId, err }, 'Zotero account not linked')
+      throw new LinkedFilesErrors.AccessDeniedError('Zotero account not linked').withCause(err)
    }
-    throw new RemoteServiceError('Zotero API error').withCause(err)
+    if (err instanceof NotFoundError) {
+      logger.debug({ group: linkedFileData.zoteroGroupId, err }, 'Zotero group is not found')
+      throw new LinkedFilesErrors.SourceFileNotFoundError('Zotero group is not found').withCause(err)
+    }
+    logger.error({ linkedFileData, err }, 'failed to retrieve bib file from Zotero')
+    throw new LinkedFilesErrors.RemoteServiceError('Error retrieving bib file from Zotero').withCause(err)
  }
 }

@@ -115,6 +140,7 @@ function _sanitizeData(data) {
      importedByUserId: data.importedByUserId,
    }),
    importedByName: data.importedByName || 'Unknown',
+    bibFormat: (data.bibFormat === 'biblatex') ? 'biblatex' : 'bibtex'
  }
 }

@@ -126,12 +152,12 @@ async function _getUserName(userId) {
  catch (err) {
    logger.error({ userId, err }, 'failed to get user info')
  }
-  if (!user) return 'Unknown'
+  if (!user) return null

  const { email, first_name, last_name } = user
  const name = (first_name || last_name) ?
    [first_name, last_name].filter(n => n != null).join(' ') : email
-  return name || 'Unknown'
+  return name
 }

 export default {
@@ -0,0 +1,125 @@
+import logger from '@overleaf/logger'
+import Settings from '@overleaf/settings'
+import OError from '@overleaf/o-error'
+import { fetchString } from '@overleaf/fetch-utils'
+import OAuth from 'oauth-1.0a'
+import crypto from 'crypto'
+
+const ZOTERO_OAUTH_URL = 'https://www.zotero.org/oauth'
+
+function hashFunctionSha1(baseString, key) {
+  return crypto.createHmac('sha1', key)
+    .update(baseString)
+    .digest('base64')
+}
+
+function createOAuthClient() {
+  return OAuth({
+    consumer: {
+      key: Settings.zotero.clientKey,
+      secret: Settings.zotero.clientSecret,
+    },
+    signature_method: 'HMAC-SHA1',
+    hash_function: hashFunctionSha1,
+  })
+}
+
+function buildAuthorizationHeader(requestData, tokenData) {
+  const oauth = createOAuthClient()
+  const authData = oauth.authorize(requestData, tokenData)
+
+  return oauth.toHeader(authData).Authorization
+}
+
+function parseOAuthResponse(body) {
+  return Object.fromEntries(new URLSearchParams(body).entries())
+}
+
+function getAuthorizationUrl(oauthToken) {
+  const params = new URLSearchParams({
+    oauth_token: oauthToken,
+    library_access: '1',
+    all_groups: 'read',
+  })
+
+  return `${ZOTERO_OAUTH_URL}/authorize?${params}`
+}
+/*
+function getAuthorizationUrl(oauthToken) {
+  return `${ZOTERO_OAUTH_URL}/authorize?oauth_token=${oauthToken}`
+}
+*/
+
+async function getRequestToken() {
+  const url = `${ZOTERO_OAUTH_URL}/request`
+
+  try {
+    const body = await fetchString(url, {
+      method: 'POST',
+      headers: {
+        Authorization: buildAuthorizationHeader({
+          url,
+          method: 'POST',
+          data: {
+            oauth_callback: Settings.zotero.callbackURL,
+          },
+        }),
+      },
+    })
+
+    return parseOAuthResponse(body)
+  } catch (err) {
+    throw OError.tag(err, 'error obtaining Zotero request token')
+  }
+}
+
+async function exchangeRequestTokenForAccessToken(
+  oauthToken,
+  oauthTokenSecret,
+  oauthVerifier,
+) {
+  const url = `${ZOTERO_OAUTH_URL}/access`
+
+  try {
+    const body = await fetchString(url, {
+      method: 'POST',
+      headers: {
+        Authorization: buildAuthorizationHeader(
+          {
+            url,
+            method: 'POST',
+            data: {
+              oauth_verifier: oauthVerifier,
+            },
+          },
+          {
+            key: oauthToken,
+            secret: oauthTokenSecret,
+          }
+        ),
+      },
+    })
+
+    const data = parseOAuthResponse(body)
+
+    return {
+      accessToken: data.oauth_token,
+      apiKeySecret: data.oauth_token_secret,
+      zoteroUserId: data.userID,
+      username: data.username,
+    }
+  } catch (err) {
+    logger.err(
+      { err, oauthToken },
+      'error obtaining Zotero access token'
+    )
+
+    throw OError.tag(err, 'error obtaining Zotero access token')
+  }
+}
+
+export default {
+  getAuthorizationUrl,
+  getRequestToken,
+  exchangeRequestTokenForAccessToken,
+}
@@ -5,23 +5,36 @@ export default {
  apply(webRouter) {
    // Get Zotero groups for the create-file modal
    webRouter.get(
-      '/zotero/groups',
+      '/user/zotero/groups',
      AuthenticationController.requireLogin(),
      ZoteroController.getGroups
    )

-    // Link Zotero account (a user submits an API key)
-    webRouter.post(
-      '/zotero/link',
-      AuthenticationController.requireLogin(),
-      ZoteroController.link
-    )
-
    // Unlink Zotero account
-    webRouter.post(
-      '/zotero/unlink',
+    webRouter.delete(
+      '/user/zotero',
      AuthenticationController.requireLogin(),
      ZoteroController.unlink
+   )
+    webRouter.get(
+      '/user/zotero/status',
+      AuthenticationController.requireLogin(),
+      ZoteroController.getConnectionStatus
    )
+
+    webRouter.get(
+      '/user/zotero/oauth',
+      AuthenticationController.requireLogin(),
+      ZoteroController.oauth
+    )
+    // callback for Zotero OAuth flow
+    webRouter.get(
+      '/user/zotero/oauth/callback',
+      AuthenticationController.requireLogin(),
+      ZoteroController.oauthCallback
+    )
+
+
+
  },
 }
@@ -0,0 +1,112 @@
+import { useTranslation } from 'react-i18next'
+import { FormEventHandler, useEffect, useState } from 'react'
+import * as eventTracking from '@/infrastructure/event-tracking'
+import { useFileTreeActionable } from '@/features/file-tree/contexts/file-tree-actionable'
+import { useFileTreeCreateForm } from '@/features/file-tree/contexts/file-tree-create-form'
+import { useFileTreeCreateName } from '@/features/file-tree/contexts/file-tree-create-name'
+import FileTreeCreateNameInput from '@/features/file-tree/components/file-tree-create/file-tree-create-name-input'
+import ErrorMessage from '@/features/file-tree/components/file-tree-create/error-message'
+import OLFormGroup from '@/shared/components/ol/ol-form-group'
+import OLFormLabel from '@/shared/components/ol/ol-form-label'
+import OLFormSelect from '@/shared/components/ol/ol-form-select'
+import OLNotification from '@/shared/components/ol/ol-notification'
+
+type ZoteroGroup = {
+  id: string
+  name: string
+}
+
+type FileTreeImportFromZoteroProps = { groups: ZoteroGroup[] }
+
+export default function FileTreeImportFromZotero({ groups }: FileTreeImportFromZoteroProps) {
+  const { t } = useTranslation()
+  const { name, setName } = useFileTreeCreateName()
+  const { setValid } = useFileTreeCreateForm()
+  const { finishCreatingLinkedFile, error, inFlight } = useFileTreeActionable()
+  const [selectedGroupId, setSelectedGroupId] = useState<string>('')
+  const [selectedFormat, setSelectedFormat] = useState<string>('bibtex')
+
+  useEffect(() => {
+    setValid(!!name)
+  }, [name])
+
+  const handleSubmit: FormEventHandler = event => {
+    event.preventDefault()
+    eventTracking.sendMB('new-file-created', {
+      method: 'zotero',
+      extension: name.split('.').length > 1 ? name.split('.').pop() : '',
+    })
+
+    finishCreatingLinkedFile({
+      name,
+      provider: 'zotero',
+      data: { zoteroGroupId: selectedGroupId, bibFormat: selectedFormat }
+    })
+  }
+
+  return (
+    <>
+    <p>{t('import_a_bibtex_file_from_your_provider_account', { provider: 'Zotero' })}</p>
+    <form
+      className="form-controls"
+      id="create-file"
+      noValidate
+      onSubmit={handleSubmit}
+    >
+      <OLFormGroup controlId="zotero-library-select">
+        <OLFormLabel>{t('library')}</OLFormLabel>
+          <OLFormSelect
+            id="zotero-library-select"
+            value={selectedGroupId}
+            disabled={inFlight}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+              setSelectedGroupId(e.target.value)
+            }
+          >
+            <option value="">{t('my_library')}</option>
+            {groups?.map(g => (
+              <option key={g.id} value={g.id}>
+                {g.name}
+              </option>
+            ))}
+          </OLFormSelect>
+      </OLFormGroup>
+
+      <FileTreeCreateNameInput
+        label={t('file_name_in_this_project')}
+        placeholder="zotero.bib"
+        error={error}
+        inFlight={inFlight}
+      />
+
+      <OLFormGroup controlId="zotero-format-select">
+        <OLFormLabel>{t('format')}</OLFormLabel>
+          <OLFormSelect
+            id="zotero-format-select"
+            value={selectedFormat}
+            disabled={inFlight}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+              setSelectedFormat(e.target.value)
+            }
+          >
+            <option value="bibtex">{'BibTeX'}</option>
+            <option value="biblatex">{'BibLaTeX'}</option>
+          </OLFormSelect>
+      </OLFormGroup>
+
+      {inFlight && (
+        <div role="status" className="loading d-flex justify-content-center align-items-center fs-5">
+          <div
+            aria-hidden="true"
+            className="spinner-border spinner-border-sm"
+          ></div>
+          {t('importing') + '…'}
+        </div>
+      )}
+
+      {error && <ErrorMessage error={error} />}
+
+    </form>
+    </>
+  )
+}
@@ -5,15 +5,17 @@ import { LinkedFileIcon } from '@/features/file-view/components/file-view-icons'
 import { hasProvider } from '@/features/file-view/types/binary-file'
 import type { LinkedFile, LinkedFileData } from '@/features/file-view/types/binary-file'

+/**
+ * Shows "Imported from Zotero at <date>" in the owner's file view header or
+ * "Imported from Zotero at <date> by <owner>" in the collaborator's file view header
+ * when viewing a Zotero-linked .bib file.
+ * Registered via overleafModuleImports.tprFileViewInfo.
+ */
+
 type TPRFileViewInfoProps = {
  file: LinkedFile<keyof LinkedFileData>
 }

-/**
- * Shows "Imported from Zotero at <date>" in the file view header
- * when viewing a Zotero-linked .bib file.
- * Registered via overleafModuleImports.tprFileViewInfo.
- */
 export function TPRFileViewInfo({ file }: TPRFileViewInfoProps) {
  const { t } = useTranslation()

@@ -1,4 +1,3 @@
-import type { BinaryFile } from '@/features/file-view/types/binary-file'
 import type { LinkedFile, LinkedFileData } from '@/features/file-view/types/binary-file'

 type TPRFileViewInfoProps = {
@@ -20,17 +20,13 @@ export function TPRFileViewRefreshButton({
  refreshing,
 }: TPRFileViewRefreshButtonProps) {
  const { t } = useTranslation()
-  const importedByUserId = (file.linkedFileData as any)?.importedByUserId
  const zoteroIsProvider = hasProvider(file, 'zotero')
-  const disabled = (zoteroIsProvider && !importedByUserId) ? true : false

  return (
    <OLButton
      variant="primary"
-      onClick={() => refreshFile(zoteroIsProvider ? true : null)}
-      disabled={refreshing || disabled}
+      onClick={() => refreshFile(zoteroIsProvider)}
      isLoading={refreshing}
-      loadingLabel={t('refreshing')}
    >
      {t('refresh')}
    </OLButton>
@@ -3,15 +3,16 @@ import OLNotification from '@/shared/components/ol/ol-notification'
 import type { LinkedFile, LinkedFileData } from '@/features/file-view/types/binary-file'
 import { hasProvider } from '@/features/file-view/types/binary-file'

+/**
+ * Zotero-specific error messages when refreshing a linked file fails.
+ * Registered via overleafModuleImports.tprFileViewRefreshError.
+ */
+
 type TPRFileViewRefreshErrorProps = {
  file: LinkedFile<keyof LinkedFileData>
  refreshError: string
 }

-/**
- * Zotero-specific error messages when refreshing a linked file fails.
- * Registered via overleafModuleImports.tprFileViewRefreshError.
- */
 export function TPRFileViewRefreshError({
  file,
  refreshError,
@@ -1,167 +1,119 @@
 import { useTranslation } from 'react-i18next'
-import { FormEventHandler, useEffect, useState, useCallback } from 'react'
+import { useEffect, useCallback } from 'react'
+import useAsync from '@/shared/hooks/use-async'
 import { getJSON } from '@/infrastructure/fetch-json'
-import { useFileTreeActionable } from '@/features/file-tree/contexts/file-tree-actionable'
-import { useFileTreeCreateForm } from '@/features/file-tree/contexts/file-tree-create-form'
-import { useFileTreeMainContext } from '@/features/file-tree/contexts/file-tree-main'
-import FileTreeModalCreateFileMode from '@/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode'
-import ErrorMessage from '@/features/file-tree/components/file-tree-create/error-message'
-import OLFormGroup from '@/shared/components/ol/ol-form-group'
-import OLFormLabel from '@/shared/components/ol/ol-form-label'
-import OLFormControl from '@/shared/components/ol/ol-form-control'
-import OLFormSelect from '@/shared/components/ol/ol-form-select'
+import { debugConsole } from '@/utils/debugging'
+import OLButton from '@/shared/components/ol/ol-button'
 import OLNotification from '@/shared/components/ol/ol-notification'
-
-type ZoteroGroup = {
-  id: string
-  name: string
-}
+import { useFileTreeActionable } from '@/features/file-tree/contexts/file-tree-actionable'
+import FileTreeModalCreateFileMode from '@/features/file-tree/components/file-tree-create/file-tree-modal-create-file-mode'
+import FileTreeCreateNameProvider from '@/features/file-tree/contexts/file-tree-create-name'
+import FileTreeImportFromZotero from './file-tree-import-from-zotero'

 export function CreateFileMode() {
-  const { refProviders } = useFileTreeMainContext()
-  const isLinked = (refProviders as Record<string, boolean>)?.zotero
-
-  if (!isLinked) {
-    return null
-  }
+  const { t } = useTranslation()

  return (
    <FileTreeModalCreateFileMode
      mode="zotero"
      icon="library_books"
-      label="From Zotero"
+      label={t('from_provider', { provider: 'Zotero' })}
    />
  )
 }

 export function CreateFilePane() {
  const { newFileCreateMode } = useFileTreeActionable()
-
-  if (newFileCreateMode !== 'zotero') {
-    return null
-  }
-
-  return <ZoteroCreateFilePane />
-}
-
-function ZoteroCreateFilePane() {
  const { t } = useTranslation()
-  const { setValid } = useFileTreeCreateForm()
-  const { finishCreatingLinkedFile, error, inFlight } = useFileTreeActionable()
+  const isZoteroMode = newFileCreateMode === 'zotero'

-  const [groups, setGroups] = useState<ZoteroGroup[]>([])
-  const [selectedGroupId, setSelectedGroupId] = useState<string>('')
-  const [name, setName] = useState('zotero.bib')
-  const [loadingGroups, setLoadingGroups] = useState(true)
-  const [groupsError, setGroupsError] = useState('')
+  const {
+    runAsync,
+    data: groups,
+    isSuccess: isGroupsLoaded,
+    isError: isGroupsError,
+    isLoading: isGroupsLoading,
+  } = useAsync<ZoteroGroup[]>()
+
+  const loadGroups = useCallback(() => {
+    return runAsync(getJSON('/user/zotero/groups'))
+      .catch(err => {
+        debugConsole.error(err?.data?.message || err?.message || err)
+      })
+  }, [runAsync])

  useEffect(() => {
-    setValid(!!name && !loadingGroups)
-  }, [setValid, name, loadingGroups])
+    if (!isZoteroMode) return
+
+    loadGroups()
+  }, [loadGroups, isZoteroMode])

  useEffect(() => {
-    let cancelled = false
+    if (!isZoteroMode || !isGroupsLoaded || groups) return

-    setLoadingGroups(true)
-    setGroupsError('')
-
-    getJSON('/zotero/groups')
-      .then((data: { groups: ZoteroGroup[] }) => {
-        if (cancelled) return
-
-        setGroups(data.groups || [])
-        setLoadingGroups(false)
-      })
-      .catch(() => {
-        if (cancelled) return
-
-        setGroupsError(t('zotero_groups_loading_error'))
-        setLoadingGroups(false)
-      })
-
-    return () => {
-      cancelled = true
+    const channel = new BroadcastChannel('zotero')
+    channel.onmessage = event => {
+      if (event.data?.type === 'zotero-linked') {
+        loadGroups()
+      }
    }
-  }, [t])

-  const handleSubmit: FormEventHandler = useCallback(
-    event => {
-      event.preventDefault()
+    return () => channel.close()
+  }, [isZoteroMode, isGroupsLoaded, groups, loadGroups])

-      if (!name || loadingGroups || inFlight) {
-        return
-      }
+  if (!isZoteroMode) return null

-      const data: Record<string, string> = {}
-
-      if (selectedGroupId) {
-        data.zoteroGroupId = selectedGroupId
-      }
-
-      finishCreatingLinkedFile({
-        name,
-        provider: 'zotero',
-        data,
-      })
-    },
-    [
-      name,
-      loadingGroups,
-      inFlight,
-      selectedGroupId,
-      finishCreatingLinkedFile,
-    ]
-  )
-
-  return (
-    <form
-      className="form-controls"
-      id="create-file"
-      noValidate
-      onSubmit={handleSubmit}
-    >
-      {groupsError && (
-        <OLNotification type="error" content={groupsError} className="mb-3" />
-      )}
-
-      <OLFormGroup controlId="zotero-file-name">
-        <OLFormLabel>{t('file_name')}</OLFormLabel>
-        <OLFormControl
-          type="text"
-          placeholder="zotero.bib"
-          required
-          value={name}
-          disabled={inFlight}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setName(e.target.value)
-          }
-        />
-      </OLFormGroup>
-
-      <OLFormGroup controlId="zotero-library-select">
-        <OLFormLabel>Library</OLFormLabel>
-        {loadingGroups ? (
-          <p className="text-muted">{t('loading')}...</p>
-        ) : (
-          <OLFormSelect
-            id="zotero-library-select"
-            value={selectedGroupId}
-            disabled={inFlight}
-            onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-              setSelectedGroupId(e.target.value)
-            }
-          >
-            <option value="">My Library</option>
-            {groups.map(g => (
-              <option key={g.id} value={g.id}>
-                {g.name}
-              </option>
-            ))}
-          </OLFormSelect>
-        )}
-      </OLFormGroup>
-
-      {error && <ErrorMessage error={error} />}
-    </form>
-  )
+  if (isGroupsLoading) {
+    return (
+      <>
+        <br/>
+        <div role="status" className="loading d-flex justify-content-center align-items-center fs-5">
+          <div
+            aria-hidden="true"
+            className="spinner-border spinner-border-sm"
+          ></div>
+          {t('loading') + '…'}
+        </div>
+      </>
+    )
+  } else if (isGroupsLoaded) {
+    if (groups) {
+      return (
+        <FileTreeCreateNameProvider initialName="zotero.bib">
+          <FileTreeImportFromZotero
+            groups={groups}
+          />
+        </FileTreeCreateNameProvider>
+      )
+    } else {
+      return (
+        <div className = "referencesImportModal">
+          <p>{t('zotero_sync_description')}</p>
+          <p>
+            <OLButton
+              variant="primary"
+              onClick={() => {
+                window.open(
+                  '/user/zotero/oauth?popup=1',
+                  '_blank',
+                  'width=600,height=700'
+                )
+              }}
+            >
+              {t('link_to_zotero')}
+            </OLButton>
+          </p>
+        </div>
+      )
+    }
+  } else if (isGroupsError) {
+    return (
+      <OLNotification
+        type="error"
+        content={t('zotero_groups_loading_error', {
+          provider: t('zotero'),
+        })}
+      />
+    )
+  }
 }
@@ -0,0 +1,61 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useAsync from '@/shared/hooks/use-async'
+import { getJSON } from '@/infrastructure/fetch-json'
+import { debugConsole } from '@/utils/debugging'
+import ZoteroLogo from '@/shared/svgs/zotero-logo'
+import IntegrationCard from '@/features/integrations-panel/integration-card'
+import ZoteroLinkInfoModal from './zotero-link-info-modal'
+
+const ZoteroLinkCard = () => {
+  const { t } = useTranslation()
+
+  const [showModal, setShowModal] = useState(false)
+
+  const {
+    isError,
+    runAsync,
+    data: isConnected
+  } = useAsync<boolean>()
+
+  const handleClick = () => {
+    runAsync(getJSON('/user/zotero/status'))
+      .then(isConnected => {
+        if (isConnected) {
+          setShowModal(true)
+        } else {
+          window.open(
+            '/user/zotero/oauth?popup=1',
+            '_blank',
+            'width=600,height=700'
+          )
+        }
+      })
+      .catch(err => {
+        debugConsole.error(
+          err?.data?.message || err?.message || err
+        )
+        setShowModal(true)
+      })
+  }
+
+  return (
+    <>
+      <IntegrationCard
+        title={t('zotero')}
+        description={t('cite_directly_or_import_references')}
+        icon={<ZoteroLogo size={32} />}
+        showPaywallBadge={false}
+        onClick={handleClick}
+      />
+
+      <ZoteroLinkInfoModal
+        show={showModal}
+        handleHide={() => setShowModal(false)}
+        isError={isError}
+      />
+    </>
+  )
+}
+
+export default ZoteroLinkCard
@@ -0,0 +1,109 @@
+import { useTranslation, Trans } from 'react-i18next'
+import useAsync from '@/shared/hooks/use-async'
+import { deleteJSON } from '@/infrastructure/fetch-json'
+import { debugConsole } from '@/utils/debugging'
+import { useState, useEffect, useCallback } from 'react'
+import {
+  OLModal,
+  OLModalHeader,
+  OLModalTitle,
+  OLModalBody,
+  OLModalFooter,
+} from '@/shared/components/ol/ol-modal'
+import OLButton from '@/shared/components/ol/ol-button'
+import OLNotification from '@/shared/components/ol/ol-notification'
+
+import { ProjectSyncState, GitSyncModalStatus } from '../../types/git-sync-types'
+
+type ZoteroLinkInfoModalModalProps = {
+  show: boolean
+  isError: any
+  handleHide: () => void
+}
+
+const ZoteroLinkInfoModal = ({ show, isError, handleHide }: ZoteroLinkInfoModalProps) => {
+  const { t } = useTranslation()
+  const [showUnlinkInfo, setShowUnlinkInfo] = useState(false)
+
+  const {
+    isLoading: isUnlinking,
+    isError: isErrorUnlink,
+    runAsync: runAsyncUnlink,
+  } = useAsync<void>()
+
+  const handleUnlink = () => {
+    runAsyncUnlink(deleteJSON('/user/zotero'))
+      .catch(err => debugConsole.error(err?.data?.message || err?.message || err))
+    handleHide()
+  }
+
+  useEffect(() => {
+    if (!show) return
+    setShowUnlinkInfo(false)
+  }, [show])
+
+  return (
+    <>
+      <OLModal show={show} onHide={handleHide} backdrop="static">
+      <OLModalHeader closeButton>
+        <OLModalTitle>{t('zotero_integration')}</OLModalTitle>
+      </OLModalHeader>
+
+      <OLModalBody>
+        {showUnlinkInfo ? (
+          <OLNotification
+            type="warning"
+            content={t('unlink_warning_reference', { provider: t('zotero') })}
+          />
+        ) : isError ? (
+          <OLNotification
+            type="error"
+            content={t('problem_checking_connection_with_provider', {
+              provider: t('zotero'),
+            })}
+          />
+        ) : (
+          <OLNotification
+            type="info"
+            content={
+              <Trans
+                i18nKey="you_currently_have_x_linked_with_your_overleaf_account"
+                values={{ managers: t('zotero') }}
+                components={[<b />]}
+              />
+            }
+          />
+        )}
+      </OLModalBody>
+
+      <OLModalFooter>
+        {showUnlinkInfo ? (
+          <OLButton
+            variant="danger"
+            disabled={isUnlinking}
+            onClick={handleUnlink}
+          >
+            {t('confirm')}
+          </OLButton>
+        ) : (
+          <OLButton
+            variant="danger-ghost"
+            disabled={isUnlinking}
+            onClick={() => setShowUnlinkInfo(true)}
+          >
+            {t('unlink')}
+          </OLButton>
+        )}
+        <OLButton
+          variant="secondary"
+          onClick={handleHide}
+        >
+          {t('close')}
+        </OLButton>
+      </OLModalFooter>
+      </OLModal>
+    </>
+  )
+}
+
+export default ZoteroLinkInfoModal
@@ -1,10 +1,18 @@
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useCallback, useState } from 'react'
-import { postJSON } from '@/infrastructure/fetch-json'
 import getMeta from '@/utils/meta'
+import { getJSON, deleteJSON } from '@/infrastructure/fetch-json'
+import useAsync from '@/shared/hooks/use-async'
+import { debugConsole } from '@/utils/debugging'
 import OLButton from '@/shared/components/ol/ol-button'
+import {
+  OLModal,
+  OLModalBody,
+  OLModalFooter,
+  OLModalHeader,
+  OLModalTitle,
+} from '@/shared/components/ol/ol-modal'
 import OLNotification from '@/shared/components/ol/ol-notification'
-import OLFormControl from '@/shared/components/ol/ol-form-control'
 import ZoteroLogo from '@/shared/svgs/zotero-logo'

 /**
@@ -16,120 +24,159 @@ import ZoteroLogo from '@/shared/svgs/zotero-logo'
 *
 * Registered via overleafModuleImports.referenceLinkingWidgets.
 */
-export default function ZoteroWidget() {
+export const ZoteroWidget = function ZoteroWidget() {
  const { t } = useTranslation()
-  const user = getMeta('ol-user')
-  const refProviders = user?.refProviders || {}
-  const [isLinked, setIsLinked] = useState(Boolean(refProviders.zotero))
-  const [apiKey, setApiKey] = useState('')
-  const [processing, setProcessing] = useState(false)
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState('')
+  const { appName } = getMeta('ol-ExposedSettings')

-  const handleLink = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!apiKey) return
-      setProcessing(true)
-      setError('')
-      setSuccess('')
-      try {
-        await postJSON('/zotero/link', { body: { apiKey } })
-        setSuccess(t('zotero_account_linked_successfully'))
-        setApiKey('')
-        setProcessing(false)
-        setIsLinked(true)
-      } catch (err: any) {
-        const msg =
-          err?.data?.error === 'invalid_api_key'
-            ? 'Invalid API key. Please check your key and try again.'
-            : t('generic_something_went_wrong')
-        setError(msg)
-        setProcessing(false)
-      }
-    },
-    [apiKey, t]
-  )
+  const {
+    isLoading: isCheckingConn,
+    isError: isErrorConnCheck,
+    runAsync: runAsyncConnCheck,
+    data: isConnected,
+    setData: setConnState,
+  } = useAsync<boolean>()

-  const handleUnlink = useCallback(async () => {
-    setProcessing(true)
-    setError('')
-    setSuccess('')
-    try {
-      await postJSON('/zotero/unlink')
-      setProcessing(false)
-      setIsLinked(false)
-    } catch (err) {
-      setError(t('generic_something_went_wrong'))
-      setProcessing(false)
-    }
-  }, [t])
+  const {
+    isLoading: isUnlinking,
+    isError: isErrorUnlink,
+    runAsync: runAsyncUnlink,
+  } = useAsync<void>()
+
+  const [showUnlinkModal, setShowUnlinkModal] = useState(false)
+
+  const handleConnCheck = useCallback(() => {
+    runAsyncConnCheck(getJSON('/user/zotero/status'))
+      .catch(err => debugConsole.error(err?.data?.message || err?.message || err))
+  }, [runAsyncConnCheck])
+
+  useEffect(() => {
+    handleConnCheck()
+  }, [handleConnCheck])
+
+  const handleUnlink = useCallback(() => {
+    runAsyncUnlink(deleteJSON('/user/zotero'))
+      .then(() => setConnState(false))
+      .catch(err => debugConsole.error(err?.data?.message || err?.message || err))
+      .finally(() => setShowUnlinkModal(false))
+  }, [runAsyncUnlink])
+
+  if (isCheckingConn) {
+    return (
+      <div className="settings-widget-container">
+        <div>
+          <ZoteroLogo />
+        </div>
+
+        <div className="description-container">
+          <div className="title-row">
+            <h4>GitHub</h4>
+          </div>
+
+          <p className="small">
+            <span>{t('loading')}…</span>
+          </p>
+        </div>
+      </div>
+    )
+  }

  return (
-    <div className="settings-widget-container">
-      <div>
-        <ZoteroLogo />
-      </div>
-      <div className="description-container">
-        <div className="title-row">
-          <h4>{t('zotero')}</h4>
+    <>
+      <div className="settings-widget-container">
+        <div>
+          <ZoteroLogo size={40} />
        </div>
-        <p className="small">
-          {t('zotero_sync_description', {
-            appName:
-              getMeta('ol-ExposedSettings')?.appName || 'Overleaf',
-          })}
-        </p>
-        {error && <OLNotification type="error" content={error} />}
-        {success && <OLNotification type="success" content={success} />}
-        {!isLinked && (
-          <form onSubmit={handleLink}>
-            <p className="small text-muted">
-              Create an API key at{' '}
-              <a
-                href="https://www.zotero.org/settings/keys/new"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                zotero.org/settings/keys
-              </a>{' '}
-              with <strong>Allow library access</strong> and{' '}
-              <strong>Allow read access to all groups</strong> enabled.
-            </p>
-            <div className="form-group">
-              <OLFormControl
-                type="text"
-                placeholder="Paste your Zotero API key"
-                value={apiKey}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  setApiKey(e.target.value.trim())
-                }
-                disabled={processing}
-                autoComplete="off"
-              />
-            </div>
+
+        <div className="description-container">
+          <div className="title-row">
+            <h4 id="zotero-link">{t('zotero')}</h4>
+          </div>
+
+          <p className="small">
+            {t('zotero_sync_description', { appName })}
+          </p>
+
+          {isErrorConnCheck && (
+            <OLNotification
+              type="error"
+              content={t('problem_checking_connection_with_provider', { provider: t('zotero') })}
+            />
+          )}
+
+          {isErrorUnlink && (
+            <OLNotification
+              type="error"
+              content={t('generic_something_went_wrong')}
+            />
+          )}
+        </div>
+
+        <div>
+          {isConnected ? (
            <OLButton
-              variant="primary"
-              type="submit"
-              disabled={!apiKey}
-              isLoading={processing}
+              variant="danger-ghost"
+              onClick={() => setShowUnlinkModal(true)}
+              disabled={isUnlinking}
            >
-              {t('link_to_zotero')}
+              {isUnlinking ? t('unlinking') : t('unlink')}
            </OLButton>
-          </form>
-        )}
+          ) : isErrorConnCheck ? (
+            <OLButton
+              variant="secondary"
+              onClick={handleConnCheck}
+            >
+              {t('reconnect')}
+            </OLButton>
+          ) : (
+            <OLButton
+              variant="secondary"
+              href="/user/zotero/oauth?popup=0"
+            >
+              {t('link')}
+            </OLButton>
+          )}
+        </div>
      </div>
-      <div>
-        {isLinked && (
+
+      <OLModal
+        id="zotero-unlink-modal"
+        show={showUnlinkModal}
+        onHide={() => setShowUnlinkModal(false)}
+        backdrop="static"
+      >
+        <OLModalHeader>
+          <OLModalTitle>
+            {t('unlink_reference', {
+              provider: 'Zotero',
+            })}
+          </OLModalTitle>
+        </OLModalHeader>
+
+        <OLModalBody>
+          <p>
+            {t('unlink_warning_reference', {
+              provider: 'Zotero',
+            })}
+          </p>
+        </OLModalBody>
+
+        <OLModalFooter>
+          <OLButton
+            variant="secondary"
+            onClick={() => setShowUnlinkModal(false)}
+          >
+            {t('cancel')}
+          </OLButton>
+
          <OLButton
            variant="danger-ghost"
            onClick={handleUnlink}
-            isLoading={processing}
+            disabled={isUnlinking}
          >
-            {t('unlink')}
+            {isUnlinking ? t('unlinking') : t('unlink')}
          </OLButton>
-        )}
-      </div>
-    </div>
+        </OLModalFooter>
+      </OLModal>
+    </>
  )
 }
@@ -8,6 +8,13 @@ if (Settings.enabledLinkedFileTypes?.includes('zotero')) {
    './app/src/ZoteroLinkedFileAgent.mjs'
  )

+  const siteUrl = Settings.siteUrl.replace(/\/+$/, '') || 'http://localhost'
+  Settings.zotero = {
+    clientKey: process.env.ZOTERO_CLIENT_KEY,
+    clientSecret: process.env.ZOTERO_CLIENT_SECRET,
+    callbackURL: `${siteUrl}/user/zotero/oauth/callback`,
+  },
+
  ZoteroModule = {
    router: ZoteroRouter,
    linkedFileAgents: {
@@ -159,6 +159,7 @@
    "nocache": "^2.1.0",
    "node-fetch": "^2.7.0",
    "nodemailer": "^8.0.5",
+    "oauth-1.0a": "^2.2.6",
    "on-headers": "^1.0.2",
    "otplib": "^12.0.1",
    "overleaf-editor-core": "workspace:*",