Summary
I am trying to test out the authorization with cloud functions by serving a local web app and calling them (as emulators can't emulate auth? See: Docs). My issue is that when I click the button on the served page that calls the cloud function, it tries to access the cloud function at: https://us-central1-MY-PROJECT.cloudfunctions.net/returnAuth resulting in a Cors issue. How do I get my web app to call the local cloud functions for testing? My suspicion is it is something inside of the firebaseConfig inside of the index.html?
I realize I will probably need to enable Cors, as the port the cloud functions are served on is different. But that is a different question from what I am asking.
Serving
I am serving my cloud functions as well as the index.html via the cmd firebase serve
which results in:
i functions: Watching "/Users/plum/firebase-test/test1/functions" for Cloud Functions...
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5000
✔ functions[returnAuth]: http function initialized (http://localhost:5001/MY_PROJECT/us-central1/returnAuth).
Error
Access to fetch at 'https://us-central1-MY-PROJECT.cloudfunctions.net/returnAuth' from origin 'http://localhost:5000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Failed to load resource: net::ERR_FAILED
Code: internal Message: internal Details: undefined
Simple Cloud Function
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const { exampleDataSnapshotChange } = require('firebase-functions-test/lib/providers/database');
admin.initializeApp();
exports.returnAuth = functions.https.onCall( (data, context) => {
//const uid = context.auth.uid;
//const name = context.auth.token.name || null;
const test = context.auth
return test
})
Simple Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<button id="Test1">Test 1</button>
</div>
<script>
$(document).ready(function() {
$("#Test1").on('click', function() {
var testAuth = firebase.functions().httpsCallable('returnAuth');
testAuth({text: "Testing"}).then(function(result) {
var sanitizedMessage = result.data.text;
console.log(sanitizedMessage);
})
.catch(function(error) {
var code = error.code;
var message = error.message;
var details = error.details;
console.log(`Code: ${code}\t Message: ${message}\t Details: ${details}`)
})
})
})
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.19.0/firebase-functions.js"></script>
<script src="/__/firebase/7.19.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "HIDDEN",
authDomain: "MY-PROJECT.firebaseapp.com",
databaseURL: "https://MY-PROJECT.firebaseio.com",
projectId: "MY-PROJECT",
storageBucket: "MY-PROJECT.appspot.com",
messagingSenderId: "SOME_NUMBER",
appId: "1:HASH:web:OTHER_HASH",
measurementId: "G-HASH"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</body>
</html>
