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.