Failing to call two APIs one after another and redirecting the user to another page-CodePudding

I'm using Reactjs for my frontend and Springboot and Firebase for my backend. Basically, when a user registers for an account, I will call two APIs to post the account to both Firebase and my Springboot server, the reason being that I need to make use of the user data collected inside my own Springboot server.

The problem I'm facing is that after a user registers for an account, the Springboot API is not called after Firebase API is called. (I call the Firebase API first and then the Springboot one) It seems to me that after calling the Firebase API, everything stops and the code doesn't go any further, thus calling no more API.

How do I make sure that I can call both APIs one after another and then redirect the user to the next page without any interference?

Registration on submit in Reactjs:

const handleOnSubmit=(event: React.FormEvent<HTMLFormElement>)=> {

        if (password !== secondPassword) {
            setPasswordsMatched(false);
            console.log("passwords matched when password!==secondPassword:"   passwordsMatched);
        } else if(!username){
            setUsernameExists(false);
        }else if(!email){
            setEmailExists(false);
        }else if(!password||!secondPassword){
            setPasswordExists(false);
        }else{
            if(subscribedStatus){
                let subscribed:string="subscribed";
                firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
            }else{
                let subscribed:string="unsubscribed";
                firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
            }
        }
}

//This is the callback function put inside the Firebase API to see if Firebase accepts the registration. If yes, the user is redirected to "/verification-email"
const handleSignupSuccess=(signupStatus:boolean)=>{
        setSignupSuccess(signupStatus);
        if(signupStatus){
            firebaseAuthServiceEmailVerification(setEmailVerificationSent);
            navigate("/verification-email");
        }
}

Firebase API:

export const firebaseAuthServiceSignUpWithEmailAndPassword= (username:string,email: string, password: string, subscribed:string,callback: (isSuccess:boolean)=>void) =>{
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, email, password)
        .then(async ( userCredential) => {
            // Signed in
            const user = userCredential.user;
            await postAccount(username, email, password, user.uid, subscribed);
            callback(true);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            callback(false);
            // ..
        });
}

Springboot API:

export const postAccount=(username:string,email:string,password:string,firebaseUid:string,subscribedStatus:string)=>{
    axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`
    )
        .then((res)=>{

        }).catch((error)=>{
            console.log(error);
        })
}

CodePudding user response：

You mostly need a return statement in postAccount function

Quick fix

export const postAccount=(username:string,email:string,password:string,firebaseUid:string,subscribedStatus:string)=>{
    // return here
    return axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`
    )
        .then((res)=>{
            return res; // may be return here too
        }).catch((error)=>{
            console.log(error);
        })
}

// async function
const handleOnSubmit= async (event: React.FormEvent<HTMLFormElement>)=> {

    if (password !== secondPassword) {
        setPasswordsMatched(false);
        console.log("passwords matched when password!==secondPassword:"   passwordsMatched);
    } else if(!username){
        setUsernameExists(false);
    }else if(!email){
        setEmailExists(false);
    }else if(!password||!secondPassword){
        setPasswordExists(false);
    }else{
        if(subscribedStatus){
            let subscribed:string="subscribed";
            // wait till completion
            await firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
        }else{
            let subscribed:string="unsubscribed";
            // wait till completion
            await firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
        }
    }

}

Slightly better fixs:

With multiple API call its better to use async calls

    export const firebaseAuthServiceSignUpWithEmailAndPassword = async (username:string, ...) => {
        try {
                const auth = getAuth();
                const userCredentials = await createUserWithEmailAndPassword(auth, email, password)
                const user = userCredential.user;
                const res = await postAccount(username, email, password, user.uid, subscribed);
                // may be some extra checks
                //if (res.success) {
                //    callback(true);
                //}
                callback(true);
         } catch(error: any) {
            // handle error
            callback(false);
         }
       
    }


export const postAccount = async (username: string, ...) => {

     return await axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`)

}

Hope it helps in someway