Trouble adding authentication with React and Firebase

Question

I'm having issues adding authentication to an app I have been working on. Everything works fine with firebase as-is without the auth, until I start adding these new lines, which are basically just:

export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();

import firebase, { auth, provider } from './firebase.js';

I have a file for my config (config.js), which just contains an export for DB_CONFIG (with all my correct info). Here's where I'm running into issues. The tutorial I'm following has firebase imported and initialized in the config file, while I am doing so in my App.js file. I've been trying different things for a couple hours and nothing is working for me. If I import firebase into my config and initializeApp there, it breaks my App.js. Here's a gist of my code vs. what I'm trying to follow.

Is there an easy way to get the auth and provider set up and imported into my App.js file without changing too much?

Alex Sánchez · Accepted Answer · 2017-11-13 02:15:53Z

1

After looking at your code I made some changes to it, maybe this approach help?

import * as firebase from 'firebase'
import { DB_CONFIG } from './Config/config';

// Configure firebase and it will be available globally.
firebase.initializeApp(DB_CONFIG)

// Once initialized you just need to create the provider and auth
const provider = new firebase.auth.GoogleAuthProvider();
const auth = firebase.auth();

class App extends Component {

  constructor(props){
    super(props);

    // And just call firebase.database() to access database functionality.
    // You don't even need to assign it to a local variable as you can access 
    // it anywhere in your code just by importing firebase
    // and calling firebase.database() and also firebase.auth()
    this.databaseRef = firebase.database().ref().child('players');
  }
}

PS: I would delete your gist because, even though you changed the config file, your configuration info is still available in the gist revisions...

answered Nov 13, 2017 at 2:15

Alex Sánchez

9505 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

idlehand Over a year ago

That seems to be working well, thanks for that! And thanks for alerting me of the Gist.

Collectives™ on Stack Overflow

Trouble adding authentication with React and Firebase

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related