Search code examples
reactjsfirebasegoogle-cloud-firestorefirebase-authenticationreact-redux-firebase

Can I structure document collection of users that sign in using google auth provider?



So I am trying to do an app using React and Firebase and by now everything was fine.
In my app there are a few options to auth a user. Google, Email and Password and also Twitter.

When a user is creating an account using his email I can easily structure how the data will look like in my firestore for that user and I do it that way:
firebase.createUser(
        { email, password },
        { 
            firstName, 
            lastName,
            emailAddress: email,
            birthDate: null,
            activeStatus: false,
            dateJoined: new Date(),
            avatarUrl: null,
            friends: [],
            posts: [
                {
                    content: "I have just joined!",
                    date: new Date(),
                    likes: [],
                    comments: [],
                    shares: []
                }
            ]
        }
    ).then(() => {
        history.push("/login")
    })

And the output in my firestore is something like that: Firestore screen - email

Now I want to structure my data of users that Signed In using Google auth the same way.
This is how my Sign In using Google looks like:

const loginWithGoogle = () => {
    firebase.login({ provider: 'google', type: 'popup' })
    .then(() => {
        localStorage.setItem('authUser', auth)
        history.push("/home")
    })
    .catch(error => {
        console.log(error.message)
    })
}

And the output in the firestore by the default looks that way: Firestore screen - google


So my question is:
How do I even try to make both auth types collections look the same way?
Should I somehow find out that the user is signing in for the first time using google provider and then try to structure that collection or is there a better approach to do that?

Thanks for all responses.

*******************************
For people who are struggling with that:
I did it thanks to @Ajordat response and this is how it looks and works perfectly fine for me:

const loginWithGoogle = () => {
    firebase.login({ provider: 'google', type: 'popup' })
    .then((user) => {
        const fullName = user.profile.displayName.split(" ")
        
        const firstName = fullName[0]
        const lastName = fullName[1]

        if (user.additionalUserInfo.isNewUser) {
            firestore.collection("users").doc(user.user.uid).set({
                ...user.profile,
                firstName,
                lastName,
                birthDate: null,
                activeStatus: false,
                dateJoined: new Date(),
                friends: [],
                posts: [
                    {
                        author: firstName + " " + lastName,
                        content: "I have just joined!",
                        date: new Date(),
                        likes: [],
                        comments: [],
                        shares: []
                    }
                ]
            })
        } else {
            console.log("user exists")
        }

        localStorage.setItem('authUser', auth)
        history.push("/home")
    })
    .catch(error => {
        console.log(error.message)
    })
}

Solution

  • You should use the method AdditionalUserInfo.isNewUser() in order to check if it's the first time a user is logging in. It will always be false except that one time, which you need to use to create the user on Firestore as you want it to be.