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 (
19 authGateState.status === "authenticated" ||
20 authGateState.status === "hosted-static" ||
21 authGateState.status === "guest"
22 ) {
23 throw redirect({ to: "/", replace: true });
24 }
25 return {
26 authGateState,
27 };
28 },
29 component: PairRouteView,
30 pendingComponent: PairRoutePendingView,
31});
32
33function PairRouteView() {
34 const router = useRouter();
35 const { authGateState } = Route.useRouteContext();
36
37 if (!authGateState) {
38 return null;
39 }
40
41 if (authGateState.status === "hosted-pairing") {
42 return <HostedPairingRouteSurface />;
43 }
44
45 return (
46 <PairingRouteSurface
47 auth={authGateState.auth}
48 onAuthenticated={() => {
49 // Recreate the connection so WebSocket and cached scopes use the new pairing cookie.
50 router.history.replace("/");
51 router.history.flush();
52 window.location.reload();
53 }}
54 {...(authGateState.errorMessage ? { initialErrorMessage: authGateState.errorMessage } : {})}
55 />
56 );
57}
58
59function PairRoutePendingView() {
60 return <PairingPendingSurface />;
61}