fix: use clerk frontend components

Author: carlassmann

src/app/components/status-indicator.tsx

@@ -6,7 +6,7 @@ import {
 	Check,
 	ExclamationTriangleFill,
 } from "react-bootstrap-icons"
-import { useAuth } from "@clerk/clerk-react"
+import { useAuth, SignInButton } from "@clerk/clerk-react"
 
 import { Button } from "#shared/ui/button"
 import {
@@ -23,7 +23,6 @@ import { usePWA } from "#app/lib/pwa"
 import { useOnlineStatus } from "#app/hooks/use-online-status"
 import { useIsMobile } from "#app/hooks/use-mobile"
 import { T, useIntl } from "#shared/intl/setup"
-import { getSignInUrl } from "#app/lib/auth-utils"
 import { Alert, AlertTitle } from "#shared/ui/alert"
 
 export { StatusIndicator }
@@ -177,10 +176,6 @@ function NotSignedInIndicator() {
 	let t = useIntl()
 	let isMobile = useIsMobile()
 
-	function handleSignIn() {
-		window.location.href = getSignInUrl(window.location.pathname)
-	}
-
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -219,11 +214,13 @@ function NotSignedInIndicator() {
 					<TypographyP className="leading-none">
 						<T k="status.notSignedIn.benefits" />
 					</TypographyP>
-					<DialogClose asChild>
-						<Button onClick={handleSignIn} className="h-12 w-full">
-							<T k="status.notSignedIn.signIn" />
-						</Button>
-					</DialogClose>
+					<SignInButton mode="redirect">
+						<DialogClose asChild>
+							<Button className="h-12 w-full">
+								<T k="status.notSignedIn.signIn" />
+							</Button>
+						</DialogClose>
+					</SignInButton>
 				</div>
 			</DialogContent>
 		</Dialog>

src/app/routes/_app.invite.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute, Link } from "@tanstack/react-router"
+import { SignInButton, SignUpButton } from "@clerk/clerk-react"
 import { useIsAuthenticated, useAccount } from "jazz-tools/react"
 import { Group, type ID } from "jazz-tools"
 import { T, useIntl } from "#shared/intl/setup"
@@ -16,7 +17,6 @@ import {
 	EmptyTitle,
 } from "#shared/ui/empty"
 import { Spinner } from "#shared/ui/spinner"
-import { getSignInUrl, getSignUpUrl } from "#app/lib/auth-utils"
 
 export const Route = createFileRoute("/_app/invite")({
 	loader: () => {
@@ -243,16 +243,16 @@ function SignInPromptState() {
 					</EmptyDescription>
 				</EmptyHeader>
 				<EmptyContent>
-					<Button asChild className="w-full">
-						<a href={getSignInUrl("/app/invite")}>
+					<SignInButton mode="redirect" forceRedirectUrl="/app/invite">
+						<Button className="w-full">
 							<T k="auth.signIn.button" />
-						</a>
-					</Button>
-					<Button variant="outline" asChild className="w-full">
-						<a href={getSignUpUrl("/app/invite")}>
+						</Button>
+					</SignInButton>
+					<SignUpButton mode="redirect" forceRedirectUrl="/app/invite">
+						<Button variant="outline" className="w-full">
 							<T k="auth.signUp.button" />
-						</a>
-					</Button>
+						</Button>
+					</SignUpButton>
 				</EmptyContent>
 			</Empty>
 		</div>

src/app/routes/_app.settings.tsx

@@ -1,6 +1,11 @@
 import { createFileRoute, notFound, Link } from "@tanstack/react-router"
-import { SignOutButton, useAuth, useUser } from "@clerk/clerk-react"
-import { getSignInUrl, getSignUpUrl } from "#app/lib/auth-utils"
+import {
+	SignInButton,
+	SignUpButton,
+	SignOutButton,
+	useAuth,
+	useUser,
+} from "@clerk/clerk-react"
 import { useAccount, useIsAuthenticated } from "jazz-tools/react"
 import { Button } from "#shared/ui/button"
 import { Input } from "#shared/ui/input"
@@ -239,16 +244,16 @@ function AccountSection() {
 							{t("settings.account.status.signedOut")}
 						</p>
 						<div className="mt-3 space-x-2">
-							<Button asChild disabled={!isOnline}>
-								<a href={getSignInUrl("/app/settings")}>
+							<SignInButton mode="redirect" forceRedirectUrl="/app/settings">
+								<Button disabled={!isOnline}>
 									<T k="auth.signIn.button" />
-								</a>
-							</Button>
-							<Button asChild variant="outline" disabled={!isOnline}>
-								<a href={getSignUpUrl("/app/settings")}>
+								</Button>
+							</SignInButton>
+							<SignUpButton mode="redirect" forceRedirectUrl="/app/settings">
+								<Button variant="outline" disabled={!isOnline}>
 									<T k="auth.signUp.button" />
-								</a>
-							</Button>
+								</Button>
+							</SignUpButton>
 						</div>
 					</div>
 				)}

src/app/routes/index.tsx

@@ -1,9 +1,9 @@
 import { createFileRoute, Link, redirect } from "@tanstack/react-router"
+import { SignInButton } from "@clerk/clerk-react"
 import { motion } from "motion/react"
 import { Button } from "#shared/ui/button"
 import { TypographyH1, TypographyLead } from "#shared/ui/typography"
 import { useAppStore } from "#app/lib/store"
-import { getSignInUrl } from "#app/lib/auth-utils"
 import { T } from "#shared/intl/setup"
 import {
 	SkipForwardFill,
@@ -25,11 +25,6 @@ export const Route = createFileRoute("/")({
 function WelcomeIndex() {
 	let setTourSkipped = useAppStore(state => state.setTourSkipped)
 
-	function handleSignIn() {
-		setTourSkipped(true)
-		window.location.href = getSignInUrl()
-	}
-
 	return (
 		<div
 			className="absolute inset-0"
@@ -90,14 +85,16 @@ function WelcomeIndex() {
 									<T k="welcome.takeTour" />
 								</Link>
 							</Button>
-							<Button
-								variant="secondary"
-								onClick={handleSignIn}
-								className="h-12"
-							>
-								<PersonCircle />
-								<T k="welcome.signIn" />
-							</Button>
+							<SignInButton mode="redirect" forceRedirectUrl="/app/people">
+								<Button
+									variant="secondary"
+									onClick={() => setTourSkipped(true)}
+									className="h-12"
+								>
+									<PersonCircle />
+									<T k="welcome.signIn" />
+								</Button>
+							</SignInButton>
 						</motion.div>
 					</div>
 				</div>