How can I design typesafe callback urls?

I currently have this pattern for my auth routes:

const schema = z.object({
  callbackUrl: z.string().optional(),
});

export const Route = createFileRoute('/auth/login')({
  validateSearch: schema,
  component: () => (
    <AuthLayout>
      <LoginForm />
    </AuthLayout>
  ),
});

const schema = z.object({
  callbackUrl: z.string().optional(),
});

export const Route = createFileRoute('/auth/login')({
  validateSearch: schema,
  component: () => (
    <AuthLayout>
      <LoginForm />
    </AuthLayout>
  ),
});

I would like to make it so I can pass in valid routes. Ideally with support for path or search params so I can use it like this:

() => router.navigate({ to: '/auth/login', search: { callbackUrl: {to: 'post/$postId', params: { postId: post.id }}})

() => router.navigate({ to: '/auth/login', search: { callbackUrl: {to: 'post/$postId', params: { postId: post.id }}})

Has anybody found a way to do this? Or is there a recommended way I have been missing in the docs?

TanStack•15mo ago•

2 replies

moderate-tomato

How can I design typesafe callback urls?

I currently have this pattern for my auth routes:

const schema = z.object({
  callbackUrl: z.string().optional(),
});

export const Route = createFileRoute('/auth/login')({
  validateSearch: schema,
  component: () => (
    <AuthLayout>
      <LoginForm />
    </AuthLayout>
  ),
});

const schema = z.object({
  callbackUrl: z.string().optional(),
});

export const Route = createFileRoute('/auth/login')({
  validateSearch: schema,
  component: () => (
    <AuthLayout>
      <LoginForm />
    </AuthLayout>
  ),
});

I would like to make it so I can pass in valid routes. Ideally with support for path or search params so I can use it like this:

() => router.navigate({ to: '/auth/login', search: { callbackUrl: {to: 'post/$postId', params: { postId: post.id }}})

() => router.navigate({ to: '/auth/login', search: { callbackUrl: {to: 'post/$postId', params: { postId: post.id }}})

Has anybody found a way to do this? Or is there a recommended way I have been missing in the docs?

How can I design typesafe callback urls?

Similar Threads

How can I design typesafe callback urls?

Similar Threads

Similar Threads

Similar Threads