CODEWITHSUNDEEP
reactjsfirebasefirebase-authentication
idlehand
idlehand

Reputation: 421

Trouble adding authentication with React and Firebase

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?

Upvotes: 0

Views: 104

Answers (1)

Alex Sánchez
Alex Sánchez

Reputation: 940

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...

Upvotes: 1

Related Questions