Cookie authentication flow
Hello can i get a bit of a help and explanation please? Im frontend learning backend on trpc, I have monorepo with trpc backend and next 14 frontend, I use wesockets, and my backend context accorgingly to the docs has type
CreateHTTPContextOptions | CreateWSSContextFnOptions
The problem is that in procedures I can’t use eg setHeader method from CreateHTTPContextOptions unless I type cast it so should I use a type assertion function or is there a way to infer proper type from createcontext so queries and mutation procedures have different context type than subscriptions? And when i log
Object.keys(ctx)
i get keys that are not available in CreateHTTPContextOptions
['router','createContext','middleware','req','res','path','info']
how can I get full type for that?
I want to authorize my users so in registration route i want to set the authorization cookie, to do that to do that i do res.setHeader('Set-Cookie', 'authToken=exampleToken'); and i have this header set in my network tab, but in application tab in cookies section there is no such entry, should it be there?
Then the other way round i want to authorize with my server from the frontend to do that in my trpc client in experimental_nextHttpLink i add headers function, here i have two issues one is that when i want to read my cookies from next/headers i get error that one of parents is a client component and indeed i get error from components that uses subscription inside useEffect, so how should i go about this? And the other issue is how can i authenticate in my subscriptions? Could you please give me a bit of explanation how these things should work or perhaps some mental model, i mean should i restructure it to have subscriptions in a separate client? Is it ok to have multiple clients? And how could i authorize in subscriptions? Some guidance would help me tremendously
CreateHTTPContextOptions | CreateWSSContextFnOptions
The problem is that in procedures I can’t use eg setHeader method from CreateHTTPContextOptions unless I type cast it so should I use a type assertion function or is there a way to infer proper type from createcontext so queries and mutation procedures have different context type than subscriptions? And when i log
Object.keys(ctx)
i get keys that are not available in CreateHTTPContextOptions
['router','createContext','middleware','req','res','path','info']
how can I get full type for that?
I want to authorize my users so in registration route i want to set the authorization cookie, to do that to do that i do res.setHeader('Set-Cookie', 'authToken=exampleToken'); and i have this header set in my network tab, but in application tab in cookies section there is no such entry, should it be there?
Then the other way round i want to authorize with my server from the frontend to do that in my trpc client in experimental_nextHttpLink i add headers function, here i have two issues one is that when i want to read my cookies from next/headers i get error that one of parents is a client component and indeed i get error from components that uses subscription inside useEffect, so how should i go about this? And the other issue is how can i authenticate in my subscriptions? Could you please give me a bit of explanation how these things should work or perhaps some mental model, i mean should i restructure it to have subscriptions in a separate client? Is it ok to have multiple clients? And how could i authorize in subscriptions? Some guidance would help me tremendously
Solution
Hi i would like to answer my question, the problem was that i did not pass credentials: include to the fetch options, currenty i use experimental_createTRPCNextAppDirClient with experimental_nextHttpLink, this does not allow to pass options to fetch, would you consider adding this option in future release? thanks
