Use sanctumClient in a server route

[ahoiroman]

Hi there,

I'd like to use a server route in order to confirm user's email. I thought that would be a clever way, because I do not have to create another page.

Unfortunately, I cannot use useSanctumClient() inside a server route. Do you know any workaround or best practice for that?

[manchenkoff]

Hey @ahoiroman, usually you do not need to use sanctum client in email verification links if you use "signed" middleware. It should look like this:

Route::get('/verify-email/{id}/{hash}', VerifyEmailController::class)
    ->middleware(['auth', 'signed', 'throttle:6,1'])
    ->name('verification.verify');

If so, you can just either proxy this endpoint to your API or use regular $fetch in your server route handler. Feel free to share more details about your use case if I didn't get it right

[ahoiroman]

For this case, you are right. But how about cases where I want to use signed routes in the future, that require auth?

[manchenkoff]

I'll try it out tonight and get back to you, but if you make a request via browser, it should not be a problem if a cookie is included

[manchenkoff]

I'm back with some findings 😄 so, if you want to use a server route and still pass everything from the client side, you can use this forwarding approach in Nuxt - Forwarding Context Headers.

Unfortunately, the Nuxt instance is not available in the server routes since it is handled by Nitro, so there is no easy way to use module composables.

I've tested that on a signed secure route covered by sanctum auth and here is what I have in my server route:

// app/server/api/link/[id].vue
export default defineEventHandler(
  async (event) => {
    const signature = getRouterParam(event, 'id') // retrieve signature from URL
    const endpoint = 'http://localhost/api/link/1' // Laravel API endpoint, TLD can be retrieved from useRuntimeConfig
    const origin = getRequestHost(event) // origin of your client (e.g. localhost:3000)

    // use event.$fetch to pass client request context to the server
    return await event.$fetch(endpoint, {
      query: {
        signature,
      },
      headers: {
        accept: 'application/json', // this is optional, by default Nuxt prevents it from being sent
        origin, // this is required for cookies session validation, can be also retrieved from useRuntimeConfig
      },
    })
  },
)