[QUESTION] Custom Provider Session unauthorized

[akselele]

Environment

• Operating System: Windows_NT
• Node Version: v18.17.0
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.9.0
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, build, shadcn, auth
• Runtime Modules: @nuxtjs/[email protected], [email protected], @sidebase/[email protected]
• Build Modules: -

Reproduction

This is more of a question rather than a bug (yet), so I'll omit the reproduction for now.

Describe the bug

Hi, I'm using Nuxt 3, tRPC, Prisma and Nuxt-Auth with a custom OAuth provider. When using the default providers, it's stated in the docs that we need to use the <provider>.default({...}), but what about custom providers? The comment states
// @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point and I think I'm getting a session SSR issue. I can log in and log out, but with an authMiddleware in tRPC like following

const authMiddleware = t.middleware(({ ctx, next }) => {
  if (!ctx.session?.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user }
    }
  });
});

For every call to a authMiddleware procedure, I get an UNAUTHORIZED, even when I am logged in and have the correct tokens in my session / cookie.
But here is the weird thing: whenever editing anything on the client-side of the app and hot reload, those auth protected calls suddenly work (only one call though). This is why I think this issue is related to the <provider>.default({...}) part.

I'm not sure whether this is a bug (not even this package, might also be tRPC-Nuxt) or a mistake on my part. If this is a bug I will investigate further and file a proper bug report.

Additional context

server/api/auth/[...].ts

export default NuxtAuthHandler({
  providers: [
    {
      id: 'third-party-provider',
      name: 'third-party-provider',
      type: 'oauth',
      authorization: {
        url: `${env.OAUTHURL}/OAuth`,
        params: {
          client_id: env.ID,
          client_secret: env.SECRET,
          scope: 'userInfo groupInfo',
          response_type: 'code',
          redirect_uri: `${env.NEXTAUTH_URL}/api/auth/callback/provider`,
        },
      },
      token: {
        url: `${env.URL}/OAuth/index/token`,
        params: {
          client_id: env.ID,
          client_secret: env.secret,
          grant_type: 'client_credentials',
          scope: 'userInfo groupInfo',
        },
      },
      userinfo: {
        url: `${env.URL}/Api/V1/userInfo`,
      },
      clientId: env.ID,
      clientSecret: env.SECRET,
      profile: (profile, _tokens) => {
        return {
          id: profile.userID,
          leerkrachtId: profile.leerkrachtId,
          name: profile.fullname,
          username: profile.username,
          role: profile.role,
        }
      }
    }
  ],
  logger: {
    error(code, metadata) {
      console.error(code, metadata)
    },
  },
  adapter: PrismaAdapter(prisma),
})

No response

Logs

No response

[akselele]

Seems like I had a wrong configuration for my tRPC Plugin. I was importing httpBatchLink from @trpc/client instead of from trpc-nuxt/client. But my question about custom providers still stands because it was quite unclear from the docs.