firebase 보안규칙

🚨 Permission denied 에러?

문제의 에러 코드

Repo.ts:534 Uncaught (in promise) Error: Permission denied
at Repo.ts:534:1
at async firebase.js:34:1
query.ts:446 Error: Permission denied
at Repo.ts:534:1
2
react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: [object Error]). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-dom.development.js:14887:1)
at reconcileChildFibers (react-dom.development.js:15828:1)
at reconcileChildren (react-dom.development.js:19167:1)
at updateHostComponent (react-dom.development.js:19924:1)
at beginWork (react-dom.development.js:21618:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
react-dom.development.js:18687 The above error occurred in the <p> component:

at p
at Products (http://localhost:3000/static/js/bundle.js:1040:69)
at Home
at RenderedRoute (http://localhost:3000/static/js/bundle.js:216881:5)
at Outlet (http://localhost:3000/static/js/bundle.js:217430:26)
at AuthContextProvider (http://localhost:3000/static/js/bundle.js:1295:3)
at QueryClientProvider (http://localhost:3000/static/js/bundle.js:230833:3)
at App
at RenderedRoute (http://localhost:3000/static/js/bundle.js:216881:5)
at RenderErrorBoundary (http://localhost:3000/static/js/bundle.js:216828:5)
at DataRoutes (http://localhost:3000/static/js/bundle.js:217338:5)
at Router (http://localhost:3000/static/js/bundle.js:217451:15)
at RouterProvider (http://localhost:3000/static/js/bundle.js:217278:5)
React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.
hooks.tsx:608 React Router caught the following error during render Error: Objects are not valid as a React child (found: [object Error]). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-dom.development.js:14887:1)
at reconcileChildFibers (react-dom.development.js:15828:1)
at reconcileChildren (react-dom.development.js:19167:1)
at updateHostComponent (react-dom.development.js:19924:1)
at beginWork (react-dom.development.js:21618:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
Object
componentStack
:
"\n    at p\n    at Products (http://localhost:3000/static/js/bundle.js:1040:69)\n    at Home\n    at RenderedRoute (http://localhost:3000/static/js/bundle.js:216881:5)\n    at Outlet (http://localhost:3000/static/js/bundle.js:217430:26)\n    at AuthContextProvider (http://localhost:3000/static/js/bundle.js:1295:3)\n    at QueryClientProvider (http://localhost:3000/static/js/bundle.js:230833:3)\n    at App\n    at RenderedRoute (http://localhost:3000/static/js/bundle.js:216881:5)\n    at RenderErrorBoundary (http://localhost:3000/static/js/bundle.js:216828:5)\n    at DataRoutes (http://localhost:3000/static/js/bundle.js:217338:5)\n    at Router (http://localhost:3000/static/js/bundle.js:217451:15)\n    at RouterProvider (http://localhost:3000/static/js/bundle.js:217278:5)"
[[Prototype]]
:
Object

에러 이유

Permission denied 에러는 파일이나 디렉토리에 대한 접근 권한이 없을 때 발생하는데,
이 경우 일반적으로 서버에서 데이터를 가져오는 과정에서 발생합니다.

• Firebase 또는 Cloudinary와 같은 서비스를 사용할 때,
  해당 서비스의 권한 설정이 제대로 되어있지 않으면 이런 문제가 발생할 수 있습니다.
  Firebase Database 또는 Firestore의 권한 설정을 확인해보세요.
  Firebase 콘솔에서 데이터베이스 섹션으로 가면 규칙(Rules) 탭이 있습니다.
  이곳에서 읽기/쓰기 권한을 확인하고 필요하다면 수정해보세요.
• Cloudinary의 경우, 이미지 업로드 시 사용하는 preset 값과 관련된 문제일 수도 있습니다.
  Cloudinary 콘솔에서 preset 값을 확인하고, .env 파일에 정확히 입력되었는지 확인해보세요.
• useQuery와 useMutation 등 react-query 훅을 사용하는 코드 부분에서
  오류 처리가 제대로 되어있는지 확인하세요.
  만약 서버 요청이 실패하였을 때 오류를 적절히 처리하지 않으면 React 앱 전체가 크래시될 수 있습니다.
• 네트워크 탭(Network tab)을 열어서 API 요청들이 어떻게 진행되고 있는지 확인하세요.
  어떤 요청에서 에러가 발생하는지, 그리고 그 요청의 응답은 어떤지 보면 좋겠습니다.

해결

Firebase 콘솔에 접속해합니다

Firebase 콘솔에 접속하는 방법은 아래와 같습니다:

웹 브라우저를 열고, Firebase Console에 접속합니다.
Google 계정으로 로그인합니다. Firebase 프로젝트를 생성하거나 관리할 때 사용한 Google 계정으로 로그인해야 합니다.
Firebase 콘솔 홈페이지에서 프로젝트 리스트가 보일 것입니다. 여기서 수정하고자 하는 프로젝트를 클릭합니다.
왼쪽 사이드바에서 'Cloud Firestore' 또는 'Realtime Database'를 선택합니다 (사용 중인 데이터베이스 타입에 따라 선택).
데이터베이스 페이지에서 상단의 '규칙(Rules)' 탭을 클릭하여 권한 설정을 확인하거나 수정할 수 있습니다.
규칙을 수정한 후 반드시 '배포(Publish)' 버튼을 클릭하여 변경사항을 저장해야 합니다.
위 과정을 통해 Firebase 콘솔에 접속하고, 데이터베이스의 규칙 설정을 확인하거나 수정할 수 있습니다.

Firebase에서 데이터를 가져오는 과정에서 "Permission denied" 에러가 발생하고 있습니다. 이는 Firebase Database의 권한 설정이 제대로 되어있지 않아서 발생하는 문제일 가능성이 높습니다.

Firebase 콘솔에 접속해서 데이터베이스의 규칙(Rules)을 확인해보세요.

Firestore를 사용하는 경우 아래와 같은 형태로 규칙을 설정할 수 있습니다:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

위의 예제는 인증된 사용자만 읽기/쓰기를 허용하는 규칙입니다.

만약 Realtime Database를 사용하는 경우, 아래와 같은 형태로 규칙을 설정할 수 있습니다:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

위의 예제도 마찬가지로 인증된 사용자만 읽기/쓰기를 허용하는 규칙입니다.

규칙을 수정한 후에는 반드시 '배포' 버튼을 클릭해서 변경사항을 적용해야 합니다.

Realtime Database 를 사용하기 때문에 아래 json 코드로 해결🙌