fix: hide force unlock button if the user has no permissions to interact with it (#7418)

packages/next/src/views/Edit/Default/Auth/index.tsx

@@ -7,13 +7,14 @@ import {
   EmailField,
   PasswordField,
   TextField,
+  useAuth,
   useConfig,
   useDocumentInfo,
   useFormFields,
   useFormModified,
   useTranslation,
 } from '@payloadcms/ui'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
 import type { Props } from './types.js'
@@ -38,6 +39,7 @@ export const Auth: React.FC<Props> = (props) => {
     verify,
   } = props
 
+  const { permissions } = useAuth()
   const [changingPassword, setChangingPassword] = useState(requirePassword)
   const enableAPIKey = useFormFields(([fields]) => (fields && fields?.enableAPIKey) || null)
   const dispatchFields = useFormFields((reducer) => reducer[1])
@@ -50,6 +52,23 @@ export const Auth: React.FC<Props> = (props) => {
     serverURL,
   } = useConfig()
 
+  const hasPermissionToUnlock: boolean = useMemo(() => {
+    const collection = permissions?.collections?.[collectionSlug]
+
+    if (collection) {
+      const unlock = 'unlock' in collection ? collection.unlock : undefined
+
+      if (unlock) {
+        // current types for permissions do not include auth permissions, this will be fixed in another branch soon, for now we need to ignore the types
+        // @todo: fix types
+        // @ts-expect-error
+        return unlock.permission
+      }
+    }
+
+    return false
+  }, [permissions, collectionSlug])
+
   const handleChangePassword = useCallback(
     (state: boolean) => {
       if (!state) {
@@ -153,11 +172,11 @@ export const Auth: React.FC<Props> = (props) => {
                 {t('authentication:changePassword')}
               </Button>
             )}
-            {operation === 'update' && (
+            {operation === 'update' && hasPermissionToUnlock && (
               <Button
                 buttonStyle="secondary"
                 disabled={disabled}
-                onClick={() => unlock()}
+                onClick={() => void unlock()}
                 size="small"
               >
                 {t('authentication:forceUnlock')}