Custom refresh token name.

[N1K1TAS95]

Describe the feature

Hi there!
I'm using nuxt-auth and refresh mode to manage JWT.
Obtaining new access and refresh token works fine, but not refreshing a token.
Nuxt-auth sends this JSON:

{
  "refreshToken":"eyJhbGc..."
}

My back-end expects a JSON with field "refresh", so an 400 error is returned.
I wish to customize the name like so:

refreshToken: {
  signInResponseRefreshTokenPointer: '/refresh',
  maxAgeInSeconds: 86400,
  fieldName: 'refresh'
}

Thanks!

Additional information

No response

[bodgerbarnett]

This is also a problem for me. I feel like the refresh provider is very nearly there now but for this one thing.

[phoenix-ru]

Do you wish to customize the Nuxt Auth response structure?
I feel that it may be easier for you to adjust your application (back-end?) than for us to maintain a dynamic name.

Let's discuss

[bodgerbarnett]

I'm using djangorestframework-simplejwt (https://github.com/jazzband/djangorestframework-simplejwt/) and the token name that's returned from there isn't configurable either so I'm a bit stuck.

I can obviously try and get that changes one way or the other but I was hoping that this library would act like the original nuxt-auth and allow it to be changed in here.

[N1K1TAS95]

@bodgerbarnett same here. I'm little bit stuck with DRF and JWT. Cannot change the name in both, front and back end. Now I'm using only Token Authentication.

[phoenix-ru]

Nuxt-auth sends this JSON

Could you please clarify, whether you mean a request going out from this call

const auth = useAuth()
auth.refresh()

Or a response from POST /api/auth/refresh?

If I understand you correctly, you have a django server which handles the JWTs and you only use nuxt-auth to talk with it? Meaning you don't have a custom Nuxt server route?

If this is the case, for now I could only suggest you to proxy requests from ~/server. I will further think how we can support your usecase without over-complicating our own codebase.

[N1K1TAS95]

@phoenix-ru I mean the call that is made by nuxt-auth to referesh the token. Both manually via auth.refresh() and automatically after a timeout.
The call is made to my API endpoint defined in nuxt.config.ts via:

endpoints: {
  ...
  refresh: {path: '/token/refresh/', method: 'post'},
  ...
},

and contains the refresh token in the body defined by field refreshToken, but my backend expects a field called refresh.

For now, I'm using the local provider from nuxt-auth.

[phoenix-ru]

@N1K1TAS95 Could you please clarify, if that is the flow you are using:

1. You use Nuxt on frontend;
2. You use PHP on backend;

Therefore your sign in endpoint /api/auth/login (or the name you gave it) is handled by PHP and interpreted by nuxt-auth correctly.

But your token refresh endpoint /api/auth/token/refresh is also handled by PHP, which can only accept body in format { refresh: string }.

Possible solution in case you can proxy requests

Using Nuxt server routes

// server/api/auth/refresh.post.ts
// Adapted from playground-refresh

import { createError, eventHandler, readBody } from 'h3'

export default eventHandler(async (event) => {
  const body = await readBody<{ refreshToken: string }>(event)

  if (!body.refreshToken) {
    throw createError({
      statusCode: 403,
      statusMessage: 'Unauthorized, no refreshToken in payload'
    })
  }

  const { accessToken, refreshToken } = await fetchTokenFromExternalBackend(body.refreshToken)

  return {
    token: {
      accessToken,
      refreshToken
    }
  }
})

Using other backend services

Create a proxy route which will translate { refreshToken: string } to the structure you need and call the needed function/endpoint.

Solution in the future

I will introduce a configuration based on json-pointer set method (https://www.npmjs.com/package/json-pointer#setobject-pointer-value):

// nuxt.config.ts
export default defineNuxtConfig({
  auth: {
    provider: {
      type: 'refresh',
      refreshToken: {
        refreshRequestTokenPointer: '/refresh'
      }
    },
  }
})