Jolo
Jolo•8mo ago

Has anyone an idea how to avoid this Flash when checking if `Authenticated` or `Unauthenticated`?

It could be more of a React thing. My code is looking like this 
import { ConvexAuthProvider } from '@convex-dev/auth/react';
import { Authenticated, ConvexReactClient, Unauthenticated } from 'convex/react';

export function App() {
  const convex = new ConvexReactClient(import.meta.env.PUBLIC_CONVEX_URL as string);

  return (
    <ConvexAuthProvider client={convex}>
      <Unauthenticated>
        <LoginForm />
      </Unauthenticated>
      <Authenticated>
        <div>My Content</div>
      </Authenticated>
    </ConvexAuthProvider>
  );
}
import { ConvexAuthProvider } from '@convex-dev/auth/react';
import { Authenticated, ConvexReactClient, Unauthenticated } from 'convex/react';

export function App() {
  const convex = new ConvexReactClient(import.meta.env.PUBLIC_CONVEX_URL as string);

  return (
    <ConvexAuthProvider client={convex}>
      <Unauthenticated>
        <LoginForm />
      </Unauthenticated>
      <Authenticated>
        <div>My Content</div>
      </Authenticated>
    </ConvexAuthProvider>
  );
}
1 Reply
marnec
marnec•2mo ago
I can't be sure about this but by reading the current implementation of <Unauthenticated> I'd say that this is fixed 
/**
 * Renders children if the client is using authentication but is not authenticated.
 *
 * @public
 */
export function Unauthenticated({ children }: { children: ReactNode }) {
  const { isLoading, isAuthenticated } = useConvexAuth();
  if (isLoading || isAuthenticated) {
    return null;
  }
  return <>{children}</>;
}
/**
 * Renders children if the client is using authentication but is not authenticated.
 *
 * @public
 */
export function Unauthenticated({ children }: { children: ReactNode }) {
  const { isLoading, isAuthenticated } = useConvexAuth();
  if (isLoading || isAuthenticated) {
    return null;
  }
  return <>{children}</>;
}
As you can see the component returns null if it isLoading

Did you find this page helpful?