'How to use SignInWithRedirect with GoogleAuthProvider?

I am creating a Vue App (Vue version 2). I am using Firebase (Web version 9) as a database and for the authentication. I am using Google as Sign in method. On desktop I want to use the signInWithPopup method, which works perfectly fine. However they recommend using signInWithRedirect on mobile. I do not understand how this second method have to be used. Here is what I have done so far :

googleSignIn: async function () {
    const auth = getAuth();
    const provider = new GoogleAuthProvider();
    try {
        let result;
        if (this.isMobile) {
            await signInWithRedirect(auth, provider);
            result = await getRedirectResult(auth);
            if (result) {
                console.log(result);
            } else {
                console.log("no result");
            }
        } else {
            result = await signInWithPopup(auth, provider);
        }
        const googleUser = result.user;
        const query = await db
           .collection("users")
           .where("email", "==", googleUser.email)
           .get();
        if (!query.empty) {
           this.$store.dispatch("setUser", googleUser.reloadUserInfo);
            this.$router.push({ path: "/dashboard" });
        } else {
            alert("impossible de se connecter");
        }
    } catch (err) {
        console.log(err);
    }
}

Here are my imports :

import { getAuth, signInWithPopup, signInWithRedirect, getRedirectResult, GoogleAuthProvider, } from "firebase/auth";


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source