Authentication State

<script setup lang="ts">
import Corbado from '@corbado/web-js'
import { inject, type Ref, watchEffect } from 'vue'

const isCorbadoLoaded = inject('isCorbadoLoaded') as Ref<boolean>

watchEffect(async () => {
    if (isCorbadoLoaded.value && Corbado.isAuthenticated) {
        const resp = await fetch('https://acme.com/api', {
            headers: {
                // access the users session token once
                Authorization: `Bearer ${Corbado.shortSession}`
            }
        })
    }
})
</script>

<template>
    <!-- Content -->
</template>

<script setup lang="ts">
import Corbado from '@corbado/web-js'
import type { SessionUser } from '@corbado/types'
import { inject, type Ref, ref, watchEffect } from 'vue'

const loggedIn = ref(false)
const user = ref<SessionUser | undefined>(undefined)
const isCorbadoLoaded = inject('isCorbadoLoaded') as Ref<boolean>

watchEffect((onCleanup) => {
    if (isCorbadoLoaded.value) {
        const authStateSubscription = Corbado.authStateChanges.subscribe(
            (next) => (loggedIn.value = next === 1)
        )
        const userSubscription = Corbado.userChanges.subscribe(
            (next) => (user.value = next)
        )
        onCleanup(() => {
            authStateSubscription.unsubscribe()
            userSubscription.unsubscribe()
        })
    }
})
</script>

<template>
    <div v-if="loggedIn">
        <h1>Welcome, {{ user?.sub }}!</h1>
    </div>
    <div v-else>
        <h1>Log in to see your profile</h1>
    </div>
</template>

<script setup>
import Corbado from '@corbado/web-js'
</script>

<template>
    <button @click="Corbado.logout()">Logout</button>
</template>