Getting Wrong Token from vue js

[Gerarca]

Hello!!! I created a front proyect, I added ‘@auth0/auth0-vue’, through ‘npm install @auth0/auth0-vue’, I’m using vue js 3, and I configured auth0 on app.ts file:

import { createApp as createClientApp } from 'vue'

import { createHead } from '@unhead/vue'
import { InferSeoMetaPlugin } from '@unhead/addons'
import { createPinia } from 'pinia'
import { createRouter } from './router'
import VueroApp from './VueroApp.vue'
import './styles'
import { createAuth0 } from '@auth0/auth0-vue'

export type VueroAppContext = Awaited<ReturnType<typeof createApp>>
export type VueroPlugin = (vuero: VueroAppContext) => void | Promise<void>

const plugins = import.meta.glob<{ default: VueroPlugin }>('./plugins/*.ts')

// this is a helper function to define plugins with autocompletion
export function definePlugin(plugin: VueroPlugin) {
  return plugin
}

export async function createApp() {
  const app = createClientApp(VueroApp)
  const router = createRouter()

  const head = createHead({
    plugins: [InferSeoMetaPlugin()],
  })
  app.use(head)

  const pinia = createPinia()
  app.use(pinia)

  const vuero = {
    app,
    router,
    head,
    pinia,
  }

  app.provide('vuero', vuero)

  for (const path in plugins) {
    try {
      const { default: plugin } = await plugins[path]()
      await plugin(vuero)
    } catch (error) {
      console.error(`Error while loading plugin "${path}".`)
      console.error(error)
    }
  }

  app.use(vuero.router)
    .use(
      createAuth0({
        domain: import.meta.env.VITE_AUTH0_DOMAIN,
        clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
        authorizationParams: {
          redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
        },
      })
    )

  return vuero
}

so, currently I can log in, using universal login of auth0, so, I need the token user,I need to get the token of the user who logged in, for check the token on my back, so each time that I tried to validate on my back, I got “bad credentials”, so, I tried to verified the token using jwt.io and I got:

so you can see “Invalid Signature”, and on “PAYLOAD:DATA” I got nothing, so this is so strange, because I’m getting the token like this:

<script setup lang="ts">

  import { useAuth0 } from "@auth0/auth0-vue";
  import { useDarkmode } from '/@src/stores/darkmode'
  import { useUserSession } from '/@src/stores/userSession'
  import { useNotyf } from '/@src/composable/useNotyf'
  import { checkUserLogged } from '/@src/services/checkUser.service'
  import sleep from '/@src/utils/sleep'

  const isLoading = ref(false)
  const darkmode = useDarkmode()
  const router = useRouter()
  const route = useRoute()
  const notyf = useNotyf()
  const userSession = useUserSession()
  const redirect = route.query.redirect as string
  const { error, isAuthenticated, user, getAccessTokenSilently, logout   } = useAuth0()

  useHead({
    title: 'Finmap',
  })

  //await sleep(2000)

  const init = async () => {
    try{
      if(isAuthenticated.value){  

        try {
          const accessToken = await getAccessTokenSilently();
          console.log(accessToken );
          const userlogged = {
            email: user._rawValue.email,
            nickname: user._rawValue.nickname
          }
          const { data, error } = await checkUserLogged(accessToken, userlogged);

          if(data.authorize){ 
            userSession.setToken( accessToken );
            notyf.dismissAll();
            notyf.success(`Welcome back, ${user._rawValue.nickname}`);
            router.push('/app')
          }else{
              await logout({});
              router.push('/error')            
          }
        } catch (error) {
          console.log("Try catch: ", error);
          router.push('/error')
        }
      }else{ 
        router.push('/error')
      }
    } catch (error) {
    //  console.error("Error during authentication:", error);
      router.push('/');
    }
  }

  init();

</script>

you can seegetAccessTokenSilently this is a service:

export const checkUserLogged = async (accessToken: string, user: { email: string; nickname: string }): Promise<ApiCallResult> => { 
  const config: AxiosRequestConfig = {
    url: `${apiServerUrl}/checkUser`,
    method: "post",
    headers: {
      "content-type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    data: {
      email: user.email,
      username: user.nickname,
    },
  };

  const { data, error } = await callExternalApi({ config });

  return {
    data: data || null,
    error,
  };
};

so in this line:

          const accessToken = await getAccessTokenSilently();
          console.log(accessToken );

you can see that I’m getting the access token, this one, I copy and paste on jwt.io

so, why I’m getting wrong access token???

[tyf]

Hi there @Gerarca !

It looks like you’re getting back an opaque token as outlined in this post:

Why is my access token an invalid format?

Hey there @bryso ! It looks like this is an opaque token as opposed to a JWT - Adding an audience param to however you are initiating an authorize request should resolve the issue.

You’ll need to pass an audience param in order to receive a valid JWT:

auth0/auth0-vue/blob/main/EXAMPLES.md#calling-an-api

[Gerarca]

thanks @tyf

Your response help me so much, now is working!! thanks!!!

[tyf]

That’s great @Gerarca thanks for confirming