Sergio Xalambri

I was able to build a @remix.run v3 `lazy` function to lazy load components

The lazy loaded component retains the type of the props with an additional `fallback` prop to pass the JSX to render until it's loaded

Code: github.com/sergiodxa/re...

Another @remix.run v3 example. This is how you can create custom components that allow the parent to listen to custom events.

Full code: github.com/sergiodxa/re...

The code is here if you figure know more about Legend State and can figure out how to do that

github.com/sergiodxa/re...

Here you have, I tried to use the `observe` function but I was not sure how to stop observing the observable once the component is unmounted (the signal does that), the observable onChange works perfectly for this

a man in a suit and tie says " legen wait for it dary " while another man looks on ALT: a man in a suit and tie says " legen wait for it dary " while another man looks on

What is legend state?

Another @remix.run v3 + state management library example, now Stately.ai's xstate.

Define the machine once, create the actor and subscribe to updates in the setup scope, and get a snapshot or send events on the render scope.

Full code: github.com/sergiodxa/re...

Next on @remix.run v3 + state management libraries, I tried @preactjs.com Signals core package.

This requires to run the effect to subscribe to the signal inside this.queueTask, otherwise it tries to re-render before Remix did the first render.

Full code: github.com/sergiodxa/re...

I'm trying different state management libraries, common in React, that have a JS only core and see how they integrate with @remix.run v3.

I started with Redux Toolkit. Super simple and straightforward to setup and use.

Code here: github.com/sergiodxa/re...

In June we announced an open governance model for React Router.

Today, we are excited to welcome Sergio Xalambrí and @rossipedia.com to the React Router Steering Committee!

Both have made valuable contributions to Remix and React Router over the years, and we appreciate their feedback.

React Router OAuth2 Handbook Implement secure OAuth2 authentication in React Router and Remix apps with practical patterns.

The early bird for React Router OAuth2 Handbook is over, but there’s still a launch offer available.

🎁 The Complete Package has $50 off for the first 100 buyers.
🌍 PPP pricing is now active — for the book only.

go.sergiodxa.com/S4qaycD

React Router OAuth2 Handbook Implement secure OAuth2 authentication in React Router and Remix apps with practical patterns.

Want to dive deeper into how tokens work in OAuth2 + OIDC?

Learn how to use them correctly in your Remix or React Router app.

📘 Join the waitlist for the React Router OAuth2 Handbook:
👉 go.sergiodxa.com/x4HNprT

🪪 The ID Token’s audience is the Client Application.

It contains user identity info and is meant to be consumed by the client, not by the API or auth server. That’s why its aud claim matches the client’s ID.

🔄 The Refresh Token’s audience is the Authorization Server.

It’s the only one allowed to accept it and issue a new Access Token. This keeps refresh logic centralized and secure, preventing misuse by clients or other services.

🔑 The Access Token's audience is the Resource Server.

It’s the one that will validate and accept the token to give access to protected resources. This way, only the Resource Server can rely on it—it’s not meant for the client or the auth server.

In OAuth2 + OIDC, each token has a different audience:

🔑 Access Token → Resource Server
🔄 Refresh Token → Authorization Server
🪪 ID Token → Client App

Each audience ensures the token is used by the right party and for the right purpose.

I published a Remix Auth strategy for the new @sst.dev's OpenAuth.js identity provider

github.com/sergiodxa/re...

ClientLoader doesn’t have access to context, this is a server only thing, rossipedia has been asking for an equivalent client version for a long time

Client side you can define it once in a separate file and just import it

I think @kentcdodds.com build it, he should have the code

On the Remix server we have a bot that can create threads when you add a emoji to a message and automatically name the thread like "🧵 Thread for Dominik"

I use it a lot there to create them so I don’t think about the name

Most of that was already available before the standalone app, although the app is great, would be nice to have secure notes for things like API keys

Yes, you can create a group and share passwords there, you can have many groups too

Does this works with providers like GitHub, Google, Auth0, etc? From what I saw it seems it should since they use client id and client secrets?

I like the ideas it brings, specially ship less JS, but I'm not convinced the complexity is worth it, although I never tried it since I haven't used Next.js in years

I also don't like how it was approached, I always liked that React features were first tested at Meta with their scale, but not RSC

So you can, without Vite 6, already use the actual wrangler instead of the proxy?

GitHub - edgefirst-dev/starter-worker Contribute to edgefirst-dev/starter-worker development by creating an account on GitHub.

I have my own starter github.com/edgefirst-de..., alt ought it does more than just a base point

Cloudflare, previously Pages but now switching to Workers since it has all the nice things of Pages and more features

How to properly build UIs, accessibility, feature proposals for JS

Same, I dropped CamelCase for file names after my first time someone renamed fileName to FileName and it started to cause issues on some systems but not others

From that point, everything is an enhancement, scoped styles and interactivity with JS

I think starting with HTML-only would be a great way to make it declarative and work with progressive enhancement, in the absolute worst case you get an empty element, but if the template tag loaded (because it's in the document or imported) it will still render something