1import { createFileRoute, redirect, useRouter } from "@tanstack/react-router";
2
3import {
4 HostedPairingRouteSurface,
5 PairingPendingSurface,
6 PairingRouteSurface,
7} from "../components/auth/PairingRouteSurface";
8
9export const Route = createFileRoute("/pair")({
10 beforeLoad: async ({ context }) => {
11 const { authGateState } = context;
12 if (authGateState.status === "hosted-pairing") {
13 return {
14 authGateState,
15 };
16 }
17
18 if (authGateState.status === "authenticated" || authGateState.status === "hosted-static") {
19 throw redirect({ to: "/", replace: true });
20 }
21 return {
22 authGateState,
23 };
24 },
25 component: PairRouteView,
26 pendingComponent: PairRoutePendingView,
27});
28
29function PairRouteView() {
30 const router = useRouter();
31 const { authGateState } = Route.useRouteContext();
32
33 if (!authGateState) {
34 return null;
35 }
36
37 if (authGateState.status === "hosted-pairing") {
38 return <HostedPairingRouteSurface />;
39 }
40
41 return (
42 <PairingRouteSurface
43 auth={authGateState.auth}
44 onAuthenticated={() => {
45 // Recreate the primary connection so its WebSocket and cached scopes
46 // use the newly issued cookie after re-pairing.
47 router.history.replace("/");
48 router.history.flush();
49 window.location.reload();
50 }}
51 {...(authGateState.errorMessage ? { initialErrorMessage: authGateState.errorMessage } : {})}
52 />
53 );
54}
55
56function PairRoutePendingView() {
57 return <PairingPendingSurface />;
58}