I have the following react code:
export class LoginButton extends React.Component {
render() {
return (
<img id="logInButton" src="\assets\btn_google_signin_dark_focus_web@2x.png" onClick={() => { signIn() }}></img >
);
}}
ReactDOM.render(<LoginButton />, document.getElementById('logInRoot'));
And HTML code:
<body>
<div id="logInRoot"></div>
</body>
When the signIn() function is called, the google sign in UI from Firebase appears and the user logs in.
What I need to do is make the div with id "logInRoot" disappear. Then reappear if the user logs out again.
Here is my code for signIn():
export const auth = getAuth();
export function signIn() {
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
// ...
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
}
Can someone please tell me how I go about doing this?
