Register

---

Reducers/Slices

• File app\redux\modules\auth.js
• Put all register function in authSlice, so the font-end part (React components) can get the state to modify ui or contents.

  requestAuth: (state) => {
    state.loading = true;
    state.message = null;
  },
                        

Container

• File: app\containers\Pages\UsersFirebase\Register.js
• Call the requestAuth function in register container

                            
  import { getAuth, updateProfile,
    signInWithPopup, createUserWithEmailAndPassword,
    GoogleAuthProvider, TwitterAuthProvider, GithubAuthProvider 
  } from 'firebase/auth';
  import { requestAuth, loginUser } from 'enl-redux/modules/auth';
  
  const auth = getAuth();
  const googleProvider = new GoogleAuthProvider();
  const twitterProvider = new TwitterAuthProvider();
  const githubProvider = new GithubAuthProvider();
                            
                          

• Set Register Function

                            
  const registerEmail = (values) => {
    const { name, email, password } = values;
    dispatch(requestAuth());
  
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        updateProfile(auth.currentUser, {
          displayName: name
        }).then(() => {
          const { user } = userCredential;
          if (user) {
            dispatch(loginUser(user));
            navigate('/app');
          }
        }).catch((error) => {
          dispatch(setMessage(error.message));
        });
      })
      .catch((error) => {
        dispatch(setMessage(error.message));
      });
  };
                            
                          

• Put function in component

                            
  <RegisterForm
    submitForm={(values) => registerEmail(values)}
    googleAuth={loginGoogle}
    twitterAuth={loginTwitter}
    githubAuth={loginGithub}
    loading={loading}
    messagesAuth={messageAuth}
    closeMsg={() => dispatch(hideMessage())}
    link="/login-firebase"
  />
                          

Component

• File: app\components\Forms\RegisterForm.js
• Collect register form value with formik

                          
   <FormControl variant="standard" className={classes.formControl}>
      <TextField
        id="name"
        name="name"
        label={intl.formatMessage(messages.loginFieldName)}
        variant="standard"
        value={formik.values.name}
        onChange={formik.handleChange}
        error={formik.touched.name && Boolean(formik.errors.name)}
        helperText={formik.touched.name && formik.errors.name}
        className={classes.field}
      />
  </FormControl>
                          

Login

Reducer/Slice

• File: app\redux\modules\auth.js
• Put login and logout function in reducer state. So the font-end part (React components) can get the state to modify ui or contents.

•                         
  loginUser: (state, action) => {
    const user = action.payload;
    state.loading = false;
    state.user = user;
    state.loggedIn = user !== null;
  },
  logoutUser: (state) => {
    state.loading = false;
    state.user = null;
    state.loggedIn = false;
  },
                          
                        

Containers

• File: app\containers\Pages\UsersFirebase\Login.js
• Call the Login function in login container

                          
  import {
    getAuth, signInWithPopup, signInWithEmailAndPassword,
    GoogleAuthProvider, TwitterAuthProvider, GithubAuthProvider
  } from 'firebase/auth';
  import { requestAuth, loginUser } from 'enl-redux/modules/auth';
                          
                        

• Login with Google

                          const googleProvider = new GoogleAuthProvider();
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in
      const { user } = userCredential;
      if (user) {
        dispatch(loginUser(user));
        if (getUrlVars().next) {
          // Redirect to next route
          navigate(getUrlVars().next);
        } else {
          // Redirect to dashboard if no next parameter
          navigate('/app');
        }
      }
    })
    .catch((error) => {
      dispatch(setMessage(error.message));
    });
                          
                        

• Put function in component

                          
  <LoginForm
    submitForm={(values) => loginEmail(values)}
    googleAuth={loginGoogle}
    twitterAuth={loginTwitter}
    githubAuth={loginGithub}
    loading={loading}
    messagesAuth={messageAuth}
    closeMsg={() => dispatch(hideMessage())}
    link="/register-firebase"
  />
                        

Component Email Login

• File: app\components\Forms\LoginForm.js
• Collect login form value with formik. Example for password field.

                          
  <FormControl variant="standard" className={classes.formControl}>
    <TextField
      id="password"
      name="password"
      label={intl.formatMessage(messages.loginFieldPassword)}
      type={showPassword ? 'text' : 'password'}
      variant="standard"
      value={formik.values.password}
      onChange={formik.handleChange}
      error={formik.touched.password && Boolean(formik.errors.password)}
      helperText={formik.touched.password && formik.errors.password}
      className={classes.field}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
              size="large">
              {showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        )
      }}
    />
  </FormControl>
                          
                        

Component Social Login

