From b6746183a673e1d8f2c035ac1e5f39881dafa5ea Mon Sep 17 00:00:00 2001 From: Mallepally Lokeshwar Reddy Date: Thu, 30 May 2024 01:43:46 +0530 Subject: [PATCH] fix: Improve signup process with email verification and page redirection --- src/components/AuthPage/Login/ViewAlerts.jsx | 28 ++++++++--- src/components/AuthPage/Login/index.jsx | 15 +++++- src/components/AuthPage/SignUp/signupForm.jsx | 27 ++++++++--- src/store/actions/authActions.js | 46 +++++++++++++++---- 4 files changed, 90 insertions(+), 26 deletions(-) diff --git a/src/components/AuthPage/Login/ViewAlerts.jsx b/src/components/AuthPage/Login/ViewAlerts.jsx index 39e084f5..1a0af879 100644 --- a/src/components/AuthPage/Login/ViewAlerts.jsx +++ b/src/components/AuthPage/Login/ViewAlerts.jsx @@ -5,6 +5,7 @@ import CloseIcon from "@mui/icons-material/Close"; import Alert from "@mui/lab/Alert"; import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { useHistory } from "react-router-dom"; import { resendVerifyEmail } from "../../../store/actions"; const AlertComp = ({ description, type }) => { @@ -33,7 +34,8 @@ const AlertComp = ({ description, type }) => { ); }; -const ViewAlerts = ({ error }) => { +const ViewAlerts = ({ error, successMessage }) => { + const history = useHistory(); const [resendLoading, setResendLoading] = useState(false); const [resendError, setResendError] = useState(""); const [success, setSuccess] = useState(false); @@ -53,6 +55,23 @@ const ViewAlerts = ({ error }) => { } }, [errorProp, loadingProp]); + useEffect(() => { + if (successMessage) { + // If success message is received, set success state to true + setSuccess(true); + + // Set a timer to clear the success message after 5 seconds + const timer = setTimeout(() => { + setSuccess(false); + // Reset location state + history.replace({ ...history.location, state: { successMessage: "" } }); + }, 5000); + + // Return a cleanup function to clear the timer when the component unmounts or successMessage changes + return () => clearTimeout(timer); + } + }, [successMessage, history]); + return ( <> {error && error !== "email-unverified" && !resendError && ( @@ -83,12 +102,7 @@ const ViewAlerts = ({ error }) => { )} - {success && ( - - )} + {success && } ); }; diff --git a/src/components/AuthPage/Login/index.jsx b/src/components/AuthPage/Login/index.jsx index edd67f72..2852c97c 100644 --- a/src/components/AuthPage/Login/index.jsx +++ b/src/components/AuthPage/Login/index.jsx @@ -16,7 +16,7 @@ import VisibilityOff from "@mui/icons-material/VisibilityOff"; import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useFirebase } from "react-redux-firebase"; -import { Link } from "react-router-dom"; +import { Link, useLocation } from "react-router-dom"; import validator from "validator"; import Divider from "../../../globalComponents/Divider"; import { clearAuthError, signIn } from "../../../store/actions"; @@ -48,6 +48,13 @@ const Login = ({ const errorProp = useSelector(({ auth }) => auth.profile.error); const loadingProp = useSelector(({ auth }) => auth.profile.loading); const dispatch = useDispatch(); + const location = useLocation(); + const [signupMessage, setSignupMessage] = useState(""); + + useEffect(() => { + // Update signupMessage when the location state changes + setSignupMessage(location.state?.successMessage || ""); + }, [location.state]); useEffect(() => setError(errorProp), [errorProp]); useEffect(() => setLoading(loadingProp), [loadingProp]); @@ -128,7 +135,11 @@ const Login = ({ > {loginText} - +
{ const [loading, setLoading] = useState(false); const [error, setError] = useState(""); - const [success, setSuccess] = useState(false); + // const [success, setSuccess] = useState(false); const firebase = useFirebase(); const dispatch = useDispatch(); + const history = useHistory(); // Initialize useHistory const errorProp = useSelector(({ auth }) => auth.profile.error); const loadingProp = useSelector(({ auth }) => auth.profile.loading); @@ -60,11 +62,16 @@ const SignupForm = () => { useEffect(() => { if (errorProp === false && loadingProp === false) { - setSuccess(true); + // setSuccess(true); + // Redirect to login page with state + history.push("/login", { + successMessage: + "Verification email has been sent. Please verify your email." + }); } else { - setSuccess(false); + // setSuccess(false); } - }, [errorProp, loadingProp]); + }, [errorProp, loadingProp, history]); const handleClickShowPassword = () => setShowPassword(!showPassword); const handleClickShowConfirmPassword = () => @@ -137,7 +144,13 @@ const SignupForm = () => { validateConfirmPassword() && agreed ) { - await signUp({ email, password })(firebase, dispatch); + try { + // Dispatch signup action with email and password + await signUp({ email, password })(firebase, dispatch); + } catch (error) { + setError(error); + setErrorOpen(true); + } } else { setAgreedText(true); } @@ -183,7 +196,7 @@ const SignupForm = () => { )} - {success && ( + {/* {success && ( { verification link. - )} + )} */} async (firebase, dispatch) => { try { dispatch({ type: actions.SIGN_UP_START }); const { email, password } = userData; - await firebase.createUser({ email, password }, { email }); + + // Create user with email and password + const createdUser = await firebase.createUser({ email, password }, { email }); + // console.log("createdUser is ", createdUser); + + // Get the current user + const currentUser = firebase.auth().currentUser; + // console.log("currentUser is ", currentUser); + + if (!currentUser) { + throw new Error('User not found after signup'); + } + + // Send email verification + try { + await currentUser.sendEmailVerification(); + console.log("Email verification sent successfully."); + } catch (verificationError) { + console.error("Error sending email verification:", verificationError); + dispatch({ type: actions.SIGN_UP_FAIL, payload: verificationError }); + throw verificationError; + } + + // Logout after successful signup and email verification await firebase.logout(); + + // Dispatch action indicating signup success dispatch({ type: actions.SIGN_UP_SUCCESS }); } catch (e) { + // Dispatch action indicating signup failure with error payload dispatch({ type: actions.SIGN_UP_FAIL, payload: e }); } }; @@ -135,15 +161,15 @@ export const verifyPasswordResetCode = export const confirmPasswordReset = ({ actionCode, password }) => - async (firebase, dispatch) => { - try { - dispatch({ type: actions.PASSWORD_RECOVERY_START }); - await firebase.confirmPasswordReset(actionCode, password); - dispatch({ type: actions.PASSWORD_RECOVERY_SUCCESS }); - } catch (e) { - dispatch({ type: actions.PASSWORD_RECOVERY_FAIL, payload: e.message }); - } - }; + async (firebase, dispatch) => { + try { + dispatch({ type: actions.PASSWORD_RECOVERY_START }); + await firebase.confirmPasswordReset(actionCode, password); + dispatch({ type: actions.PASSWORD_RECOVERY_SUCCESS }); + } catch (e) { + dispatch({ type: actions.PASSWORD_RECOVERY_FAIL, payload: e.message }); + } + }; export const verifyEmail = actionCode => async (firebase, dispatch) => { try {