bnln Posts - Answer Overflow

bnln

•Created by bnln on 3/22/2024 in #💻┃support

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>

5 replies

KKinde

•Created by bnln on 2/5/2024 in #💻┃support

Add audience using Nuxt Module

I looks like this may not be implemented, but I could very well have messed something up at my end. However, when I add an env variable NUXT_KINDE_AUDIENCE I don't see anything in my aud claims. I'm testing using the Kinde Management API, with a slightly modify version of the Nuxt Starter project.

12 replies

Gaming

Programming