authorgravatar for github@torben.idTorben Wetter <github@torben.id> 2026-08-15 14:01:08+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-15 12:01:08+00:00
loga7c5ad5db167b3a172ccb26408b0638c99b2a459
treededfb66ef1b3f21298b30028af693f914f6baa8f
parent6e6d1b49412d064ccbde7daae2e287f9b62efd7d
signature Signed by PGP key B5690EEEBB952194

fix(web): unstick /connect after in-modal sign-in by redirecting to the authorize endpoint (#5133)

5 files changed, 68 insertions(+), 11 deletions(-)

apps/web/src/cloud/connectCliAuth.test.ts+24
......@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vite-plus/test";
22
33import {
44 buildConnectCliClerkAuthorizeUrl,
5 connectCliSignInRedirectUrl,
56 hasConnectCliAuthConfig,
67 readConnectCliCallbackResult,
78} from "./connectCliAuth";
......@@ -69,6 +70,29 @@ describe("connectCliAuth", () => {
6970 ).toBeNull();
7071 });
7172
73 it("sends the sign-in redirect to the authorize endpoint, not back to /connect", () => {
74 vi.stubEnv("VITE_CLERK_PUBLISHABLE_KEY", TEST_PUBLISHABLE_KEY);
75 vi.stubEnv("VITE_CLERK_CLI_OAUTH_CLIENT_ID", "oauthapp_123");
76
77 const connectUrl = "https://app.t3.codes/connect#state=state-1&challenge=challenge-1";
78 const redirectUrl = connectCliSignInRedirectUrl(
79 { state: "state-1", challenge: "challenge-1" },
80 connectUrl,
81 );
82
83 expect(redirectUrl).not.toBe(connectUrl);
84 expect(new URL(redirectUrl).pathname).toBe("/oauth/authorize");
85 });
86
87 it("falls back to the current URL when the authorize URL cannot be built", () => {
88 vi.stubEnv("VITE_CLERK_PUBLISHABLE_KEY", TEST_PUBLISHABLE_KEY);
89
90 const connectUrl = "https://app.t3.codes/connect#state=state-1&challenge=challenge-1";
91 expect(
92 connectCliSignInRedirectUrl({ state: "state-1", challenge: "challenge-1" }, connectUrl),
93 ).toBe(connectUrl);
94 });
95
7296 it("reads the code and state Clerk echoes back to the callback", () => {
7397 expect(
7498 readConnectCliCallbackResult(
apps/web/src/cloud/connectCliAuth.ts+17
......@@ -60,6 +60,23 @@ export function buildConnectCliClerkAuthorizeUrl(request: ConnectAuthorizeReques
6060 });
6161}
6262
63/**
64 * Where Clerk sends the browser once the sign-in modal on /connect completes.
65 * It has to be the authorize endpoint rather than this page: /connect carries
66 * the CLI request in its fragment, so navigating back to the same URL is a
67 * same-document fragment navigation the browser never reloads — and Clerk
68 * treats any post-sign-in navigation as a page unload and skips the state emit
69 * that would otherwise re-render the surface, so the session never arrives
70 * either. Falls back to the current URL when the authorize URL cannot be
71 * built, which only happens on a deployment without the CLI OAuth config.
72 */
73export function connectCliSignInRedirectUrl(
74 request: ConnectAuthorizeRequest,
75 currentHref: string,
76): string {
77 return buildConnectCliClerkAuthorizeUrl(request) ?? currentHref;
78}
79
6380export function rememberConnectCliAuthState(state: string): void {
6481 try {
6582 window.sessionStorage.setItem(CONNECT_CLI_AUTH_STATE_STORAGE_KEY, state);
apps/web/src/components/clerk/authRedirect.test.ts+4-1
......@@ -5,7 +5,10 @@ import { resolveClerkSignInProps } from "./authRedirect";
55describe("resolveClerkSignInProps", () => {
66 it("returns to the current browser URL on the web", () => {
77 const href = "https://app.t3.codes/connect?state=state-1#details";
8 expect(resolveClerkSignInProps(href, false)).toEqual({ forceRedirectUrl: href });
8 expect(resolveClerkSignInProps(href, false)).toEqual({
9 forceRedirectUrl: href,
10 signUpForceRedirectUrl: href,
11 });
912 });
1013
1114 it("removes a Clerk virtual pathname and callback params while preserving the desktop route", () => {
apps/web/src/components/clerk/authRedirect.ts+3-1
......@@ -15,5 +15,7 @@ export function resolveClerkSignInProps(href: string, isElectron: boolean): Cler
1515 signUpForceRedirectUrl: redirectUrl.toString(),
1616 };
1717 }
18 return { forceRedirectUrl: href };
18 // The sign-in modal can switch to sign-up, which follows its own redirect
19 // target; without one Clerk falls back to the URL the modal was opened from.
20 return { forceRedirectUrl: href, signUpForceRedirectUrl: href };
1921}
apps/web/src/components/cloud/ConnectCliAuthSurface.tsx+20-9
......@@ -1,9 +1,10 @@
11import { useAuth, useClerk, useUser } from "@clerk/react";
22import { encodeConnectAuthCode, readConnectAuthorizeRequest } from "@t3tools/shared/connectAuth";
3import { useEffect, useRef, useState } from "react";
3import { useCallback, useEffect, useRef, useState } from "react";
44
55import {
66 buildConnectCliClerkAuthorizeUrl,
7 connectCliSignInRedirectUrl,
78 readConnectCliAuthState,
89 readConnectCliCallbackResult,
910 rememberConnectCliAuthState,
......@@ -56,6 +57,21 @@ export function ConnectCliAuthorizeSurface() {
5657 const signInOpened = useRef(false);
5758 const redirecting = useRef(false);
5859
60 const openSignIn = useCallback(() => {
61 if (!request) {
62 return;
63 }
64 // Clerk redirects to the authorize endpoint itself once sign-in completes,
65 // so the callback's state check has to be armed before handing off.
66 rememberConnectCliAuthState(request.state);
67 clerk.openSignIn(
68 resolveClerkSignInProps(
69 connectCliSignInRedirectUrl(request, window.location.href),
70 isElectron,
71 ),
72 );
73 }, [clerk, request]);
74
5975 useEffect(() => {
6076 if (!request || !isLoaded || redirecting.current) {
6177 return;
......@@ -63,7 +79,7 @@ export function ConnectCliAuthorizeSurface() {
6379 if (!isSignedIn) {
6480 if (!signInOpened.current) {
6581 signInOpened.current = true;
66 clerk.openSignIn(resolveClerkSignInProps(window.location.href, isElectron));
82 openSignIn();
6783 }
6884 return;
6985 }
......@@ -74,7 +90,7 @@ export function ConnectCliAuthorizeSurface() {
7490 redirecting.current = true;
7591 rememberConnectCliAuthState(request.state);
7692 window.location.assign(authorizeUrl);
77 }, [clerk, isLoaded, isSignedIn, request]);
93 }, [isLoaded, isSignedIn, openSignIn, request]);
7894
7995 if (!request) {
8096 return (
......@@ -101,12 +117,7 @@ export function ConnectCliAuthorizeSurface() {
101117 />
102118 {isLoaded && !isSignedIn ? (
103119 <div className="mt-6">
104 <Button
105 type="button"
106 onClick={() =>
107 clerk.openSignIn(resolveClerkSignInProps(window.location.href, isElectron))
108 }
109 >
120 <Button type="button" onClick={openSignIn}>
110121 Sign in
111122 </Button>
112123 </div>