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>