JWT to Cookie
I am getting pretty confused on when to use something like
@solid-primitives/storage versus vinxi/http to set cookies or if I should use a middleware similar to how sveltekit implements middlewares for locals.
example I am working through is authenticating my user. I have the standard OIDC flow. user clicks the 'login with google' button and is sent to auth.mydomain.com/auth/google/authorize which generates the url sends them to google to signin. The user signs in with google and is send back to auth.mydomain.com/callback/google which validates them in my DB and generates a JWT and sends them back to the location.origin with the url containing the access_token. (example: localhost:3000/#eyJhbG....
I want to take that jwt access_token and set it as the Authorization: Bearer $AUTH_TOKEN and remove the hashed value from the url?
What is the best practice for working with this flow in solidstart? I tried using the useSession but it requires a password and I dont nececarily need the encryption since I have a helper server side called useSession that validates the cookie and if anything is wrong, deletes the cookie and returns an error36 Replies
The simplest way would be doing
setHeader("Authorization", ...) from vinxi. useSession is more of an abstraction that you probably don't needI prefer to useSession. The token will be encrypted when you saved the token into the cookie which named h3 by useSession(). I think it is safer than using cookie without encrypt.
Where would I run
setHeader at? Each request from frontend to API? I'm not using solidStart for anything outside the file based routing and I think im going to switch to ssr: false since its fully api driven.
I was browsing through the mattrax.app last night and realized I need the organization/tenant breakdown so I think im back at using localStorage to keep an array of tokens so when a user switches between organizations I can just set the cookie.Oh right you're using cookies, in that case i'd use
setCookie from vinxi on the server and not worry about it on the client
Unless you do need it on the client then don't make the cookie httpOnly
I'm curious why you'd need a different cookie value for each org?I am working on an conference/event management system. A user could be part of multiple organizations and each organization can have multiple events. In the access_token im setting the
userId and organizationId that issued the token. But if the user wants to switch organizations I fetch that by userId and assign the array of organizaions.
Now that I am thinking about it again, I'm not sure I actually need anything outside of the userIdYeah i was gonna say, for mattrax the auth token just identifies the user. Org and tenant can be figured out from the URL and from the list of orgs/tenants the user has permissions for
Yeah, I think I was trying to make it too complicated.
What is the linkage between sending the browser to its origin but appending the
#access_token=ey... to the URL? Is there a helper in vinxi for setting this as a cookie? Or is this where useLocation.hash and parsing the string would be best?Would you be doing that on the server or client?
client. Im using the SST Auth and passing the token in the URL. I started with solidstart for the client and server support but since solid just talks to the api, I think i can just set it to not server side render.
fwiw you can still use server functions and api routes without SSR, but for that case i'd just
useNavigate in the page that sst auth lands you onHow would I call a server function when using client side only? Would I need trpc?
I was planning to just call the hono api and pass the jwt for each request
You just call the server function as normal and it'll make the request to your backend, that doesn't require SSR but it does require hosting the server somewhere
Maybe that's not necessary for your case tho
I think I am missing something. Wouldnt I use fetch to get the data from the api? I dont have any of my server functions in Solid currently.
If you don't have any server functions don't worry, i'm just saying you can make them even if ssr is turned off
reading the docs I would use
useLocation to grab the access_token, vinxi's setCookie to set it on the browser, and then solid's useNavigate if the cookie isnt set or set to public?
Ah! gotcha!useLocation to grab the access token from the hash params yeah, but setCookie (and all other vinxi stuff) is server only, so you either have to set the cookie using browser APIs or make a server function/api route that sets the cookie on the server
If you want it to be httpOnly then you basically need to set it on the serverOh I see. I need a hono route to set the cookie and redirect the browser or a solidstart api route to do the same. The cookie should be httpOnly. If I go solidstart direction I keep the solidstart server around
If the cookie needs to be for the external API then yeah u probably need to do that in hono
Yes, and makes a lot of sense. when would Solidstart be used over solidjs only? when 'use server' is required/no external API or when file based routing is desired?
I thought I understood the two use cases but now I am unsure for a use case like this.
Yeah Start basically only does 3 things:
- SSR
- Server Functions
- Filesystem routing
If you don't need those then there's not much point using it
thank you! I think I need file based routing to make it a little easier to understand my app.
I guess deployment stuff could be included in there but most of that is needed bc of SSR, deploying a static Vite app is pretty easy in most places
With Mattrax you are using start just for file based and handoff to hono for the api? or are there any repos you suggest that have more production level apps versus the base todo examples?'
For most things we use trpc which communicates over a server function, Hono is just used for stuff like webhooks since it's a bit nicer than fully using api routes
I'm not sure of any other big open source Start apps atm
Any just solid apps you know of?
I have sst/console repo as a reference
There's my own app haha https://github.com/brendonovich/macrograph
GitHub
GitHub - Brendonovich/MacroGraph: Visual programming for streamers
Visual programming for streamers. Contribute to Brendonovich/MacroGraph development by creating an account on GitHub.
Might find more in #showcase
Thank you!
I think its time to revert to plain solidjs and deploy a static site. Allows me to move back to everything on Cloudflare too which was the ultimate goal while waiting for the
sst.cloudflare.SolidStart component to be released.hey you can use start to build a static site too
haha dont tell me this now!
that's what macrograph is since it's a desktop app
MacroGraph is just set to
ssr: false which essentially converts it to a static site?
But then how does the apps/web/src/api.tsx work?that disables ssr but still allows server functions (mattrax uses that), you'll want
server: { preset: "static" } to make sure it's client onlyOH! I see now! rendering is shifted from the server to client but the server can still handle stuff like API
server side render
yeah haha, very specifically rendering
web uses the vercel preset so that server functions work, desktop uses the static presetthe puzzle pieces just fell into place! this explains the hydration issues I was running into before.