absent-sapphire

React Example: Start Basic Auth BUG ?

I just cloned the Tanstack Start BASIC + Auth

npx gitpick TanStack/router/tree/main/examples/react/start-basic-auth start-basic-auth
cd start-basic-auth
npm i
npm run dev

npx gitpick TanStack/router/tree/main/examples/react/start-basic-auth start-basic-auth
cd start-basic-auth
npm i
npm run dev

And normally, if I'm not authenticated, I don't have access to the /posts page. Well, I don't know by what miracle, but I can access this page as normally as possible. It shows me the login form, and a few seconds later it shows me the posts page with a bug, because when it redirects me to /posts, I don't know why, but it doesn't retrieve the data from the loader: () => fetchPosts(),

export const Route = createFileRoute("/_authed/posts")({
  loader: () => fetchPosts(),
  component: PostsComponent,
});

export const Route = createFileRoute("/_authed/posts")({
  loader: () => fetchPosts(),
  component: PostsComponent,
});

6 Replies

absent-sapphireOP•4mo ago

Any ideas?

optimistic-gold•4mo ago

you could throw a redirect in the beforeLoad, I think this would work better

throw redirect({ to: "/login" });

throw redirect({ to: "/login" });

have you tried switching from beforeLoad to loader? this does seem to fix the issue

absent-sapphireOP•4mo ago

What I have done currently to fix this is in component to check if the authentication data is available, otherwise return the <Login /> component But I will try to replace beforeLoad with loader Thanks for the reply

optimistic-gold•4mo ago

a cleaner solution would be to set

errorComponent: Login,

errorComponent: Login,

in the createFileRoute of each route you want to protect, if you wish to display the Login form on the route the user is on However, a better practice which I'm seeing is to redirect the user on /login page. Here is what I did in my _authed.tsx layout

export const Route = createFileRoute("/_app/_authed")({
  component: Outlet,
  beforeLoad: async ({ context, location }) => {
    if (context.session.accessTokenPayload === undefined) {
      throw redirect({ to: "/login", search: {
        redirect: location.href,
      } });
    }
  },
});

export const Route = createFileRoute("/_app/_authed")({
  component: Outlet,
  beforeLoad: async ({ context, location }) => {
    if (context.session.accessTokenPayload === undefined) {
      throw redirect({ to: "/login", search: {
        redirect: location.href,
      } });
    }
  },
});

the issue in the example they are providing has something to do with Error Boundaries don't know why - the defaultErrorComponent takes precedence over the layout errorComponent @Manuel Schiller any ideas? sorry for the ping

foreign-sapphire•4mo ago

possible that this is the root cause for the unexpected behaviour? https://discord.com/channels/719702312431386674/1238170697650405547/1371857152184029184

absent-sapphireOP•4mo ago

I think we are facing exactly the same problem.

Gaming

Programming

React Example: Start Basic Auth BUG ?

Did you find this page helpful?