reactjsfirebasefirebase-authenticationsigning

Prevent firebase automatic Signin after creating a new user


I was working on a project which has an admin side, an admin could add another admins, and when an admin A add an admin B it automatically signin the admin B, so after many researches I found that firebase doesn't provide any way to prevent or disable this behavior.


Solution

  • So I wanted to find the best solutions for a perfect user interaction, as we say features comes to fix bugs, So here is my alternative solution to hide this 'bug' :

    1. Before everything, we want to save our current admin's email in a state.
    2. When we click the submit button, we create a new admin B like usual cases.
    3. When admin B has been created successfully we open a dialog box and we ask admin A to confirm this action by providing his password (like a security check) on a password field inside the dialog box. 4.Now we have all credentials of admin A as shown in step 1 (email) and step 3 (password). 5.Now we can call signin method and sign the admin A back.
      Now let's write it in code (I'm using Rreact and @mui/material in my frontend) :

    Frontend :

    <TextField
      fullWidth
      label="Email"
      type="email"
      onChange={(email)=>{setEmail(email.target.value)}}
    />
    <TextField
      fullWidth
      label="Password"
      type="password"
      onChange={(pass)=>{setPassword(email.target.value)}}
    />
    <Button
     onClick={createNewAdmin}
    />
    <Dialog open={showDialog}>
      <DialogContent>
        <DialogContentText>
          Tap  your password !
        </DialogContentText>
        <TextField
            label="Password"
            type="password"
            onClick={(pass)=>setReAuthPass(pass.target.value)}}
          />
      </DialogContent>
      <DialogActions>
       <Button onClick={signAdminBack}>
        Confirm
       </Button>
      </DialogActions>
    </Dialog>
    

    State :

    const[email, setEmail] = React.useState('');
    const[password, setPassword] = React.useState('');
    const[oldEmail, setOldEmail] = React.useState('');
    const[reAuthPass, setReAuthPass] = React.useState('');
    const[showDialog, setDialog]=React.useState(false);
    
    

    Functions :

    const createNewAdmin=()=>{
       const auth = getAuth();
          //saving the current admin email
          setOldEmail(auth.currentUser.email);
          createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
             //opening the dialog
             setDialog(true);
            }).catch((error)=>{console.log(error);});
    }
    
    const signAdminBack=()=>{
      const auth=getAuth();
      signInWithEmailAndPassword(auth, oldEmail, reAuthPass).then((userCredential)=>{
              //admin A brought back
              //closing the dialog
            }).catch((err)=>{
              console.log(err);
            });
    
    }
    

    Images
    enter image description here

    Bringing back the old admin