T
TanStack•2y ago
other-emerald

Implementing redirectTo during login

Hi all 👋 I'm currently trying out TanStack Router and I have in my app a fairly simple "redirectTo" search param that gets included in the URL if a user is redirected to login while accessing a page while unauthenticated. Using zod it's easy to type the search param as a string but the router then doesn't really like it as a value for the "to" fields. Does anyone here have tips/knowledge on how I should type the search param so it works as a valid path in the router? My implementation isn't set in stone and I can change it too if there's a better way to accomplish the redirect functionality with this router, right now I'm just copying over my code as it was with react router! Thanks in advance!
5 Replies
conscious-sapphire
conscious-sapphire•2y ago
export const Route = new FileRoute("/login").createRoute({
  validateSearch: z.object({
    redirect: z.string().optional(),
  }),
});
export const Route = new FileRoute("/login").createRoute({
  validateSearch: z.object({
    redirect: z.string().optional(),
  }),
});
const api = new RouteApi({ id: "/login" });

export const component = function LoginComponent() {
  const { redirect } = api.useSearch();

  return (
    <div className="flex flex-col items-center justify-center p-16 ">
      <LoginForm redirect={redirect ?? "/"} />
    </div>
  );
};
const api = new RouteApi({ id: "/login" });

export const component = function LoginComponent() {
  const { redirect } = api.useSearch();

  return (
    <div className="flex flex-col items-center justify-center p-16 ">
      <LoginForm redirect={redirect ?? "/"} />
    </div>
  );
};
then, in your form, once its submitted, you can simply have the following: 
router.history.push(redirect);
       
router.history.push(redirect);
       
export const Route = new FileRoute("/dashboard").createRoute({
  beforeLoad: ({ context, location }) => {
    if (context.session === null) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    }
  },
});
export const Route = new FileRoute("/dashboard").createRoute({
  beforeLoad: ({ context, location }) => {
    if (context.session === null) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    }
  },
});
thats how you would send the user to login, in an example route that reqiures auth.
rival-black
rival-black•2y ago
you can use z.literal("/foo") to get a typed string that you can pass as to
other-emerald
other-emeraldOP•2y ago
Yeah I was hoping I could achieve it somehow with zod (like that example) but I'm not sure how I can a) type all valid routes and b) routes with dynamic path params with it. The suggestion to use router.history.push() seems to work because it doesn't care for the type of the path other than it being a string.
rival-black
rival-black•2y ago
you can get all valid routes as types from the router, but for path params you would get /foo/$id
yappiest-sapphire
yappiest-sapphire•2y ago
I'm doing an any-cast for that since I persist the redirect location.href to local storage. https://github.com/SeanCassiere/nv-rental-clone/blob/e88cabf0f790240655fa27e99bbfe2c6883bb3ef/src/routes/_public/oidc-callback.route.tsx#L77
GitHub
nv-rental-clone/src/routes/_public/oidc-callback.route.tsx at e88ca...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.

Did you find this page helpful?