Azzam•3w ago

sign in page flashing after OSS-callback in android

Hi, I'm building my app with RN expo clerk and convex. After I set up clerk and convex i was trying the login page with google sign in. for some reason im having this weird bug in android where after the oss-callback made it to my app, the login page flashes for a brief moment, then a black (or white if the device default theme is white) screen flashes also briefly, then to the "/" route. this flashing doesn't happen in IOS. the layout of my home page has the following

export default function Layout(): React.ReactNode {
  const { isLoading, isAuthenticated } = useConvexAuth();
  const createUser = useMutation(api.mutations.createUser);

  useEffect(() => {
    if (isAuthenticated) {
      createUser();
    }
  }, [isAuthenticated, createUser]);

  if (isLoading) return <ActivityIndicatorScreen />;
  if (!isAuthenticated) return <Redirect href={"/sign-in"} />;

  return <Stack />;
}

export default function Layout(): React.ReactNode {
  const { isLoading, isAuthenticated } = useConvexAuth();
  const createUser = useMutation(api.mutations.createUser);

  useEffect(() => {
    if (isAuthenticated) {
      createUser();
    }
  }, [isAuthenticated, createUser]);

  if (isLoading) return <ActivityIndicatorScreen />;
  if (!isAuthenticated) return <Redirect href={"/sign-in"} />;

  return <Stack />;
}

Couple of gpts told me it's because of the if (!isAuthenticated) return <Redirect href={"/sign-in"} />; but i can't find a solution that works, specially the black flashing screen looks soooo shit (i don't have any page that has that kinda background color) the layout of the auth routes (sign in and sign up)

import { Redirect, Stack } from "expo-router";
import { useConvexAuth } from "convex/react";
import ActivityIndicatorScreen from "./sso-callback";

export default function AuthRoutesLayout(): React.ReactNode {
  const { isAuthenticated, isLoading } = useConvexAuth();

  if (isLoading) {
    return <ActivityIndicatorScreen />;
  }

  if (isAuthenticated) {
    return <Redirect href={"/"} />;
  }

  return (
    <Stack>
      <Stack.Screen
        name="sign-in"
        options={{
          title: "",
          headerTransparent: true,
        }}
      />
      <Stack.Screen
        name="sign-up"
        options={{
          title: "",
          headerTransparent: true,
        }}
      />
      <Stack.Screen name="sso-callback" options={{ headerShown: false }} />
    </Stack>
  );
}

import { Redirect, Stack } from "expo-router";
import { useConvexAuth } from "convex/react";
import ActivityIndicatorScreen from "./sso-callback";

export default function AuthRoutesLayout(): React.ReactNode {
  const { isAuthenticated, isLoading } = useConvexAuth();

  if (isLoading) {
    return <ActivityIndicatorScreen />;
  }

  if (isAuthenticated) {
    return <Redirect href={"/"} />;
  }

  return (
    <Stack>
      <Stack.Screen
        name="sign-in"
        options={{
          title: "",
          headerTransparent: true,
        }}
      />
      <Stack.Screen
        name="sign-up"
        options={{
          title: "",
          headerTransparent: true,
        }}
      />
      <Stack.Screen name="sso-callback" options={{ headerShown: false }} />
    </Stack>
  );
}

A video of what I mean https://youtube.com/shorts/u-hLebaN0qM
Thanks for your help in advance.

azzam alotaiby

YouTube

screen flashes

1 Reply

Convex Bot•3w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

sign in page flashing after OSS-callback in android

Did you find this page helpful?