React Routing + Firebase + Redirect + Authentication

Hi,

What is the best approach to check if the user is loggedIn or not and make a redirect based on that.

I am using Firebase for this project.

My app doesn’t require the user to create an account in order to use it, the latter can use the app (search and find products) without being registered.

I tried to use useIonViewWillEnter lifecycle method to redirect the user but no luck. It does not redirect the user.

2020-09-08_19-021841×835 143 KB

2020-09-08_18-591309×990 138 KB

2020-09-08_18-58920×913 81.5 KB

const Login: React.FC = () => {
	const auth: Auth = useAuth();

	// const user = firebaseAuth.currentUser;
	// if (auth.loggedIn) {
	// 	return <VerifyEmail />;
	// }
	// console.log(user, 'user');

	useIonViewWillEnter(() => {
		console.log(auth, 'auth');
		// console.log(state, 'state');
		if (auth.loggedIn) {
			return <Redirect to='/my/account' />;
		}
	});

	useEffect(() => {
		console.log(auth, 'auth');
	}, [auth]);

	return (
		<IonPage>
			<IonHeader>
				<IonToolbar color='primary'>
					<BackButton />
					<IonTitle>Entrar</IonTitle>
				</IonToolbar>
			</IonHeader>
			<IonContent className='ion-padding'>
				<IonList>
					<LoginForm />
				</IonList>
				<IonItem>
					<IonText>Não tem uma conta?</IonText>
					<IonButton
						fill='clear'
						color='tertiary'
						routerLink='/register'
					>
						Cadastra-se
					</IonButton>
				</IonItem>
			</IonContent>
		</IonPage>
	);
};

I appreciate any help you guys can provide me

Thanks!

2 posts - 2 participants

Read full topic