React Native renders previous page before going to the intended screen - reactjs

Question

New to react native so I'm not sure if this is just a glitch. My ultimate intention is to check if a user has been fully onboarded or not. If a user logs in, they're a returning user, so they shouldn't go through the onboarding screens again.
This is the flow:
New user? Landing -> Registration -> Onboarding -> Home
Existing user? Landing -> Login -> Home
In order to know if the user is a returning user, I check to see if the onboarded completed variable is in the firestore db and if it's true, the Onboarded function is set to true. This all works fine, except that before the login page switches to the home page upon login, the screen displays the onboarding page for a quick second. How do I stop this? As this isn't ideal in production.
Here is a snippet of the login
export function LoginScreen({ navigation }) {
const { onboarded, setOnboarded, login } = useContext(AuthContext);
const [isChecked, setChecked] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleLogin = async () => {
const userCred = await login(email, password);
const docRef = doc(db, "userInfo", userCred.user.uid);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
if (docSnap.get("onboardingCompleted") === true) {
setOnboarded(true);
} else {
console.log("nothing here for you");
}
} else {
console.log("nothing exists!");
}
};
Here is a snippet of my Routes page:
const Routes = () => {
const { user, setUser, onboarded, setOnboarded } = useContext(AuthContext);
const [initializing, setInitializing] = useState(true);
const StateChanged = (user) => {
setUser(user);
if (initializing) setInitializing(false);
};
useEffect(() => {
const subscriber = onAuthStateChanged(auth, StateChanged);
return subscriber; // unsubscribe on unmount
}, []);
if (initializing) return null;
const DisplayStacks = () => {
if (user && onboarded) {
// returning user or end of onboarding; working for returning user
return <AppStack />;
} else if (user) {
//after registering; clicking create account; working fine
return <RegistrationStack />;
} else {
return <AuthStack />; // before registering; working fine
}
};
return <NavigationContainer>{DisplayStacks()}</NavigationContainer>;
};
export default Routes;
Auth Context:
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [onboarded, setOnboarded] = useState(false);
return (
<AuthContext.Provider
value={{
user,
setUser,
onboarded,
setOnboarded,
login: async (email, password) => {
try {
const res = await signInWithEmailAndPassword(auth, email, password);
return res;
} catch (e) {
console.log(e);
alert("Wrong info mane!!");
}
},
register: async (email, password) => {
try {
await createUserWithEmailAndPassword(auth, email, password);
} catch (e) {
console.log(e);
alert(e);
}
},
logout: async () => {
try {
await signOut(auth);
setOnboarded(false);
} catch (e) {
console.log(e);
}
},
}}
>
{children}
</AuthContext.Provider>
);
};
User state is created in the Auth context, but it's set in the routes page

Answer 1

Centralize the authentication logic and the logic to check if an authenticated user has been onboarded into the AuthProvider component. In the stateChange callback for the onAuthStateChanged event handler do an additional isOnboarded check, and then only after both the user and isOnboarded states/checks have completed is the initializing state set false. This is obviously all not tested but I believe should get you close to the UX you desire.
AuthProvider
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [isOnboarded, setIsOnboarded] = useState(false);
const [initializing, setInitializing] = useState(true);
useEffect(() => {
const checkOnboardStatus = async (userId) => {
const docRef = doc(db, "userInfo", userId);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
return docSnap.get("onboardingCompleted");
} else {
console.log("nothing exists!");
}
};
const stateChanged = async (user) => {
setUser(user);
try {
if (user?.uid) {
// have a user, check isOnboarded status
const isOnboarded = await checkOnboardStatus();
if (!isOnboarded) {
console.log("nothing here for you");
}
setIsOnboarded(isOnboarded);
} else {
// no user, clear isOnboarded status
setIsOnboarded(false);
}
} catch(error) {
// handle any fetching/processing error if necessary
} finally {
setInitializing(false);
}
};
const subscriber = onAuthStateChanged(auth, stateChanged);
return subscriber; // unsubscribe on unmount
}, []);
const login = (email, password) => {
try {
// Set initializing true here each time a user is authenticating
// to make the UI wait for the onboarded check to complete
setInitializing(true);
return signInWithEmailAndPassword(auth, email, password);
} catch (e) {
console.log(e);
alert("Wrong info mane!!");
}
};
const register = (email, password) => {
try {
return createUserWithEmailAndPassword(auth, email, password);
} catch (e) {
console.log(e);
alert(e);
}
};
const logout = () => {
try {
return signOut(auth);
} catch (e) {
console.log(e);
}
}
return (
<AuthContext.Provider
value={{
user,
isOnboarded,
initializing,
login,
register,
logout,
}}
>
{children}
</AuthContext.Provider>
);
};
Routes
const Routes = () => {
const { user, isOnboarded, initializing } = useContext(AuthContext);
if (initializing) return null;
return (
<NavigationContainer>
{user
? isOnboarded ? <AppStack /> : <RegistrationStack />
: <AuthStack />
}
</NavigationContainer>
);
};
LoginScreen
export function LoginScreen({ navigation }) {
const { login } = useContext(AuthContext);
const [isChecked, setChecked] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleLogin = () => {
login(email, password);
};
...