How do I retrieve the data from a scanned QR Code?

Question

I'm practicing on how to generate a QR code based on the userID of the current user. And once the QR code of the specific user is scanned, it will display the account details of that user. I'm just practicing so I could be familiar with how this process works.

import QRCode from "qrcode";
import QrReader from "react-qr-reader";


const QrCode = () => {
  const [text, setText] = useState("");
  const [image, setImage] = useState("");
  const [scanResult, setScanResult] = useState("");
  const [id, setID] = useState("");
  const [details, setDetails] = useState("");

These are the codes to generate a QR code for the current user. This would work however, once the user logs out, it won't recognize the auth.currentUser.uid anymore and would cause an error.

TypeError: Cannot read property 'uid' of null

  let user = auth.currentUser.uid;
  console.log(user);


  const generateQrCode = async () => {
    try {
      const response = await QRCode.toDataURL(user);
      setImage(response);
      console.log(response);
    } catch (err) {
      alert("error");
    }
  };

These are the codes to scan the QR Code. I wanted to retrieve the data of the scanned QR code, however, it would cause an error in retrieving the document from firestore since it says that the scanResult should not be empty.

× FirebaseError: Function CollectionReference.doc() cannot be called with an empty path.

  const handleErrorWebCam = (error) => {
    alert("error scan");
  };

  const handleScanWebCam = (result) => {
    if (result) {
      setScanResult(result);
    }
  };

  useEffect(() => {
    const unsubscribe = firestore
      .collection("users")
      .doc(scanResult)
      .onSnapshot((snapshot) => {
        const arr = [];
        arr.push({
          ...snapshot.data(),
        });
        setDetails(arr);
        console.log(arr);
      });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <Container>
      <Card>
        <h1> Just Trying First with QR Code</h1>
        {user}
        <CardContent>
          <Grid container spacing={2}>
            <Grid item xl={4} lg={4} md={6} sm={12} xs={12}>
              {/* {user} */}
              {/* <TextField
                label="Enter Text"
                value={user}
                // onChange={(e) => setText(e.target.value)}
              /> */}
              <Button variant="contained" onClick={() => generateQrCode()}>
                Submit
              </Button>
              <br />
              <br />
              <br />
              {image ? (
                <a href={image} download>
                  <img src={image} alt="img" />{" "}
                </a>
              ) : null}
            </Grid>
            <Grid item xl={4} lg={4} md={6} sm={12} xs={12}>
              <h1>Scanning</h1>
              <QrReader
                delay={300}
                style={{ width: "100%" }}
                onError={handleErrorWebCam}
                onScan={handleScanWebCam}
              />
              <h3>Scanned Result</h3>
              {scanResult}
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    </Container>
  );
};

export default QrCode;

I'm actually will be building a project with this similar process. There would be 2 users. User1 registers and login and will have a QR code based on the user1's userID. user2 will be able to scan the QR code of the user1 and will be able to see the account details of user1. I'm practicing how I could implement this process.

Answer 1

The auth.currentUser is null when there is no user logged in. Before generating the QR code, you should check if the user is logged in.

  const generateQrCode = async () => {
    try {
      const user = auth.currentUser
      if (!user) {
        alert("No user logged in")
      } else {
        const response = await QRCode.toDataURL(user.uid);
        setImage(response);
        console.log(response);
      }
    } catch (err) {
      alert("error");
    }
  };

The default state for scanResult is empty string. Run your query when you have received the result:

  const handleScanWebCam = (result) => {
    if (result) {
      setScanResult(result);
      firestore
        .collection("users")
        .doc(result)
        .get()
        .then((snapshot) => {
          const arr = [];
          arr.push({
            ...snapshot.data(),
          });
          setDetails(arr);
          console.log(arr);
        });
    }
  };

  useEffect(() => {
    console.log("Use effect")
  }, []);