Middleware auth problem

[berkaykr]

Hello, I am using your plugin for my website. I want to check the user login process in the header of a public website. But when I use middleware, when 'guest', the index section does not appear when logged in. When I do 'auth', I cannot see the index page when I am not logged in. How can I pull data with both 'auth' and 'guest'? I can't pull auth data on pages where I don't use middleware auth.

[berkaykr]

İndex Page - No Middleware : https://ibb.co/fSLR232
Detail Page - Auth Middleware : https://ibb.co/cvZCjLH

[kreejzak]

Hello, please refer to this part of documentation.

[berkaykr]

Hello, please refer to this part of documentation.

I have done all the operations here, but as I said (middleware: 'auth') I get an 'Unauthenticated' error when I do not add it.
After logging in on the main page, the login button in the header will disappear and the logout button will be replaced. I can't use middleware because the homepage is public.

[kreejzak]

This should work.
Could you please provide part of your code that is responsible for displaying the mentioned login button on the homepage?

[berkaykr]

This should work. Could you please provide part of your code that is responsible for displaying the mentioned login button on the homepage?

<script setup>
const router = useRoute();
const { $sanctumAuth } = useNuxtApp()
const loading = ref(true)
const auth = useAuth() // return auth state

onMounted(async () => {
  await $sanctumAuth.getUser() // fetch and set user data
  loading.value = false
})
const logout = async () => {
  await $sanctumAuth.logout(
      // optional callback function
      (data) => {
        console.log(data)
        router.push('/')
      }
  )
}

</script>
<template>
  <header class="header-1">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-auto">
          <div class="d-flex align-items-center justify-content-between">
            <div class="logos mr20">
              <RouterLink to="/"><img class="logo" src="~/assets/img/general/logo-dark.png" alt="Header Logo">
              </RouterLink>
            </div>
            <!-- Responsive Menu Structure-->
            <ul id="respMenu" class="ace-responsive-menu p-2 d-none d-sm-none d-lg-block" data-menu-style="horizontal">
              <li class="visible_list"><a class="list-item" href="#"><span class="title">Ana Sayfa</span></a></li>
              <li class="visible_list">
                <nuxt-link class="list-item" to="/suit">
                  <span class="title">Aktiviteler</span>
                </nuxt-link>
              </li>
              <li class="visible_list"><a class="list-item" href="#">Galeri</a></li>
              <li class="visible_list"><a class="list-item" href="#">İletişim</a></li>
            </ul>
          </div>
        </div>
        <div class="col-auto d-none d-sm-none d-lg-block">
          <div v-if="loading">Loading...</div>
          <div v-else class="d-flex align-items-center">
            <a class="login-info mx-3">Hesap Oluştur</a>

            <nuxt-link v-if="!auth.loggedIn" class="ud-btn btn-home3 login-btn" to="/auth/login">Giriş Yap</nuxt-link>

            <a  v-if="auth.loggedIn" class="ud-btn btn-home3 login-btn"  @click="logout">Çıkış
              Yap</a>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

[berkaykr]

https://www.veed.io/view/f2ae314e-5adf-43d6-b206-b3d41ab2c24e

**Here I am giving an example of the problem I am experiencing with a video.

[berkaykr]

@kreejzak Were you able to look at the problem?

[berkaykr]

@kreejzak I guess you couldn't find a solution. I will look for another way.

[berkaykr]

How should laravel sanctum output data? @kreejzak

[kreejzak]

Hi, sorry, we had a national holiday, so I was off.
Could you please provide network output after logging in?