Kinde•10mo ago

Getting tokens failing when navigating to new page

I'm finding that when I navigate between pages, I'm unable to get the access token unless I refresh the page. This is how I'm trying to retrieve the token;

const client = useKindeClient();

const { data: accessToken } = await useAsyncData(async () => {
  return await client?.getToken();
});

const client = useKindeClient();

const { data: accessToken } = await useAsyncData(async () => {
  return await client?.getToken();
});

I've replicated the issue by using the starter project, and adding a nuxtlink between / and /dashboard. Once the user is logged in, if I navigate to the following /dashboard the {{ accessToken }} is empty. dashboard.vue

<template>
  <div class="container">
    <div class="card start-hero">
      <p class="text-body-2 start-hero-intro">Woohoo!</p>
      <p class="text-display-2">
        Your authentication is all sorted.
        <br />
        Build the important stuff.
      </p>
    </div>
    <section class="next-steps-section">
      <h2 class="text-heading-1">Next steps for you</h2>
    </section>
      {{ accessToken }}
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: ["auth-logged-in"],
});

const client = useKindeClient();

const { data: accessToken } = await useAsyncData(async () => {
  return await client?.getToken();
});
</script>

<template>
  <div class="container">
    <div class="card start-hero">
      <p class="text-body-2 start-hero-intro">Woohoo!</p>
      <p class="text-display-2">
        Your authentication is all sorted.
        <br />
        Build the important stuff.
      </p>
    </div>
    <section class="next-steps-section">
      <h2 class="text-heading-1">Next steps for you</h2>
    </section>
      {{ accessToken }}
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: ["auth-logged-in"],
});

const client = useKindeClient();

const { data: accessToken } = await useAsyncData(async () => {
  return await client?.getToken();
});
</script>

index.vue

<template>
  <div class="container">
    <div class="card hero">
      <p class="text-display-1 hero-title">
        Let’s start authenticating <br />
        with Kinde
      </p>
      <p class="text-body-1 hero-tagline">Configure your app</p>

      <NuxtLink
        to="https://kinde.com/docs/sdks/nuxt-sdk"
        class="btn btn-light btn-big"
        external
      >
        Go to docs
      </NuxtLink>
    </div>
    <div>
      <NuxtLink to="/dashboard"> Go to dashboard </NuxtLink>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <div class="card hero">
      <p class="text-display-1 hero-title">
        Let’s start authenticating <br />
        with Kinde
      </p>
      <p class="text-body-1 hero-tagline">Configure your app</p>

      <NuxtLink
        to="https://kinde.com/docs/sdks/nuxt-sdk"
        class="btn btn-light btn-big"
        external
      >
        Go to docs
      </NuxtLink>
    </div>
    <div>
      <NuxtLink to="/dashboard"> Go to dashboard </NuxtLink>
    </div>
  </div>
</template>

2 Replies

Daniel_Kinde•10mo ago

Thank you for the code examples, let me check this out for you Hi @bnln, Thanks for this, your message has made me realise how the documentation is not great here. Firstly as indicated in the readme, the useKindeClient() is a server side only method, so will not exist in subsequent page loads. If you want to access the token you can store in a ref, but this is not recommended. You can access the token on server api routes like this

export default defineEventHandler(async (event) => {
  console.log(await event.context.kinde.getToken())
})

export default defineEventHandler(async (event) => {
  console.log(await event.context.kinde.getToken())
})

You have raised that our documentation could be better here. Let me know if this helps or if you have any further questions.

bnlnOP•10mo ago

thanks @Daniel_Kinde - I'll try this out actually this worked really well - I ended up moving my post request, where I was using the token, on to the server side, which probably is a much better place for it. Thanks again for the help and guidance. 🙏

Gaming

Programming

Getting tokens failing when navigating to new page