firebase / firebase/firebase-tools
Firebase emulator does not work when exposing site via tunnel (i.e. localtunnel). Missing header Access-Control-Allow-Private-Network
- Dominant language
- TypeScript
- Stars
- 4.5k
- Forks
- 1.3k
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 84
Description
### [REQUIRED] Environment info
**firebase-tools:** 10.2.1
**Platform:** Windows 10
### [REQUIRED] Test case
Attempt to create a user and sign them in when file is exposed via a tunnel.
1. Setup a firebase project with hosting and emulators
2. Replace index.html in public folder with below
3. Emulate project
```
App
Create User
Authenticate User
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js'
// Add Firebase products that you want to use
import {
getAuth,
connectAuthEmulator,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
} from 'https://www.gstatic.com/firebasejs/9.6.7/firebase-auth.js'
const email = "name@fake.com"
const password = "password"
const firebaseConfig = {
apiKey: "AIzaSyDrzYTAKem9ut-r_iV-vIDZggnsjvttfQM",
authDomain: "fir-emulator-test-40bf3.firebaseapp.com",
projectId: "fir-emulator-test-40bf3",
storageBucket: "fir-emulator-test-40bf3.appspot.com",
messagingSenderId: "1033607461892",
appId: "1:1033607461892:web:4bfee036d7c11e4f7a4951"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth()
connectAuthEmulator(auth, "http://localhost:9099");
async function signOut () {
console.log("Signing out");
await auth.signOut()
console.log("Signed out");
}
async function authenticateUser () {
await signOut()
console.log("Signing in");
const credential = await signInWithEmailAndPassword(auth, email, password)
console.log("Signed in", credential)
}
async function createUser () {
console.log('Creating User');
const credential = await createUserWithEmailAndPassword(auth, email, password)
console.log("User created", credential)
}
auth.onAuthStateChanged(console.log)
document.getElementById('createUser').addEventListener('click', createUser, true);
document.getElementById('authenticateUser').addEventListener('click', authenticateUser, true);
```
### [REQUIRED] Steps to reproduce
1. Navigate to localhost:5000 (or your path for emulated hosting)
2. Click "Create User"
3. Verify user was created
4. Click "Authenticate User"
5. Verify user was authenticated.
6. Use localtunnel to expose your site `npx localtunnel --port 5000` (https://github.com/localtunnel/localtunnel)
7. Navigate to url output by localtunnel
8. Click "Authenticate User" (no need to create a second time as should already exist from step 2)
### [REQUIRED] Expected behavior
User should be authenticated when you click "Authenticate User"
### [REQUIRED] Actual behavior
Attempt fails with error message
```
Access to fetch at 'http://localhost:9099/identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyDrzYTAKem9ut-r_iV-vIDZggnsjvttfQM' from origin 'https://test.loca.lt' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Private-Network' header was present in the preflight response for this private network request targeting the `local` address space.
```
From reading it looks like it could be related to https://developer.chrome.com/blog/private-network-access-update/ ??
Contributor guide
Assessment
This issue has not been assessed yet.