How to use auth emulator alongside service worker?

[Demianeen]

I was going through the Integrate Firebase with a Next.js app tutorial to connect my Next.js app with firebase. As far as I understand, it is recommended to use auth emulator for development. So, I tried to connect firebase in service worker, but apparently service worker restricted to same origin policy, so I can't connect to auth emulator that is running on 127.0.0.1:9099. Is it possible to connect auth emulator. Or is there other recommended way for local development?

Browser logs:

GET http://localhost:3000/en/sign-up 500 (Internal Server Error)
auth-service-worker.js:28 fetch for http://localhost:3000/_next/static/chunks/webpack.js
auth-service-worker.js:89 config ...
8The FetchEvent for "<URL>" resulted in a network error response: the promise was rejected.
auth-service-worker.js:28 fetch for http://localhost:3000/_next/static/chunks/main.js
auth-service-worker.js:89 config ...
auth-service-worker.js:28 fetch for http://localhost:3000/_next/static/chunks/react-refresh.js
auth-service-worker.js:89 config ...
3assert.ts:146 Uncaught (in promise) FirebaseError: Firebase: Error (auth/emulator-config-failed).
    at tn (assert.ts:146:55)
    at l (assert.ts:177:11)
    at nt (emulator.ts:50:3)
    at fc (auth-service-worker.js:94:2)
tn @ assert.ts:146
l @ assert.ts:177
nt @ emulator.ts:50
fc @ auth-service-worker.js:94
Show 3 more frames
Show less
sign-up:1 
        
        
       GET http://localhost:3000/_next/static/chunks/main.js net::ERR_FAILED
auth-service-worker.js:28 fetch for http://localhost:3000/_next/static/chunks/pages/_app.js
auth-service-worker.js:89 config {apiKey: '...', authDomain: '...', projectId: '...', appId: '...'}
auth-service-worker.js:28 fetch for http://localhost:3000/_next/static/chunks/pages/_error.js
auth-service-worker.js:89 config {apiKey: '...', authDomain: '...', projectId: '...', appId: '...'}
auth-service-worker.js:28 fetch for http://localhost:3000/_next/static/development/_buildManifest.js
auth-service-worker.js:89 config {apiKey: '...', authDomain: '...', projectId: '...', appId: '...'}
auth-service-worker.js:28 fetch for http://localhost:3000/_next/static/development/_ssgManifest.js
auth-service-worker.js:89 config {apiKey: '...', authDomain: '...', projectId: '...', appId: '...'}
sign-up:1 
        
        
       GET http://localhost:3000/_next/static/chunks/webpack.js net::ERR_FAILED
sign-up:1 
        
        
       GET http://localhost:3000/_next/static/chunks/react-refresh.js net::ERR_FAILED
4assert.ts:146 Uncaught (in promise) FirebaseError: Firebase: Error (auth/emulator-config-failed).
    at tn (assert.ts:146:55)
    at l (assert.ts:177:11)
    at nt (emulator.ts:50:3)
    at fc (auth-service-worker.js:94:2)
tn @ assert.ts:146
l @ assert.ts:177
nt @ emulator.ts:50
fc @ auth-service-worker.js:94
Show 3 more frames
Show less
sign-up:1 
        
        
       GET http://localhost:3000/_next/static/development/_buildManifest.js net::ERR_FAILED
sign-up:1 
        
        
       GET http://localhost:3000/_next/static/chunks/pages/_app.js net::ERR_FAILED
sign-up:1 
        
        
       GET http://localhost:3000/_next/static/chunks/pages/_error.js net::ERR_FAILED
sign-up:1 
        
        
       GET http://localhost:3000/_next/static/development/_ssgManifest.js net::ERR_FAILED
auth-service-worker.js:28 fetch for chrome-extension://aeblfdkhhhdcdjpifhhbdiojplfjncoa/inline/injected.js
auth-service-worker.js:28 fetch for http://localhost:3000/favicon.ico
auth-service-worker.js:89 config {apiKey: '...', authDomain: '...', projectId: '...', appId: '...'}
assert.ts:146 Uncaught (in promise) FirebaseError: Firebase: Error (auth/emulator-config-failed).
    at tn (assert.ts:146:55)
    at l (assert.ts:177:11)
    at nt (emulator.ts:50:3)
    at fc (auth-service-worker.js:94:2)
tn @ assert.ts:146
l @ assert.ts:177
nt @ emulator.ts:50
fc @ auth-service-worker.js:94
Show 3 more frames
Show less
:3000/favicon.ico:1 

[ChrisBoik]

Same issue, following the exact same guide/files for the NextJS setup.

[Demianeen]

I see that almost 50% of issues are still open. Can we expect for help here or should we use some other channel?

[ChrisBoik]

I see that almost 50% of issues are still open. Can we expect for help here or should we use some other channel?

I was really hoping Firebase Demo Day would present some real world applications and codelabs resulting in a newer version of this repo or updates to it.

Apparently real world for Demo Day meant AI features. Which I'm all for. Just wish they'd use real world tooling, like this project, to show case it.

Also eagerly hoping to see community PRs accepted or issues addressed beyond each of our own work around solutions

[ChrisBoik]

Newest merges have dropped service worker in favour of cookie and session based authentication. Haven't tried with emulators yet but I imagine this fixes this issue.

Secondly, Firebase has a repo called Firebase Extended and it contains example apps for NextJS using Data Connect. If anyone happens to be using that then great. Though for the rest of us, I'd reference that and this updated repo here for new implementations.

Note as well, the docs/release notes hinted at a new Firebase native cookie session tooling for Next and other server framework use cases.

Keep your eyes on that as I imagine that will also impact the cookie method used in this repos latest updates but so far if works a lot better for me already. I take back my previous comment, Firebase Dev's have done a lot the last couple weeks and months in rolling out new tutorial repos and updating the docs.

Looking forward to where this goes.