1 reply

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 />;
}

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>
  );
}

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.

YouTubeazzam alotaiby

screen flashes

sign in page flashing after OSS-callback in android

Similar Threads

Similar Threads

Similar Threads