score:1

Accepted answer

you can create a custom function inside your login. jsx file to call the original signinwithgithub method with a try catch block. and more importantly, you should not use render inside a functional component. use return to render the jsx in dom.

firebase.js

export const signinwithgithub = async () => {
  try {
    const res = await signinwithpopup(auth, githubprovider);
    const user = res.user;
  } catch (err) {
    throw new error(err?.message || "unable to sign in with github");
  }
};

login.jsx

import react, { useeffect, usestate } from "react";
import { useauthstate } from "react-firebase-hooks/auth";
import { auth, signinwithgithub } from "../lib/firebase";

function login() {
  const [user, loading, error] = useauthstate(auth);
  const [errormessage, seterrormessage] = usestate("");
  const onlogin = async () => {
    try {
      await signinwithgithub();
    } catch (err) {
      seterrormessage(err);
    }
  };
  return (
    <>
      <button onclick={onlogin}>login with github</button>
      {!!errormessage && <h5>{errormessage}</h5>}
    </>
  );
}

Related Query

More Query from same tag