[code=permission-denied]: Permission denied on resource project

Question

firebase error:

I am using react-hooks-firebase, with react and TypeScript, I added true to the firebase database...

firebase.ts:

I added '' as a solution I saw in Stack Overflow with using the way of Vite.

import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

export const firebaseConfig = {
  apiKey: 'import.meta.env.API_KEY',
  authDomain: 'import.meta.env.AUTH_DOMATIN',
  projectId: 'import.meta.env.PROJECT_ID',
  storageBucket: 'import.meta.env.STORAGE_BUCKET',
  messagingSenderId: 'import.meta.env.MESSAGING_SENDER_ID',
  appId: 'import.meta.env.APP_ID',
  measurementId: 'import.meta.env.MEASUREMENT_ID'
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app)
export const db = getFirestore(app);
export const storage = getStorage(app);

Answer 1

Looking at the HTTP error, we can see that the API key used is import.meta.env.API_KEY which should be your actual API key:

POST: https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=import.meta.env.API_KEY 400 (Bad Request)

Looking at your firebaseConfig object, we can see that each value is provided as a string instead of pulling from the import.meta.env object itself:

export const firebaseConfig = {
  apiKey: 'import.meta.env.API_KEY',
  authDomain: 'import.meta.env.AUTH_DOMATIN',
  projectId: 'import.meta.env.PROJECT_ID',
  storageBucket: 'import.meta.env.STORAGE_BUCKET',
  messagingSenderId: 'import.meta.env.MESSAGING_SENDER_ID',
  appId: 'import.meta.env.APP_ID',
  measurementId: 'import.meta.env.MEASUREMENT_ID'
};

should be

export const firebaseConfig = {
  apiKey: import.meta.env.API_KEY,
  authDomain: import.meta.env.AUTH_DOMATIN,
  projectId: import.meta.env.PROJECT_ID,
  storageBucket: import.meta.env.STORAGE_BUCKET,
  messagingSenderId: import.meta.env.MESSAGING_SENDER_ID,
  appId: import.meta.env.APP_ID,
  measurementId: import.meta.env.MEASUREMENT_ID
};

Note: Your linter may complain that import.meta.env does not exist. If this is the case, you should follow the IntelliSense for TypeScript documentation to declare the appropriate values.