• File: app/containers/Pages/UsersFirebase/Login.js
• Import social login function

                          
  import {
    getAuth, signInWithPopup,
    GoogleAuthProvider, TwitterAuthProvider, GithubAuthProvider
  } from 'firebase/auth';
  
  const auth = getAuth();
  const googleProvider = new GoogleAuthProvider();
  const twitterProvider = new TwitterAuthProvider();
  const githubProvider = new GithubAuthProvider();
                          
                        

• Dispatch social login function

                          
    const loginGoogle = () => {
      signInWithPopup(auth, googleProvider)
        .then((result) => {
          // The signed-in user info.
          const { user } = result;
          dispatch(loginUser(user));
          if (getUrlVars().next) {
            // Redirect to next route
            navigate(getUrlVars().next);
          } else {
            // Redirect to dashboard if no next parameter
            navigate('/app');
          }
        }).catch((error) => {
          // Handle Errors here.
          dispatch(setMessage(error.message));
        });
    };
  
    const loginTwitter = () => {
      signInWithPopup(auth, twitterProvider)
        .then((result) => {
          // The signed-in user info.
          const { user } = result;
          dispatch(loginUser(user));
          if (getUrlVars().next) {
            // Redirect to next route
            navigate(getUrlVars().next);
          } else {
            // Redirect to dashboard if no next parameter
            navigate('/app');
          }
        }).catch((error) => {
          // Handle Errors here.
          dispatch(setMessage(error.message));
        });
    };
  
    const loginGithub = () => {
      signInWithPopup(auth, githubProvider)
        .then((result) => {
          // The signed-in user info.
          const { user } = result;
          dispatch(loginUser(user));
          if (getUrlVars().next) {
            // Redirect to next route
            navigate(getUrlVars().next);
          } else {
            // Redirect to dashboard if no next parameter
            navigate('/app');
          }
        }).catch((error) => {
          // Handle Errors here.
          dispatch(setMessage(error.message));
        });
    };
                          
                        

• Put function in component

                          
  <LoginForm
    submitForm={(values) => loginEmail(values)}
    googleAuth={loginGoogle}
    twitterAuth={loginTwitter}
    githubAuth={loginGithub}
    loading={loading}
    messagesAuth={messageAuth}
    closeMsg={() => dispatch(hideMessage())}
    link="/register-firebase"
  />
                          
                        

• Call the function when button onClick
  File: app/components/Forms/LoginForm.js

                          
  <section className={classes.socmedSideLogin}>
    <Button
      variant="contained"
      className={classes.redBtn}
      type="button"
      size="large"
      onClick={googleAuth}
    >
      <i className="ion-logo-google" />
      Google
    </Button>
    <Button
      variant="contained"
      className={classes.cyanBtn}
      type="button"
      size="large"
      onClick={twitterAuth}
    >
      <i className="ion-logo-twitter" />
      Twitter
    </Button>
    <Button
      variant="contained"
      className={classes.greyBtn}
      type="button"
      size="large"
      onClick={githubAuth}
    >
      <i className="ion-logo-github" />
      Github
    </Button>
  </section>
                          
                        

Forgot Password

---

Containers

• File: app\containers\Pages\UsersFirebase\ResetPassword.js
• Call the Reset function, then dispatch it.

                          
  import { getAuth, sendPasswordResetEmail } from 'firebase/auth';
  
  const auth = getAuth();
  const resetPwd = (values) => {
    const { email } = values;
  
    sendPasswordResetEmail(auth, email)
      .then(() => {
        dispatch(setMessage('LINK.PASSWORD_RESET.SENT'));
      })
      .catch((error) => {
        dispatch(setMessage(error.message));
      });
  };
                          
                        

• Put function in component

                          
  <ResetForm
    submitForm={(values) => resetPwd(values)}
    messagesAuth={messageAuth}
    closeMsg={() => dispatch(hideMessage())}
  />                    
                          
                        

Component

• File: app\components\Forms\ResetForm.js
• Get email value by fomik

                          
  <form onSubmit={formik.handleSubmit}>
    <div>
      <FormControl variant="standard" className={classes.formControl}>
        <TextField
          name="email"
          variant="standard"
          placeholder="Your Email"
          label={intl.formatMessage(messages.loginFieldEmail)}
          value={formik.values.email}
          onChange={formik.handleChange}
          className={classes.field}
          error={formik.touched.email && Boolean(formik.errors.email)}
          helperText={formik.touched.email && formik.errors.email}
        />
      </FormControl>
    </div>
    <div className={classes.btnArea}>
      <Button variant="contained" color="primary" type="submit" disabled={formik.isSubmitting || !formik.isValid || !formik.dirty}>
        <FormattedMessage {...messages.resetButton} />
        <ArrowForward className={cx(classes.rightIcon, classes.iconSmall, classes.signArrow)} />
      </Button>
    </div>
  </form>