CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-authentication
Jovan
Jovan

Reputation: 41

Connection to Facebook with React and Firebase

i'm french, sorry for my little english.

I've a problem with Reactjs and Firebase, an error when i want connect with Facebook. I look tutorial in Udemy platform. This is a video for learn React 

    REBASE: The Firebase endpoint you are trying to listen to must be a string. Instead, got undefined

Parts of code Admin.js : 

import React, { Component } from 'react'
import AjouterRecette from './AjouterRecette'
import AdminForm from './AdminForm'
import Login from './Login'

import firebase from 'firebase/app'
import 'firebase/auth'
import base, { firebaseApp } from '../base'

class Admin extends Component {
  state = {
    uid: null,
    chef: null
  }

  componentDidMount () {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.handleAuth({ user })
      }
    })
  }

  handleAuth = async authData => {
    console.log(authData)
     const box = await base.fetch(this.props.pseudo, { context: this })

    if (!box.chef) {
    await base.post(`${this.props.pseudo}/chef`, {
    data: authData.user.uid
    })
  }

     this.setState({
      uid: authData.user.uid,
      chef: box.chef || authData.user.uid
      })
   }

  authenticate = () => {
    const authProvider = new firebase.auth.FacebookAuthProvider()
    firebaseApp
      .auth()
      .signInWithPopup(authProvider)
      .then(this.handleAuth)
  }

 ...

export default Admin

Thank's Have a good day.

......................................................................................................................................................................................................................................................................................................................................................................................................

Upvotes: 1

Views: 84

Answers (1)

FrancoisC
FrancoisC

Reputation: 126

I've got exactly the same problem, probably because I follow the same training as you.

Your error is here :

const box = await base.fetch(this.props.pseudo, { context: this })

because this.props.pseudo is null.

in app.js, in the admin component, write

pseudo={this.props.match.params.pseudo}

and not

pseudo={this.state.pseudo}

and that shoudl work.

regards

Upvotes: 1

Related Questions