SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).

SuperTokens.com

this only check.vue,  do i have to check this in the system every time the page changes. 

```ts
<script setup lang="ts">
import * as Session from 'supertokens-web-js/recipe/session'

onMounted(async () => {
  if (await Session.doesSessionExist()) {
    // since a session already exists, we redirect the user to the HomeView.vue component
    window.location.assign('/home')
  }
})
</script>

<template>
  <IonPage>
    <IonRouterOutlet id="main" />
  </IonPage>
</template>
```

are you talking about calling `doesSessionExist` on each page load / route change?

then yes, you should check this on each page

actually, you want to instead do if session does not exist, then redirect to the `/auth` page

Well, isn't this the server that will make a request every time the page changes? Or does it make requests when time runs out?

```ts
const sessionGuard: NavigationGuard = async (
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext,
) => {
  if (await Session.doesSessionExist()) {
    // Session exists
    next('/auth')
  }
  else {
    next()
  }
}

export const onBeforeEach: NavigationGuard = async (
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext,
) => {
  await sessionGuard(to, from, next)
}

```

add vue router.ts

Is it okay to check this every time you change a page?

it reads from the browser storage. It doesn't do any API call.. so it's quite fast

```ts

export const sessionGuard: NavigationGuard = async (
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext,
) => {
  const sessionExists = await Session.doesSessionExist()
  if (sessionExists) {
    if (await checkIfCookieExists()) {
      if (to.meta.auth === 'private')
        return next()
      else
        return next('/home')
    }
    return next()
  }
  else {
    const sessionExists = await Session.doesSessionExist()
    if (to.meta.auth === 'onboard' && !sessionExists)
      return next()
    else
      return next('/auth')
  }
}
```

When I use `await Session` , I get a white screen and the next time it doesn't start, the router breaks.

it seems like the backend isn't responding

this is probably an issue with your backend

http://localhost:3001/auth/session/refresh

Not sure what may be happening. It;s difficult to debug without any logs or info about your setup