Firebase cookie issue for Twitter Authentication

Question

I am currently trying to allow users to login to my Vue.js application via Twitter authentication. This is essentially the code I am using. Every time I click the Twitter sign in button I get this issue:

A cookie associated with a cross-site resource at http://google.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

Any idea as to how I can resolve this? Any help would be greatly appreciated. I feel like these two pieces of code could be the issue but I am not so sure.

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as firebase from 'firebase/app'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        user: null
    },
    getters: {
        user (state) {
            return state.user
        }
    },
    mutations: {
        SET_USER (state, payload) {
            state.user = payload
        },
        LOGOUT (state, payload) {
            state.user = null
        }
    },
    actions: {
        autoSignIn({ commit }, payload) {
            const newUser = {
                userDetails: payload.providerData
            }
            commit('SET_USER', newUser)
        },

        signIn({ commit }) {
            var provider = new firebase.auth.TwitterAuthProvider();
            firebase.auth().signInWithRedirect(provider);
            firebase.auth().getRedirectResult().then(result => {

                // The signed-in user info.
                var user = result.user;
                commit('SET_USER', user)
            }).catch(error => {
                alert(error)
                return
            })
        },
        logout({ commit }) {
            firebase.auth().signOut().then(function () {
                commit('LOGOUT')
            }).catch(function (error) {
                alert(error)
                return
            });

        }
    }
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import {store} from './vuex/store'
import * as firebase from 'firebase/app'
import Vuex from 'vuex'
import {config} from './firebaseConfig'
// Firebase App (the core Firebase SDK) is always required and must be listed first


// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics"

// Add the Firebase products that you want to use
import "firebase/auth"
import "firebase/firestore"



Vue.use(Vuex)

Vue.config.productionTip = false

/* eslint-disable no-new */

firebase.initializeApp(config)

const check = firebase.auth().onAuthStateChanged((user) => {
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    store,
    created() {
      if (user) {
        store.dispatch('autoSignIn', user)
      }
    }
  })
  check()
})

Answer 1

I had the wrong callback url in my Twitter app. Didn't realise firebase gave you a callback URL once you insert the API/secret API key in firebase.

Answer 2

This warning is coming from a google.com cookie, so it's not something you can affect. You can get more on the context of these changes over on https://web.dev/samesite-cookies-explained however there's no action you need to take. If there are any warnings associated with your domain, then you should check to see if there's an appropriate SameSite value to set on your cookie.

To explain what's happening here, even though you are using Twitter Sign-In, you probably have some kind of Google supplied third-party resource on your site. This may be retrieving the Firebase libraries, Google Analytics, or perhaps you're loading the Google Sign-In library in there too. As you have some eligible cookies in your browser, they are also being sent on these requests. They do not have a SameSite attribute added, so as a result once the SameSite=Lax by default enforcement is in place then these cookies will no longer be sent.

A good way to test this is to open up a new incognito session so you can be sure you only have new cookies set and then see if you still get the warning, it may simply be you have some older cookies in your current profile. However, the warning is just that - a warning, not an error. For compatibility with older browsers, sites and services may continue to set certain cookies without the SameSite attribute.