Skip to content

Commit 791873b

Browse files
yoen-veltclaude
yoen-velt
and
claude
committed
fix: gate Velt UI components on useVeltInitState to prevent permission_denied on first load
Previously, VeltComments, VeltCommentsSidebar, and VeltCursor mounted immediately when VeltCollaboration rendered, before auth and document setup completed. This caused Firebase permission_denied errors in iframe contexts where sessionStorage is used (fresh auth each load). This fix wraps these components in a conditional that checks useVeltInitState(), which returns true only when both user authentication AND document setup are complete. This mirrors the pattern already used in ReactFlowComponent. Changes: - Added useVeltInitState import to all 17 VeltCollaboration.tsx files - Wrapped VeltComments, VeltCommentsSidebar, VeltCursor in {veltInitialized && (...)} - VeltInitializeDocument and VeltCustomization remain outside the conditional 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 09295c5 commit 791873b

File tree

17 files changed

+271
-171
lines changed

17 files changed

+271
-171
lines changed

‎apps/react/comments/dashboard/custom/dashboard-demo/components/velt/VeltCollaboration.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import { useVeltClient, VeltComments } from "@veltdev/react";
2+
import { useVeltClient, useVeltInitState, VeltComments } from "@veltdev/react";
33
import VeltInitializeDocument from "./VeltInitializeDocument";
44
import { VeltCustomization } from "./ui-customization/VeltCustomization";
55
import { useEffect } from "react";
@@ -9,6 +9,8 @@ export function VeltCollaboration() {
99
const { isUserLoggedIn } = useAppUser();
1010
// [Velt] Get Velt client instance
1111
const { client } = useVeltClient();
12+
// [Velt] Check if Velt is fully initialized (user authenticated + document set)
13+
const veltInitialized = useVeltInitState();
1214

1315
// [Velt] Sign out user when user logs out, getting user login state from host app
1416
useEffect(() => {
@@ -20,15 +22,17 @@ export function VeltCollaboration() {
2022
return (
2123
<>
2224
<VeltInitializeDocument />
23-
<VeltComments
24-
popoverTriangleComponent={false}
25-
popoverMode={true}
26-
shadowDom={false}
27-
textMode={false}
28-
commentPinHighlighter={false}
29-
dialogOnHover={false}
30-
priority={true}
31-
/>
25+
{veltInitialized && (
26+
<VeltComments
27+
popoverTriangleComponent={false}
28+
popoverMode={true}
29+
shadowDom={false}
30+
textMode={false}
31+
commentPinHighlighter={false}
32+
dialogOnHover={false}
33+
priority={true}
34+
/>
35+
)}
3236

3337
<VeltCustomization />
3438
</>

‎apps/react/comments/dashboard/inline-comments/dashboard-inline-comments-demo/components/velt/VeltCollaboration.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import { useVeltClient, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
2+
import { useVeltClient, useVeltInitState, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
33
import VeltInitializeDocument from "./VeltInitializeDocument";
44
import { VeltCustomization } from "./ui-customization/VeltCustomization";
55
import { useEffect } from "react";
@@ -9,6 +9,8 @@ export function VeltCollaboration() {
99
const { isUserLoggedIn } = useAppUser();
1010
// [Velt] Get Velt client instance
1111
const { client } = useVeltClient();
12+
// [Velt] Check if Velt is fully initialized (user authenticated + document set)
13+
const veltInitialized = useVeltInitState();
1214

1315
// [Velt] Sign out user when user logs out, getting user login state from host app
1416
useEffect(() => {
@@ -24,16 +26,20 @@ export function VeltCollaboration() {
2426
return (
2527
<>
2628
<VeltInitializeDocument />
27-
<VeltComments
28-
popoverTriangleComponent={false}
29-
popoverMode={true}
30-
shadowDom={false}
31-
textMode={false}
32-
commentPinHighlighter={false}
33-
dialogOnHover={false}
34-
groupMatchedComments={true}
35-
/>
36-
<VeltCommentsSidebar shadowDom={false} groupConfig={groupConfig} pageMode={true} sortData="asc" />
29+
{veltInitialized && (
30+
<>
31+
<VeltComments
32+
popoverTriangleComponent={false}
33+
popoverMode={true}
34+
shadowDom={false}
35+
textMode={false}
36+
commentPinHighlighter={false}
37+
dialogOnHover={false}
38+
groupMatchedComments={true}
39+
/>
40+
<VeltCommentsSidebar shadowDom={false} groupConfig={groupConfig} pageMode={true} sortData="asc" />
41+
</>
42+
)}
3743

3844
<VeltCustomization />
3945
</>

‎apps/react/comments/dashboard/self-hosting/dashboard-mongo-db-demo/components/velt/VeltCollaboration.tsx‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22
import { useAppUser } from "@/app/userAuth/AppUserContext";
3-
import { useVeltClient, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
3+
import { useVeltClient, useVeltInitState, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
44
import { useEffect } from "react";
55
import VeltInitializeDocument from "./VeltInitializeDocument";
66
import { VeltCustomization } from "./ui-customization/VeltCustomization";
@@ -10,6 +10,8 @@ export function VeltCollaboration() {
1010
const { isUserLoggedIn } = useAppUser();
1111
// [Velt] Get Velt client instance
1212
const { client } = useVeltClient();
13+
// [Velt] Check if Velt is fully initialized (user authenticated + document set)
14+
const veltInitialized = useVeltInitState();
1315

1416
const selectedJob = useSelectedJob();
1517

@@ -27,25 +29,29 @@ export function VeltCollaboration() {
2729
return (
2830
<>
2931
<VeltInitializeDocument />
30-
<VeltComments
31-
popoverTriangleComponent={false}
32-
popoverMode={true}
33-
shadowDom={false}
34-
textMode={false}
35-
commentPinHighlighter={false}
36-
dialogOnHover={false}
37-
groupMatchedComments={true}
38-
// readOnly={true} // Uncomment this to make the comments read-only for certain users
39-
/>
40-
<VeltCommentsSidebar
41-
context={{ jobId: selectedJob?.id, jobName: selectedJob?.jobName, jobStatus: selectedJob?.status, commentType: 'jobLevel' }}
42-
shadowDom={false}
43-
groupConfig={groupConfig}
44-
pageMode={true}
45-
sortData="asc"
46-
focusedThreadMode={true}
47-
// readOnly={true}
48-
/>
32+
{veltInitialized && (
33+
<>
34+
<VeltComments
35+
popoverTriangleComponent={false}
36+
popoverMode={true}
37+
shadowDom={false}
38+
textMode={false}
39+
commentPinHighlighter={false}
40+
dialogOnHover={false}
41+
groupMatchedComments={true}
42+
// readOnly={true} // Uncomment this to make the comments read-only for certain users
43+
/>
44+
<VeltCommentsSidebar
45+
context={{ jobId: selectedJob?.id, jobName: selectedJob?.jobName, jobStatus: selectedJob?.status, commentType: 'jobLevel' }}
46+
shadowDom={false}
47+
groupConfig={groupConfig}
48+
pageMode={true}
49+
sortData="asc"
50+
focusedThreadMode={true}
51+
// readOnly={true}
52+
/>
53+
</>
54+
)}
4955

5056
<VeltCustomization />
5157
</>

‎apps/react/comments/dashboard/self-hosting/dashboard-postgres-demo/components/velt/VeltCollaboration.tsx‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22
import { useAppUser } from "@/app/userAuth/AppUserContext";
3-
import { useVeltClient, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
3+
import { useVeltClient, useVeltInitState, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
44
import { useEffect } from "react";
55
import VeltInitializeDocument from "./VeltInitializeDocument";
66
import { VeltCustomization } from "./ui-customization/VeltCustomization";
@@ -10,6 +10,8 @@ export function VeltCollaboration() {
1010
const { isUserLoggedIn } = useAppUser();
1111
// [Velt] Get Velt client instance
1212
const { client } = useVeltClient();
13+
// [Velt] Check if Velt is fully initialized (user authenticated + document set)
14+
const veltInitialized = useVeltInitState();
1315

1416
const selectedJob = useSelectedJob();
1517

@@ -27,25 +29,29 @@ export function VeltCollaboration() {
2729
return (
2830
<>
2931
<VeltInitializeDocument />
30-
<VeltComments
31-
popoverTriangleComponent={false}
32-
popoverMode={true}
33-
shadowDom={false}
34-
textMode={false}
35-
commentPinHighlighter={false}
36-
dialogOnHover={false}
37-
groupMatchedComments={true}
38-
// readOnly={true} // Uncomment this to make the comments read-only for certain users
39-
/>
40-
<VeltCommentsSidebar
41-
context={{ jobId: selectedJob?.id, jobName: selectedJob?.jobName, jobStatus: selectedJob?.status, commentType: 'jobLevel' }}
42-
shadowDom={false}
43-
groupConfig={groupConfig}
44-
pageMode={true}
45-
sortData="asc"
46-
focusedThreadMode={true}
47-
// readOnly={true}
48-
/>
32+
{veltInitialized && (
33+
<>
34+
<VeltComments
35+
popoverTriangleComponent={false}
36+
popoverMode={true}
37+
shadowDom={false}
38+
textMode={false}
39+
commentPinHighlighter={false}
40+
dialogOnHover={false}
41+
groupMatchedComments={true}
42+
// readOnly={true} // Uncomment this to make the comments read-only for certain users
43+
/>
44+
<VeltCommentsSidebar
45+
context={{ jobId: selectedJob?.id, jobName: selectedJob?.jobName, jobStatus: selectedJob?.status, commentType: 'jobLevel' }}
46+
shadowDom={false}
47+
groupConfig={groupConfig}
48+
pageMode={true}
49+
sortData="asc"
50+
focusedThreadMode={true}
51+
// readOnly={true}
52+
/>
53+
</>
54+
)}
4955

5056
<VeltCustomization />
5157
</>

‎apps/react/comments/tables/ag-grid/comment-aggregation/components/velt/VeltCollaboration.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import { useVeltClient, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
2+
import { useVeltClient, useVeltInitState, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
33
import VeltInitializeDocument from "./VeltInitializeDocument";
44
import { VeltCustomization } from "./ui-customization/VeltCustomization";
55
import { useEffect } from "react";
@@ -9,6 +9,8 @@ export function VeltCollaboration() {
99
const { isUserLoggedIn } = useAppUser();
1010
// [Velt] Get Velt client instance
1111
const { client } = useVeltClient();
12+
// [Velt] Check if Velt is fully initialized (user authenticated + document set)
13+
const veltInitialized = useVeltInitState();
1214

1315
// [Velt] Sign out user when user logs out, getting user login state from host app
1416
useEffect(() => {
@@ -24,17 +26,21 @@ export function VeltCollaboration() {
2426
return (
2527
<>
2628
<VeltInitializeDocument />
27-
<VeltComments
28-
popoverTriangleComponent={false}
29-
popoverMode={true}
30-
shadowDom={false}
31-
textMode={false}
32-
commentPinHighlighter={false}
33-
dialogOnHover={false}
34-
groupMatchedComments={true}
35-
priority={true}
36-
/>
37-
<VeltCommentsSidebar groupConfig={groupConfig} />
29+
{veltInitialized && (
30+
<>
31+
<VeltComments
32+
popoverTriangleComponent={false}
33+
popoverMode={true}
34+
shadowDom={false}
35+
textMode={false}
36+
commentPinHighlighter={false}
37+
dialogOnHover={false}
38+
groupMatchedComments={true}
39+
priority={true}
40+
/>
41+
<VeltCommentsSidebar groupConfig={groupConfig} />
42+
</>
43+
)}
3844
<VeltCustomization />
3945
</>
4046
);

‎apps/react/comments/tables/ag-grid/multiple-tools/components/velt/VeltCollaboration.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import { useVeltClient, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
2+
import { useVeltClient, useVeltInitState, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
33
import VeltInitializeDocument from "./VeltInitializeDocument";
44
import { VeltCustomization } from "./ui-customization/VeltCustomization";
55
import { useEffect } from "react";
@@ -8,6 +8,8 @@ import { useAppUser } from "@/app/userAuth/AppUserContext";
88
export function VeltCollaboration() {
99
const { isUserLoggedIn } = useAppUser();
1010
const { client } = useVeltClient();
11+
// [Velt] Check if Velt is fully initialized (user authenticated + document set)
12+
const veltInitialized = useVeltInitState();
1113

1214
// [Velt] Sign out user when user logs out, getting user login state from host app
1315
useEffect(() => {
@@ -23,14 +25,18 @@ export function VeltCollaboration() {
2325
return (
2426
<>
2527
<VeltInitializeDocument />
26-
<VeltComments
27-
popoverMode={true}
28-
shadowDom={false}
29-
textMode={false}
30-
commentPinHighlighter={false}
31-
dialogOnHover={false}
32-
/>
33-
<VeltCommentsSidebar groupConfig={groupConfig} />
28+
{veltInitialized && (
29+
<>
30+
<VeltComments
31+
popoverMode={true}
32+
shadowDom={false}
33+
textMode={false}
34+
commentPinHighlighter={false}
35+
dialogOnHover={false}
36+
/>
37+
<VeltCommentsSidebar groupConfig={groupConfig} />
38+
</>
39+
)}
3440
<VeltCustomization />
3541
</>
3642
);

‎apps/react/comments/tables/ag-grid/single-tool/components/velt/VeltCollaboration.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import { useVeltClient, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
2+
import { useVeltClient, useVeltInitState, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
33
import VeltInitializeDocument from "./VeltInitializeDocument";
44
import { VeltCustomization } from "./ui-customization/VeltCustomization";
55
import { useEffect } from "react";
@@ -8,6 +8,8 @@ import { useAppUser } from "@/app/userAuth/AppUserContext";
88
export function VeltCollaboration() {
99
const { isUserLoggedIn } = useAppUser();
1010
const { client } = useVeltClient();
11+
// [Velt] Check if Velt is fully initialized (user authenticated + document set)
12+
const veltInitialized = useVeltInitState();
1113

1214
// [Velt] Sign out user when user logs out, getting user login state from host app
1315
useEffect(() => {
@@ -23,16 +25,20 @@ export function VeltCollaboration() {
2325
return (
2426
<>
2527
<VeltInitializeDocument />
26-
{/* [Velt] Enable comments in popover mode */}
27-
<VeltComments
28-
popoverMode={true}
29-
shadowDom={false}
30-
textMode={false}
31-
commentPinHighlighter={false}
32-
dialogOnHover={false}
33-
/>
34-
{/* [Velt] Comments sidebar panel */}
35-
<VeltCommentsSidebar groupConfig={groupConfig} />
28+
{veltInitialized && (
29+
<>
30+
{/* [Velt] Enable comments in popover mode */}
31+
<VeltComments
32+
popoverMode={true}
33+
shadowDom={false}
34+
textMode={false}
35+
commentPinHighlighter={false}
36+
dialogOnHover={false}
37+
/>
38+
{/* [Velt] Comments sidebar panel */}
39+
<VeltCommentsSidebar groupConfig={groupConfig} />
40+
</>
41+
)}
3642
<VeltCustomization />
3743
</>
3844
);

0 commit comments

Comments
 (0)