Supertokens Session.signOut method not working in Vue

Question

I'm using VueJS and the code from this example https://supertokens.com/docs/thirdpartyemailpassword/pre-built-ui/sign-out

When I click the logout button, the page refreshes but I can still see the userInfo data (the id of the user's session). When I refresh the data is also still there. Also in the user management dashboard of my API, the user has ongoing sessions, so it's clear that the button action does not work.

I can see in the Network tab that the following API route is hit: http://localhost:3001/auth/signout I suppose this is included in the NodeJS middleware from Supertokens.

<template>
    <div>
        {{ userInfo }}

        <button @click="logout">Logout</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Session from "supertokens-web-js/recipe/session";
import { onMounted } from "vue";
import { useRouter } from 'vue-router';

const router = useRouter()

const userInfo = ref('')

const checkSession = async () => {
    if (await Session.doesSessionExist()) {
        userInfo.value = await Session.getUserId();
    }
}

const logout = async () => {
    await Session.signOut();
    window.location.reload();
}

onMounted(() => {
    checkSession()
})
</script>

Does anyone know if I'm missing something?

Answer 1

The issue was that the browser was not saving the session cookies on sign in since it was a cross domain request (website was on localhost, api on 127.0.0.1), and cross domain requests require https API for browsers to save cookies.