Next.js: npm install fails with firebase example "with-firebase-authentication"

[victorkane]

Examples bug report

Example name

with-firebase-authentication

Describe the bug

npm install fails with any of the methods described in the example README (using create-next-app with either npm or yarn, downloading of example and performing npm install on Ubuntu and on Mac OS.)

Error shown:

node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp WARN Tried to download(404): https://node-precompiled-binaries.grpc.io/grpc/v1.20.0/node-v72-linux-x64-glibc.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, glibc) (falling back to source compile with node-gyp)
make: Entering directory '/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/build'
  CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o

...

  CXX(target) Release/obj.target/grpc_node/ext/channel.o                                                                                                                                                                                                             [36/1901]
../ext/channel.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE grpc::node::Channel::GetConnectivityState(Nan::NAN_METHOD_ARGS_TYPE)’:
../ext/channel.cc:292:56: error: no matching function for call to ‘v8::Value::Equals(v8::Local<v8::Boolean>)’
   int try_to_connect = (int)info[0]->Equals(Nan::True());
                                                        ^
In file included from /home/awfdev/.cache/node-gyp/12.14.1/include/node/node.h:63:0,
                 from ../../nan/nan.h:54,
                 from ../ext/channel.cc:23:
/home/awfdev/.cache/node-gyp/12.14.1/include/node/v8.h:2616:37: note: candidate: v8::Maybe<bool> v8::Value::Equals(v8::Local<v8::Context>, v8::Local<v8::Value>) const
   V8_WARN_UNUSED_RESULT Maybe<bool> Equals(Local<Context> context,
                                     ^
/home/awfdev/.cache/node-gyp/12.14.1/include/node/v8.h:2616:37: note:   candidate expects 2 arguments, 1 provided
At global scope:
cc1plus: error: unrecognized command line option ‘-Wno-cast-function-type’ [-Werror]
cc1plus: all warnings being treated as errors
grpc_node.target.mk:188: recipe for target 'Release/obj.target/grpc_node/ext/channel.o' failed
make: *** [Release/obj.target/grpc_node/ext/channel.o] Error 1
make: Leaving directory '/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Linux 3.13.0-57-generic
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/src/node/extensi
on_binary/node-v72-linux-x64-glibc/grpc_node.node" "--module_name=grpc_node" "--module_path=/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/src/node/extension_binary/node-v72-linux-x64-glibc" "--napi_version=5" "--node_abi_napi=napi" "--napi_
build_version=0" "--node_napi_label=node-v72"
gyp ERR! cwd /home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc
gyp ERR! node -v v12.14.1
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules
/grpc/src/node/extension_binary/node-v72-linux-x64-glibc/grpc_node.node --module_name=grpc_node --module_path=/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/src/node/extension_binary/node-v72-linux-x64-glibc --napi_version=5 --node_abi_napi=
napi --napi_build_version=0 --node_napi_label=node-v72' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
node-pre-gyp ERR! System Linux 3.13.0-57-generic
node-pre-gyp ERR! command "/usr/local/bin/node" "/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc
node-pre-gyp ERR! node -v v12.14.1
node-pre-gyp ERR! node-pre-gyp -v v0.12.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/src/node/extension_binary/node-v72-linux-x64-glibc/grpc_node.node --module_name=grpc_node --module_path=/home/awfdev/learn/nextjs/dd/with-firebase-authentication/node_modules/grpc/src/node/extension_binary/node-v72-linux-x64-glibc --napi_version=5 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'README'
2. Follow any of the instructions for installing example
3. See above errors

Expected behavior

After running npm install and following firestore database configuration instructions, be able to run npm run dev

Screenshots

none

System information

• OS: [macOS canary, or Ubuntu 16 or 18 LTS with build essentials installed on latest Node.js version (12.14.1]
• Version of Next.js: as per example package.json

[GustafHultgren]

Get the same stacktrace in a Vue SPA with firebase auth.

[chibicode]

It seems that older versions of grpc (a dependency of firebase) has an issue with recent versions of node. I'll send a PR to update the example with a more recent version of the firebase package.

[waldothedeveloper]

@chibicode yes, I believe that after updating firebase & firebase admin this gets resolved.
I found that response in an older nextJs sort of similar issue I cannot find right now.

I submitted also that after a successful npm install we are facing another issue:

with firebase authentication cannot find module '@firebase/app' after npm install

I would appreciate a working example on how to properly protect routes in NextJS using Firebase Authentication.

I have also submitted a StackOverFlow questions for this:

nextjs-firebase-authentication-protect-routes

[victorkane]

I can confirm that after updating (only) firebase & firebase-admin the npm install works perfectly, and I immediately had the example running with my own firestore database credentials for client and server.

My package.json:

cat package.json
{
  "name": "with-firebase",
  "version": "1.0.0",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "body-parser": "^1.17.1",
    "express": "^4.14.0",
    "express-session": "^1.15.2",
    "firebase": "^7.6.2",
    "firebase-admin": "^8.9.0",
    "isomorphic-unfetch": "2.0.0",
    "next": "latest",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "session-file-store": "^1.0.0"
  }
}

Please forgive me for not providing a PR, I will be able to next week if no-one else has time.

[ssong]

created the relevant PR based on discussions and applied it across all firebase examples

[waldothedeveloper]

Do you guys know how to fix this:
https://github.com/zeit/next.js/issues/10025