national-gold

Auth0 and Tanstack Start Integration

Is there any updated detailed guide to implement Auth0 with Tanstack Start. If anyone can refer to a guide or a repo much appriciated Thanks in advace

5 Replies

rising-crimson•2mo ago

I'm looking for this as well. Might have to pair with Claude.ai to help me figure it out

national-goldOP•2mo ago

Anybody has done this? I'm still looking for it

like-gold•2mo ago

what did you try so far?

criminal-purple•4w ago

Sorry to jump in folks This is what I've already tried https://tanstack.com/router/v1/docs/framework/react/how-to/setup-auth-providers#auth0-integration I've followed this guide but now struggle on how to achieve this in TanStack Start.

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      // Auth0 handles login redirects, so just trigger login
      context.auth.login()
      return
    }
  },
  component: () => <Outlet />,
})

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      // Auth0 handles login redirects, so just trigger login
      context.auth.login()
      return
    }
  },
  component: () => <Outlet />,
})

Because in TanStack Start the way it call root is kinda different with the TanStack Router "way" How can I achieve this (calling <RouterProvider router={router} context={{ auth }} /> passing the auth in context but in TanStack Start)

function InnerApp() {
  const auth = useAuth0Context()

  if (auth.isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        Loading...
      </div>
    )
  }

  return <RouterProvider router={router} context={{ auth }} />
}

function InnerApp() {
  const auth = useAuth0Context()

  if (auth.isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        Loading...
      </div>
    )
  }

  return <RouterProvider router={router} context={{ auth }} />
}

cc: @inam and @onlywei in case they've managed to find the solution (sorry for the ping!)

rising-crimson•4d ago

Alright I’ve gotten auth0 to work. The key is to use a “Regular Web App”, not a SPA and to use the openid-connect package to implement the 3 standard oidc endpoints: login, callback, logout

Gaming

Programming

Auth0 and Tanstack Start Integration

Did you find this page helpful?