#How to Prevent Loaders from Running Before Authentication in React Router with Amplify UI?

1 messages · Page 1 of 1 (latest)

fathom violet
#

Hello,

I’ve been using React Router v7 in Framework mode after switching from Remix v2 for the past few months, and I’m really impressed with the Loaders, Component, and Action mechanism.

Thanks for an amazing framework!

However, I’m struggling to implement authentication using the Amplify UI Auth Component. Since the Amplify UI Auth Component provides managed authentication behavior, I expected it to handle authentication seamlessly. However, it seems that Loaders still run on every request, even when wrapped with the Amplify UI Auth Component.

From what I’ve researched, the common approach to authentication in React Router is to create a custom authentication screen and use Loaders to protect routes.

Is it possible to use the authentication screen and behavior provided by the Amplify UI Auth Component while ensuring that Loaders execute only after authentication is confirmed?

If anyone has insights, I’d really appreciate your help!

Thank you.

spiral blade
#

Loaders always run first

#

You need to move authentication to the loaders