Create WhatsApp clone with Next.js Part 19 Firebase login and logout

Firebase Signin and Signout

In this part, we focus on creating the signin and sign out function. The page will also switch to login page if the user did not sign in yet.

Source code

Signin

go to login.js

import { auth, signInWithPopup, provider } from '../firebaseConfig';

create the login function and bind to the button

const login = () => {
const loginWithGoogle = () => {
console.log('loginWithGoogle')
signInWithPopup(auth, provider)
}
return (
<Container>
<Login>
<Image src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c543.png"
height={100}
width={100}
/>
<Button style={{ color: 'gray' }} startIcon={<GoogleIcon />}
onClick={loginWithGoogle} >Login with google</Button>
</Login>