feat: hook syncUser to login callback

Co-authored-by: Ona <no-reply@ona.com>

src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
+import { Route as LoginCallbackRouteImport } from './routes/login_.callback'
 import { Route as AuthenticatedSidebarLayoutRouteImport } from './routes/_authenticated/_sidebar-layout'
 import { Route as AuthenticatedSidebarLayoutFilesRouteImport } from './routes/_authenticated/_sidebar-layout/files'
 
@@ -29,6 +30,11 @@ const AuthenticatedIndexRoute = AuthenticatedIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AuthenticatedRoute,
 } as any)
+const LoginCallbackRoute = LoginCallbackRouteImport.update({
+  id: '/login_/callback',
+  path: '/login/callback',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthenticatedSidebarLayoutRoute =
   AuthenticatedSidebarLayoutRouteImport.update({
     id: '/_sidebar-layout',
@@ -43,11 +49,13 @@ const AuthenticatedSidebarLayoutFilesRoute =
 
 export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
+  '/login/callback': typeof LoginCallbackRoute
   '/': typeof AuthenticatedIndexRoute
   '/files': typeof AuthenticatedSidebarLayoutFilesRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LoginRoute
+  '/login/callback': typeof LoginCallbackRoute
   '/': typeof AuthenticatedIndexRoute
   '/files': typeof AuthenticatedSidebarLayoutFilesRoute
 }
@@ -56,19 +64,21 @@ export interface FileRoutesById {
   '/_authenticated': typeof AuthenticatedRouteWithChildren
   '/login': typeof LoginRoute
   '/_authenticated/_sidebar-layout': typeof AuthenticatedSidebarLayoutRouteWithChildren
+  '/login_/callback': typeof LoginCallbackRoute
   '/_authenticated/': typeof AuthenticatedIndexRoute
   '/_authenticated/_sidebar-layout/files': typeof AuthenticatedSidebarLayoutFilesRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/login' | '/' | '/files'
+  fullPaths: '/login' | '/login/callback' | '/' | '/files'
   fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/' | '/files'
+  to: '/login' | '/login/callback' | '/' | '/files'
   id:
     | '__root__'
     | '/_authenticated'
     | '/login'
     | '/_authenticated/_sidebar-layout'
+    | '/login_/callback'
     | '/_authenticated/'
     | '/_authenticated/_sidebar-layout/files'
   fileRoutesById: FileRoutesById
@@ -76,6 +86,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
   LoginRoute: typeof LoginRoute
+  LoginCallbackRoute: typeof LoginCallbackRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -101,6 +112,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedIndexRouteImport
       parentRoute: typeof AuthenticatedRoute
     }
+    '/login_/callback': {
+      id: '/login_/callback'
+      path: '/login/callback'
+      fullPath: '/login/callback'
+      preLoaderRoute: typeof LoginCallbackRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_authenticated/_sidebar-layout': {
       id: '/_authenticated/_sidebar-layout'
       path: ''
@@ -149,6 +167,7 @@ const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   AuthenticatedRoute: AuthenticatedRouteWithChildren,
   LoginRoute: LoginRoute,
+  LoginCallbackRoute: LoginCallbackRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/routes/__root.tsx

@@ -2,7 +2,6 @@ import "@/styles/globals.css"
 import { ConvexProviderWithAuthKit } from "@convex-dev/workos"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { createRootRoute, Outlet } from "@tanstack/react-router"
-import { TanStackRouterDevtools } from "@tanstack/router-devtools"
 import { AuthKitProvider, useAuth } from "@workos-inc/authkit-react"
 import { ConvexReactClient } from "convex/react"
 import { toast } from "sonner"

src/routes/_authenticated/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Navigate } from "@tanstack/react-router"
 
-export const Route = createFileRoute("/_authenticated")({
+export const Route = createFileRoute("/_authenticated/")({
 	component: RouteComponent,
 })
 

src/routes/login.tsx

@@ -9,5 +9,9 @@ export const Route = createFileRoute("/login")({
 function RouteComponent() {
 	const { signIn } = useAuth()
 
-	return <Button onClick={() => signIn()}>Login</Button>
+	return (
+		<div className="flex h-screen w-full items-center justify-center">
+			<Button onClick={() => signIn()}>Login</Button>
+		</div>
+	)
 }

src/routes/login_.callback.tsx

@@ -0,0 +1,45 @@
+import { api } from "@convex/_generated/api"
+import { useMutation } from "@tanstack/react-query"
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
+import { useConvexAuth, useMutation as useConvexMutation } from "convex/react"
+import { useEffect } from "react"
+import { LoadingSpinner } from "@/components/ui/loading-spinner"
+
+export const Route = createFileRoute("/login_/callback")({
+	component: RouteComponent,
+})
+
+function RouteComponent() {
+	const { isLoading: isLoadingConvexAuth, isAuthenticated } = useConvexAuth()
+	const { mutate: syncUser, isPending: isSyncingUser } = useMutation({
+		mutationFn: useConvexMutation(api.users.syncUser),
+		retry: true,
+	})
+	const navigate = useNavigate()
+
+	useEffect(() => {
+		if (!isLoadingConvexAuth && isAuthenticated && !isSyncingUser) {
+			console.log({ isLoadingConvexAuth, isAuthenticated, isSyncingUser })
+			syncUser(undefined, {
+				onSuccess: () => {
+					navigate({
+						to: "/",
+						replace: true,
+					})
+				},
+			})
+		}
+	}, [
+		isLoadingConvexAuth,
+		isAuthenticated,
+		syncUser,
+		isSyncingUser,
+		navigate,
+	])
+
+	return (
+		<div className="flex h-screen w-full items-center justify-center">
+			<LoadingSpinner className="size-10" />
+		</div>
+	)
+}