nuxt-auth cannot get token data using refresh provider

40 Views Asked by At

I have some trouble with login functionality in Nuxt 3.

I have installed a package @sidebase/nuxt-auth for user Authentication. These are my configurations in file nuxt.config.ts

auth: {
    globalAppMiddleware: true,
    baseURL: backendUrl,
    provider: {
      type: "refresh",
      endpoints: {
        signIn: { path: "/login/", method: "post" },
        signOut: { path: "/logout/", method: "get" },
        signUp: { path: "/register/", method: "post" },
        refresh: { path: "/refresh/", method: "post" },
        getSession: false,
      },
      pages: {
        login: "/login",
        register: "/register",
      },
      token: {
        signInResponseTokenPointer: "/access",
      },
      refreshToken: { signInResponseRefreshTokenPointer: "/refresh" },
    },

    enableSessionRefreshPeriodically: 5000,
    enableSessionRefreshOnWindowFocus: true,
    globalMiddlewareOptions: {
      allow404WithoutAuth: true, // Defines if the 404 page will be accessible while unauthenticated
      addDefaultCallbackUrl: "/", // Where authenticated user will be redirected to by default
    },
  },

This is the code for getting my token in file: server/api/auth/token.get.ts

import { getToken } from "#auth";
export default eventHandler(async (event) => {
  const token = await getToken({ event, cookieName: "auth" });
  console.log(token);
  return token || "no token present";
});

page code for printing the token:

<script setup lang="ts">
definePageMeta({
    auth : false,
})
const headers = useRequestHeaders(['cookie'])
const {data : token} = await useFetch('/api/auth/token', {headers});
</script>
<template>
    <pre>
        {{ token }}
    </pre>
</template>

My logic for logging in the user:

definePageMeta({
  layout: "front",
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: '/token',
  }
});

const loginWithCredentials = async () => {
    try {
      let res = await signIn(
        { ...formData },
        { callbackUrl: '/token' } // Where the user will be redirected after a successiful login
      )
      console.log(res);
    } catch (error) {
      console.log("error", error);
    } 
}

I have to mention that I am using a custom backend to return JSON data with JWT token properties "access" and "refresh".

So, If I send a post request to an url backEndUrl/login/ with correct user credentials I get a response like this:

JsonResponse

I have tried to put the access token to https://jwt.io/ which got me this result:

JWTResponse

I am expecting the getToken() to return me the payload data, however it returns null.

What could be the problem?

0

There are 0 best solutions below