🟠
Before Starting, It is important to setup firebase. If you have not done it yet, do checkout the official docs for it.
Setup Auth Instance
You can access the current Auth instance in any component with the useFirebaseAuth() composable
<script setup>
const auth = useFirebaseAuth()
</script>
💡
This is necessary if you want to use the Firebase Auth API to sign in users, create users, etc
Setup Google Auth Provider
<script setup>
import { GoogleAuthProvider } from "firebase/auth";
const googleAuthProvider = new GoogleAuthProvider();
</script>
Create SignIn Popup method
<script setup>
import { signInWithPopup } from "firebase/auth";
function signinPopup() {
signInWithPopup(auth, googleAuthProvider).catch((reason) => {
console.error("Failed sign", reason);
});
}
</script>
Setup User
<script setup>
const user = useCurrentUser();
</script>
💡
You can get the current user as a reactive variable with the
useCurrentUser() composableInsert SignIn button
<button @click="signinPopup()">SignIn with Google</button>