firebase / firebase/firebase-tools

Firebase emulator does not work when exposing site via tunnel (i.e. localtunnel). Missing header Access-Control-Allow-Private-Network

Open
#4,227 16 comments 0 reactions 0 assignees View on GitHub
emulator-suite emulators: auth type: feature request
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.