title: How to use JWT based local storage login for react Facebook and Google Login options?
body: <p>My web app based on <strong>REACT JS</strong> client side with <strong>PHP</strong> APIs on server side.</p>
  
  <p>I m already using <strong>JWT</strong> token based <strong>SIGN UP</strong> for users where a token is saved in <strong>local Storage</strong> if user logs in and is authenticated.</p>
  
  <p>See this Login API I call for <strong>Login</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const credentials = {
        email: this.state.email,
        password: this.state.password
      }
  
      axios.post('http://localhost/Auth/api/customers/login.php', credentials, {
      headers: {
          'Accept' : 'application/json, text/plain, */*',
          'Content-Type': 'application/json'
      }})
    .then(response =&gt; {
              const  token = response.data.jwt;
              localStorage.setItem("jwttoken", token);
              alert("You are Logged In as Valued Customer");
              this.setState({redirectToReferrer: true});
                     })
        .catch(err =&gt; {
        if (err) {
          console.log("Soryy Cannot Login to Customer Account!!!");}
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I m using <strong>Facebook</strong> and <strong>Google</strong> Signup Options like this on Signup.js Page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>signupS(res, type) {
       let postData;
       if (type === 'facebook' &amp;&amp; res.email) {
       postData = {
            FirstName: res.name,
            provider: type,
            email: res.email,
            provider_id: res.id,
            token: res.accessToken,
            provider_pic: res.picture.data.url
       };
      }
  
      if (type === 'google' &amp;&amp; res.w3.U3) {
      postData = {
        FirstName: res.w3.ig,
        provider: type,
        email: res.w3.U3,
        provider_id: res.El,
        token: res.Zi.access_token,
        provider_pic: res.w3.Paa
      };
  }
  
  if (postData) {
    console.log(postData);
    axios.post('http://localhost/Auth/api/customers/create_customer.php', postData)
    .then((result) =&gt; {
      console.log(result.data);
      alert("Congratulations! Your Customer Account is created");
      this.setState({redirectToReferrer: true});
      return result;
     })
  } else {}
  }
  
  
  
  render () {
  
        if (this.state.redirectToReferrer) {
          return (&lt;Redirect to={'/loginc'}/&gt;)
        }
        const responseFacebook = (response) =&gt; {
          console.log("facebook console");
          console.log(response);
          this.signupS(response, 'facebook');
      }
  
      const responseGoogle = (response) =&gt; {
          console.log("google console");
          console.log(response);
          this.signupS(response, 'google');
      }
  
  return (
  
  &lt;div&gt;
      &lt;FacebookLogin
            appId="my-api" 
            fields="name,email,picture"
            callback={responseFacebook}
          /&gt;
     
          &lt;GoogleLogin
            clientId="my-g-api" 
            buttonText="LOGIN WITH GOOGLE"
            onSuccess={responseGoogle}
            onFailure={responseGoogle}
          /&gt;
   
      &lt;/div&gt;
      ))}</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now When I run this, Im taking only <strong>email and name</strong> from facebook/Google and sending it to my same API for <strong>create_account</strong> which I was already using. And becoz Im sending <strong>No Password</strong> So account is not being created.</p>
  
  <p>Now What Im confused at, is that <strong><em>"Do I have to send this provider_id and token along the facebook &amp; Google credentials?</em></strong> Or Can I just <strong><em>send a password(same which user used for Facebook) along this all</em></strong>? </p>
  
  <p>I want to keep the login way with the JWT token, so what do I do with this token of <strong>Facebook/Google?</strong></p>