React Firebase user.email=null when login with Gmail

Issue

This Content is from Stack Overflow. Question asked by Monzur Adler

I have tried to access the user.email from the email input field , but it remains null

My code :

    import React from "react";
import { useState } from "react";
import { useParams } from "react-router-dom";
import UseServiceDetails from "../Hooks/UseServiceDetails";
import { useAuthState } from 'react-firebase-hooks/auth';
import auth from "../../firebase.init";

const Checkout = () => {
  const { serviceId } = useParams();

  const [service] = UseServiceDetails(serviceId);
  // console.log(service);
  const [user] = useAuthState(auth);
  return (
    <div>
      <h2 className="text-center">Please checkout  <b className="text-danger">{service.name}</b> </h2>
      <form className="w-50 mx-auto" action="">
        <input className="w-100 mb-2" type="text" value={user.displayName} name="name" placeholder=" name" readonly disabled /> <br />
        <input className="w-100 mb-2" type="text" value={user.email} name="email" placeholder="email" /> <br />
        <input className="w-100 mb-2" type="text" value={service.name} name="service" placeholder=" service" /> <br />
        <input className="w-100 mb-2" type="text" value={user.address} name="address" placeholder=" address" /> <br />
        <input className="w-100 mb-2" type="text" value={user.phone} name="phone" placeholder=" phone" /> <br />
        <button className="btn btn-danger w-50 d-block mx-auto " type="submit" value="place order">Submit</button>
      </form>
    </div>
  );
};

export default Checkout;

User in my console :

UserImpl {providerId: ‘firebase’, proactiveRefresh: ProactiveRefresh, reloadUserInfo: {…}, reloadListener: null, uid: ‘pFzDIqOeNyca19qJj2uOnaXoI2r1’, …}
accessToken
: * removed to keep short*

auth
:
AuthImpl {app: FirebaseAppImpl, heartbeatServiceProvider: Provider, config: {…}, currentUser: UserImpl, emulatorConfig: null, …}
displayName
:
“Monzur alam”
email
:
null

emailVerified
:
false
isAnonymous
:
false
metadata
:
UserMetadata {createdAt: ‘1663568941792’, lastLoginAt: ‘1663569399378’, lastSignInTime: ‘Mon, 19 Sep 2022 06:36:39 GMT’, creationTime: ‘Mon, 19 Sep 2022 06:29:01 GMT’}
phoneNumber
:
null



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?