How to fix Callable Functions: UNAUTHENTICATED - Invalid credentials in Firebase

// Web SDK
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { getFunctions, httpsCallable } from 'firebase/functions';

const auth = getAuth();

onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, safe to call function
    const functions = getFunctions();
    const myFunction = httpsCallable(functions, 'myFunctionName');
    myFunction({ data: 'value' }).then(result => {
      console.log('Success:', result.data);
    }).catch(error => {
      console.error('Function error:', error.code, error.message);
    });
  } else {
    console.log('User is not signed in');
  }
});

// Android
import com.google.firebase.auth.ktx.auth
import com.google.firebase.functions.ktx.functions
import com.google.firebase.ktx.Firebase

val auth = Firebase.auth
val currentUser = auth.currentUser

if (currentUser != null) {
  val functions = Firebase.functions
  functions.getHttpsCallable("myFunctionName")
    .call(mapOf("data" to "value"))
    .addOnSuccessListener { result ->
      Log.d("Function", "Success: ${result.data}")
    }
    .addOnFailureListener { exception ->
      Log.e("Function", "Error: ${exception.message}")
    }
} else {
  Log.d("Auth", "User is not signed in")
}

// iOS/Swift
import FirebaseAuth
import FirebaseFunctions

let auth = Auth.auth()

if let user = auth.currentUser {
  let functions = Functions.functions()
  functions.httpsCallable("myFunctionName").call(["data": "value"]) { result, error in
    if let error = error {
      print("Error: \(error.localizedDescription)")
    } else {
      print("Success: \(result?.data ?? "")")
    }
  }
} else {
  print("User is not signed in")
}

// Email/password sign-in
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import { getFunctions, httpsCallable } from 'firebase/functions';

const auth = getAuth();

signInWithEmailAndPassword(auth, 'user@example.com', 'password')
  .then((userCredential) => {
    // User is now signed in, can call functions
    const functions = getFunctions();
    const myFunction = httpsCallable(functions, 'myFunctionName');
    return myFunction({ userId: userCredential.user.uid });
  })
  .catch((error) => {
    console.error('Sign-in error:', error.code);
  });

// Anonymous sign-in
import { getAuth, signInAnonymously } from 'firebase/auth';

const auth = getAuth();

signInAnonymously(auth)
  .then((userCredential) => {
    console.log('Signed in anonymously as:', userCredential.user.uid);
    // Can now call functions
  })
  .catch((error) => {
    console.error('Error:', error.code);
  });

// Google Sign-in
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const auth = getAuth();
const provider = new GoogleAuthProvider();

signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in with Google
  })
  .catch((error) => {
    console.error('Error:', error.code);
  });

// Correct - SDK automatically includes token
import { getFunctions, httpsCallable } from 'firebase/functions';

const functions = getFunctions();
const myFunction = httpsCallable(functions, 'myFunctionName');
await myFunction({ /* data */ }); // Token included automatically

// Incorrect - manual HTTP request (token not included)
const response = await fetch('https://us-central1-myproject.cloudfunctions.net/myFunction', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ /* data */ })
  // Token is NOT automatically included
});

import { getAuth } from 'firebase/auth';

const auth = getAuth();
const token = await auth.currentUser.getIdToken();

const response = await fetch('https://us-central1-myproject.cloudfunctions.net/myFunction', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token // Must include token manually
  },
  body: JSON.stringify({ data: { /* your data */ } })
});

import { getAuth } from 'firebase/auth';
import { getFunctions, httpsCallable } from 'firebase/functions';

const auth = getAuth();

// Force token refresh
await auth.currentUser.getIdToken(true);

// Now call the function with fresh token
const functions = getFunctions();
const myFunction = httpsCallable(functions, 'myFunctionName');
const result = await myFunction({ userId: auth.currentUser.uid });

// Android
val user = Firebase.auth.currentUser
user?.getIdToken(true)?.addOnSuccessListener { result ->
  val token = result.token
  // Token is now refreshed, can call function
  val functions = Firebase.functions
  functions.getHttpsCallable("myFunctionName").call(mapOf())
}

// iOS
Auth.auth().currentUser?.getIDTokenForcingRefresh(true) { idToken, error in
  if let error = error {
    print("Error refreshing token: \(error.localizedDescription)")
    return
  }
  // Token is refreshed, can now call function
  let functions = Functions.functions()
  functions.httpsCallable("myFunctionName").call(nil)
}

// Client - check configuration
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  projectId: 'YOUR_PROJECT_ID',
  appId: 'YOUR_APP_ID'
  // ... other config
};

const app = initializeApp(firebaseConfig);
console.log('Configured project:', firebaseConfig.projectId);

// Server - check configuration in firebase.json
{
  "functions": {
    "source": "functions",
    "codebase": "default",
    "runtime": "nodejs18"
  },
  "firebaserc": ".firebaserc"
}

firebase projects:list
firebase use --list  # Shows currently selected project

# Verify via Firebase CLI
firebase auth:import users.json  # This will tell you if auth is enabled

# Or check project settings
firebase projects:list