Tanstack Start - Remove splat from sign-in page file route path

[lawandothman]

🔎 Previews:

What does this solve?

• As part of the devinxi migration I see that some docs were updated in Updated TanStack Start quickstart and examples #2315
• Those updates included moving from /sign-in/$ to /sign-in
• The new behavior of TSR considers $ a path param and defaults to undefined. So if the user is logged out and visit / the redirect sends them to /sign-in/undefined

What changed?

• Updated the sign in page file route path to be sign-in.tsx instead of sign-in.$.tsx

Checklist

• I have clicked on "Files changed" and performed a thorough self-review
• All existing checks pass

[vercel]

@lawandothman is attempting to deploy a commit to the Clerk Production Team on Vercel.

A member of the Team first needs to authorize it.

[NWylynko]

Hey @lawandothman Thank you for reporting this!

I've tested out the guide and I'm not able to re-produce the issue. I created this branch https://github.com/clerk/clerk-tanstack-react-start-quickstart/tree/sign-in-or-up following the current guide and it all seems to work as I would expect.

Would you be willing to create a repo with the issue happening?

[lawandothman]

Hey @NWylynko,

The example you linked doesn't have any server side authentication.

If you follow the guide for the server side auth here https://clerk.com/docs/quickstarts/tanstack-react-start#server-side you will see the redirect to /sign-in/undefined

P.S. the docs have been updated in that page to use /sign-in in the redirect. However, the comment above the redirect takes you to the page in question where it prompts you to create a /sign-in/$ route

	// This will error because you're redirecting to a path that doesn't exist yet
	// You can create a sign-in route to handle this
	// See https://clerk.com/docs/references/tanstack-start/custom-sign-in-or-up-page
	throw redirect({
      to: '/sign-in',
    })

[NWylynko]

Ok cool, after switching to the server-side protection, it does redirect to /sign-in/undefined and switching to sign-in.tsx the page loads as expected.

But I am thinking this is more a bug, not just wrong docs because not having the catch-all means the auth flow can fail.

But this can be mitigated by using hash routing

import { SignIn } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/sign-in')({
  component: Page,
})

function Page() {
  return <SignIn withSignUp routing="hash" />
}

[wobsoriano]

Hey @lawandothman , thanks for reporting the issue and providing a PR!

I'm actually not sure if this was the behavior pre-devinxi, but I sent a message to one of the tanstaack maintainers and asked about the undefined value. We'll get back to you shortly.

[lawandothman]

hey @wobsoriano, perfect thank you! :) I can confirm that this wasn't a thing pre-devinxi. Seems to be introduced here where the route explicitly falls back to 'undefined' if no parameter is provided (https://github.com/TanStack/router/blob/main/packages/router-core/src/path.ts#L353)

[wobsoriano]

hey @wobsoriano, perfect thank you! :) I can confirm that this wasn't a thing pre-devinxi. Seems to be introduced here where the route explicitly falls back to 'undefined' if no parameter is provided (https://github.com/TanStack/router/blob/main/packages/router-core/src/path.ts#L353)

appreciate the detective skills here!

[jjrise]

@NWylynko you are the best!

[wobsoriano]

TanStack/router#4547

[wobsoriano]

Fixed in TanStack/router#4558

thanks again @lawandothman