How to set a google user's cookie via nuxt ssr?

435 Views Asked by At

I am trying to set a cookie if you login with google login through firebase.

It is a little hard to explain but when i log in the cookie from my site is set and from google is set when i go to an other route it is stil set i even printed the user state and saw that i got the email and uid back, but when i refresh the page i get an error: Invalid token specified: Cannot read property 'replace' of undefined

So i tried to debug it and came to the conclusion that this line: if(!req.headers.cookie) return; is the case of the error or i think so because google also sets a cookie and if i try this with an other login method i get no errors but that is because google does not set a cookie when i log in with just email and password and then my cookie gets set.

Here is my code:

My method:

sociallogin() {
            this.$store.dispatch('users/sociallogin').catch(err => {
                this.errmsg = err
            })
            this.$router.push('/')
        },

My users/sociallogin:

async sociallogin({ commit }) {
        try {
            const provider = new firebase.auth.GoogleAuthProvider();
            await firebase.auth().signInWithPopup(provider).then((result) => {
                const token = result.user.uid;
                const email  = result.user.email;
                // even if i comment the below cookie.set out google still sets a cookie
                Cookie.set('access_token', token);

                commit('SET_USER', {
                    email,
                    token
                })
            });
        } catch(err) {
            throw err
        }
    }

My cookiesetter:

import JWTDecode from 'jwt-decode';
import cookieparser from 'cookieparser';

export const actions = {
    nuxtServerInit({commit}, {req}) {
        if(process.server && process.static) return;
        // if(!req.headers.cookie) return;
        const parsed = cookieparser.parse(req.headers.cookie);
        const accessTokenCookie = parsed.access_token;

        if(!accessTokenCookie) return;
        const decoded = JWTDecode(accessTokenCookie);
        
        if(decoded) {
            commit('users/SET_USER', {
                uid: decoded.user_id,
                email: decoded.email
            })
        }
    }
}

And here is where i test if the state gets changed:

<template>
    <div>
        <h1>
            Welkom!
        </h1>
    </div>
</template>
<script>

import firebase from 'firebase'
import 'firebase/auth';
import 'firebase/database';

export default {

    mounted() {
        console.log(this.$store.state.users.user)
    }
}
</script>

How do i solve this problem? Let me know below. Edit: Here is my state:

export const mutations = {
    SET_USER: (state, account) => {
        state.user = account;
    }
}

I get account from an other action called login it uses signInWithEmailAndPassword(account.email, account.password) method

EDIT:

I fixed my problem it has some big changes. I set all the information from the user in a account section in data: () it contains: email, name, lastname the signinwithpopup function is now set in the sociallogin() function in my page if it does not error it sets the result.user.email to this.account.email then i have the dispatch function and give it the account details as second parameter and i changed my store>users>index sociallogin() to:

async registersocial({ commit }, account) {

        console.log(account)
            const token = await auth.currentUser.getIdToken();
            const { email, uid } = auth.currentUser;

            Cookie.set('access_token', token);

            commit('SET_USER', {
                email,
                uid
            });
            const users = firebase.database().ref('Gebruikers/')
                users.once('value', function(snapshot){
                    const naam = account.naam
                    const achternaam = account.achternaam
                    const email = account.email

                    var sameemail = null

                    snapshot.forEach(function(childSnapshot) {
                        const data = childSnapshot.exportVal()
                        if(data.Email == email) {
                            sameemail = email
                        }
                    })

                    if(sameemail != email) {
                        users.push({
                            Voornaam: naam,
                            Achternaam: achternaam,
                            Email: email
                        })
                    }
                })
    }

it checks if the email exists in the database if not then it will push the user with the additional information to the database and above it calls the cookie setter, this does not error and works fine.

0

There are 0 best solutions below