Stuck with Firebase Auth

#1

Hey all,

I’ve been hitting walls with auth and Redwood all day long (auth0 and now firebase).
So after creating an app at Firebase and adding it as auth provider in Redwood app, I get this message in browser:

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_2__.initializeApp is not a function
(anonymous function)
src/index.js:24
  21 | }
  22 | 
  23 | const firebaseClient = ((config) => {
> 24 |   firebase.initializeApp(config)
  25 |   return firebase
  26 | })(firebaseClientConfig)
  27 |

I’ve been trying with different imports for firebase but with no luck. The contents in index.js is just as Redwood generated them. Anyone with any idea? Thanks

#2

Hi @semirte, sorry to hear you’ve having problems with auth. How are you importing firebase, and what version are you using? Also, could you please provide the output of yarn rw info, thanks :slight_smile:

#3

Hi @semirte.

Something that gave me grief when I first started using Redwood and configuring auth was making sure the web side had access to my ENVs.

If I didn’t set those up, my auth client wouldn’t be configured correctly and I’d get errors.

Have you set your ENV that you might be using to setup Firebase (or Auth0) so the web side sees them?

See: include web env in docs

Specifically adding them to the redwood.toml

I know I have forgotten to do that and when I did I had problems.

#4

@semirte this is likely to do with how you imported firebase. Sometimes NPM module publishers don’t (yet) support ES module imports, so you have to use the import * syntax.

Try this:

import * as firebase from 'firebase/app'
import 'firebase/auth'

Hope this helps.

#5

This worked for me, both on localhost and the deployed app on netlify.

const firebaseClient = ((config) => {
  firebase.default.initializeApp(config)
  return firebase.default
})(firebaseClientConfig)

Don’t forget to include these env vars in redwood.toml.

includeEnvironmentVariables = ['FIREBASE_API_KEY', 'FIREBASE_AUTH_DOMAIN', 'FIREBASE_DATABASE_URL', 'FIREBASE_PROJECT_ID', 'FIREBASE_STORAGE_BUCKET', 'FIREBASE_MESSAGING_SENDER_ID', 'FIREBASE_APP_ID']
2 Likes
#6

I’m getting the same error
yarn run v1.22.10
$ /home/agent/Dev/foodserviceio/node_modules/.bin/rw info

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 15.0.1 - /tmp/yarn–1609821534848-0.2714854037495811/node
Yarn: 1.22.10 - /tmp/yarn–1609821534848-0.2714854037495811/yarn
Databases:
SQLite: 3.31.1 - /usr/bin/sqlite3
Browsers:
Chrome: 87.0.4280.88
Firefox: 84.0
npmPackages:
@redwoodjs/core: ^0.21.0 => 0.21.0

Done in 1.19s.

However if I change the import statement to
import firebase from ‘firebase/app’

from import * as firebase from ‘firebase/app’

could this be a npm or node issue?

#7

I’m sorry, but I don’t fully follow you here. Does it work for you now? And if so, what does your imports look like exactly?

#8

The following import was working …

import { AuthProvider } from '@redwoodjs/auth'
import * as firebase from 'firebase/app'
import 'firebase/auth'

Using

"firebase": "^7.15.1",

I see that the current package is 8.2.1

Is that the version you are using that requires a change to the imports?

1 Like
#9

yes it works for me… the import looks like this
import firebase from ‘firebase/app’

1 Like