45
packages/web/src/routes/login_.callback.tsx
Normal file
45
packages/web/src/routes/login_.callback.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
Reference in New Issue
Block a user