How do I handle Firebase Auth redirect - Getting 404

Support
, , ,
1

I am using Firebase Authentication and it works fine in development. When I try it in deployment, it flashes a 404 page then returns to the home page. I assume this is because the redirect is not recognized by Netlify. My question is, how do I handle firebase redirect authentication in Netlify?

const signInWithRedirect = (source) => {
        var provider;
        switch(source) {
            case 'Google':
                provider = new firebase.auth.GoogleAuthProvider()
                break;
            case 'Github':
                provider = new firebase.auth.GithubAuthProvider()
                break;
        }
        firebase.auth().signInWithRedirect(provider);
    }
2

Hi @OtterlySori,

Where is this redirect taking place? In client-side code?

3

Hi, I actually got this code to work. However, I am encountering another issue with Netlify functions that I was hoping you could help with out with. I was wondering how can I use firebase in my Netlify functions? When I have attempted to use it, it said I had two instances and when I gave them separate names they didn’t resolve.

4

Hi @OtterlySori,

If you can share your code that would be helpful. But on a general note, it should be something like:

const Firebase = require('the-npm-module')
exports.handler = async () => {
  const foo = Firebase.bar({
    // options
  })
}

Does this not work?

5

It does not. My webhook for stripe works fine in the same script, but I am unable to add firebase. Since the Functions folder is in the root directory (functions → handle-purchase), I get the following error:

Code:

const fb = require('firebase')

Error:
{“errorMessage”:“firebase is not defined”,“errorType”:“ReferenceError”,“stackTrace”:[“Object.exports.handler (/Users/{name}/portfolio/portfolio-website/functions/handle-purchase.js:7:16)”,“Object._executeSync (/Users/{name}/.nvm/versions/node/v16.4.0/lib/node_modules/netlify-cli/node_modules/lambda-local/build/lambdalocal.js:286:47)”,"/Users/{name}/.nvm/versions/node/v16.4.0/lib/node_modules/netlify-cli/node_modules/lambda-local/build/lambdalocal.js:95:26",“new Promise ()”,“Object.execute (/Users/{name}/.nvm/versions/node/v16.4.0/lib/node_modules/netlify-cli/node_modules/lambda-local/build/lambdalocal.js:87:16)”,“Object.invokeFunction (/Users/{name}/.nvm/versions/node/v16.4.0/lib/node_modules/netlify-cli/src/lib/functions/runtimes/js/index.js:57:36)”,“NetlifyFunction.invoke (/Users/{name}/.nvm/versions/node/v16.4.0/lib/node_modules/netlify-cli/src/lib/functions/netlify-function.js:85:41)”,“processTicksAndRejections (node:internal/process/task_queues:96:5)”,“async handler (/Users/{name}/.nvm/versions/node/v16.4.0/lib/node_modules/netlify-cli/src/lib/functions/server.js:98:33)”],“level”:“error”}

6

perhaps because you initialised it as fb

const fb = require('firebase')
7

Wow, ok. I named it so many things except firebase. The plugin doesn’t say the name it initialized to so I assumed it didn’t matter. It seems to be working now when I am calling Firestore. Thank you, that solved me problem! :slight_smile: