## Code refactor - searching/filtering

Let's go one step further and refactor this local search/filter logic. So that we can re-use it many other pages later.

``` components/forms/LocalSearch.js ```

```js
import React from "react";

const LocalSearch = ({ keyword, setKeyword }) => {
  // search
  const handleSearchChange = (e) => {
    e.preventDefault();
    setKeyword(e.target.value.toLowerCase());
  };

  return (
    <div className="container p-4">
      <input
        placeholder="Filter"
        type="search"
        value={keyword}
        onChange={handleSearchChange}
        className="form-control mb-4"
      />
    </div>
  );
};

export default LocalSearch;
```

Now import LocalSearch in `CategoryCreate.js`

```js
import LocalSearch from "../../../components/forms/LocalSearch";
```

Now replace search input with the `LocalSearch` component. You can also remove `handleSearchChange`.

```js
{/* <input
  placeholder="Filter"
  type="search"
  value={keyword}
  onChange={handleSearchChange}
  className="form-control mb-4"
/> */}

<LocalSearch keyword={keyword} setKeyword={setKeyword} />
```
Great. Now it's time to move to backend to implement subcategories.


React Node MERN Ecommerce Tutorial 54

## Searching and Filtering

Let's add search filter feature so that it is easy to find a category from a long list of categories.

Let's do it step by setp:

### Step 1

Put it right below the existing `CategoryForm` component

```js
 <input
    placeholder="Filter"
    type="search"
    value={keyword}
    onChange={handleSearchChange}
    className="form-control mb-4"
  />
```

### Step 2

Create a function

```js
const handleSearchChange = (e) => {
  e.preventDefault();
  setKeyword(e.target.value.toLowerCase());
};
```

### Step 3

Add to state

```js
const [keyword, setKeyword] = useState("");
```

### Setp 4

Create another function

```js
const searched = (keyword) => (c) => c.name.toLowerCase().includes(keyword);
```

### Step 5

Show filtered categories by using it in `map`

```js
{
  categories.filter(searched(keyword)).map((category) => (
    // rest of code
  ))
}
```

Awesome. Now admin can easily filter search the categories.

React Node MERN Ecommerce Tutorial 53

## Reusable component to create and update category

 * So far we have been able to **CRUD** categories
 * Lets refactor our code a bit
 * Let's try to create re-usable form for both create an update
 * Then we will also add **searching/filtering** option so that you can type the category name and find it easily from the long list of categories 
 * Then we will move on to subcategories
 * Afterwards we can start creating products

``` components/forms/CategoryForm.js ```

This form can be used for both create/update category.

```js
import React from "react";

const CategoryForm = ({ handleSubmit, name, setName, buttonText }) => (
  <form onSubmit={handleSubmit}>
    <div className="form-group">
      <label className="text-muted">Name</label>
      <input
        type="text"
        className="form-control"
        onChange={(e) => setName(e.target.value)}
        value={name}
        autoFocus
        required
      />
    </div>
    <button className="btn btn-outline-primary">{buttonText}</button>
  </form>
);

export default CategoryForm;
```

Now lets pass those props from `CategoryCreate.js`

```js
// import
import CategoryForm from "../../../components/forms/CategoryForm";
```

Now remove `categoryForm()` and use `CategoryForm` component instead with props.

```js
{/* {categoryForm()} */ }
<CategoryForm
  handleSubmit={handleSubmit}
  name={name}
  setName={setName}
  buttonText="Create"
/>
```

### Re-use CategoryForm in CategoryUpdate

```js
{/* {updateForm()} */ }
<CategoryForm
  handleSubmit={handleSubmit}
  name={name}
  setName={setName}
  buttonText="Update"
/>
```

Awesome. We re-used `CategoryForm` for both create and update.

React Node MERN Ecommerce Tutorial 52

## Category update

So far Admin can can create, read and delete category. Let's implement update category too.

``` App.js ```

```js
<AdminRoute
  exact
  path="/admin/category/:slug"
  component={CategoryUpdate}
/>
```

``` pages/admin/category/CategoryUpdate.js ```

```js
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useParams, useHistory } from "react-router-dom";
import { toast } from "react-toastify";
import { getCategory, updateCategory } from "../../../functions/category";

const CategoryUpdate = () => {
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(false);
  // redux
  const { user } = useSelector((state) => ({ ...state }));
  // router
  const { slug } = useParams();
  const history = useHistory();

  // load category
  useEffect(() => {
    loadCategory();
  }, []);

  // load single category
  const loadCategory = async () => {
    setLoading(true);
    getCategory(slug).then((res) => {
      // once slug is updated your existing url with old slug will not work
      setName(res.data.name);
      setLoading(false);
    });
  };

  // update category
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    // make request to api to create category
    updateCategory(slug, { name }, user.token)
      .then((res) => {
        setLoading(false);
        toast.success(`${res.data.name} updated`);
        history.push("/admin/category");
      })
      .catch((err) => {
        // console.log(err);
        setLoading(false);
        toast.error(err.response.data.err);
      });
  };

  const updateForm = () => (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label className="text-muted">Name</label>
        <input
          type="text"
          className="form-control"
          onChange={(e) => setName(e.target.value)}
          value={name}
          autoFocus
          required
        />
      </div>
      <button className="btn btn-outline-primary">Save</button>
    </form>
  );

  return (
    <div className="container p-5">
      {loading ? <h4 className="text-danger">Loading..</h4> : <h4>Update</h4>}

      {updateForm()}
    </div>
  );
};

export default CategoryUpdate;
```

Great. Now update category works.

React Node MERN Ecommerce Tutorial 51

## Admin page for create, update and delete categories

First add category link to `AdminRoute.js`.

```js
<li className="nav-item">
  <Link className="nav-link" to="/admin/category">
    Category
  </Link>
</li>
```

``` App.js ```

```js
<AdminRoute exact path="/admin/category" component={CategoryCreate} />
```

``` pages/admin/category/CategoryCreate.js ```

```js
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { toast } from "react-toastify";
import { Link } from "react-router-dom";
import {
  getCategories,
  removeCategory,
  createCategory,
} from "../../../functions/category";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";

const CategoryCreate = () => {
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(false);
  const [categories, setCategories] = useState([]);

  // token from redux
  const { user } = useSelector((state) => ({ ...state }));

  // load category
  useEffect(() => {
    loadCategories();
  }, []);

  const loadCategories = () =>
    getCategories().then((c) => setCategories(c.data));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    // make request to api to create category
    createCategory({ name }, user.token)
      .then((res) => {
        setLoading(false);
        setName("");
        //   console.log(response);
        toast.success(`"${res.data.name}" is created`);
        loadCategories();
      })
      .catch((err) => {
        // console.log(err.response);
        setLoading(false);
        toast.error(err.response.data.err); // err.response is important
      });
  };

  const handleRemove = async (slug) => {
    if (window.confirm("Delete?")) {
      setLoading(true);
      removeCategory(slug, user.token)
        .then((res) => {
          // console.log(res);
          loadCategories();
          setLoading(false);
          toast.error(`${res.data.name} deleted`);
        })
        .catch((err) => console.log(err));
    }
  };

  const categoryForm = () => (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label className="text-muted">Name</label>
        <input
          type="text"
          className="form-control"
          onChange={(e) => setName(e.target.value)}
          value={name}
          autoFocus
          required
        />
      </div>
      <button className="btn btn-outline-primary">Save</button>
    </form>
  );

  return (
    <div className="container">
      {loading ? <h4 className="text-danger">Loading..</h4> : <h4>Create</h4>}

      {categoryForm()}

      {categories.map((c) => (
        <div className="alert alert-secondary" key={c._id}>
          {c.name}
          <span
            onClick={() => handleRemove(c.slug)}
            className="btn btn-sm btn float-right"
          >
            <DeleteOutlined className="text-danger" />
          </span>
          <Link to={`/admin/category/${c.slug}`}>
            <span className="btn btn-sm btn float-right">
              <EditOutlined className="text-warning" />
            </span>
          </Link>
        </div>
      ))}
    </div>
  );
};

export default CategoryCreate;
```

Now we can create, read and delete category.

React Node MERN Ecommerce Tutorial 50

## API functions to Create Read and Delete categories

It's time to start creating categories from frontend by admin.

``` functions/category.js ```

```js
import axios from "axios";

export const getCategories = async () =>
  await axios.get(`${process.env.REACT_APP_API}/categories`);

export const getCategory = async (slug) =>
  await axios.get(`${process.env.REACT_APP_API}/category/${slug}`);

export const removeCategory = async (slug, authtoken) =>
  await axios.delete(`${process.env.REACT_APP_API}/category/${slug}`, {
    headers: {
      authtoken,
    },
  });

export const updateCategory = async (slug, category, authtoken) =>
  await axios.put(`${process.env.REACT_APP_API}/category/${slug}`, category, {
    headers: {
      authtoken,
    },
  });

export const createCategory = async (category, authtoken) =>
  await axios.post(`${process.env.REACT_APP_API}/category`, category, {
    headers: {
      authtoken,
    },
  });

```

React Node MERN Ecommerce Tutorial 49

## Creating controller methods for categories

``` controllers/category.js ```

```js
const Category = require("../models/category");
const slugify = require("slugify");
const { sendError } = require("../helpers/error");

exports.create = async (req, res) => {
  try {
    const { name } = req.body;
    res.json(await new Category({ name, slug: slugify(name) }).save());
  } catch (err) {
    sendError(err, res);
  }
};

exports.list = async (req, res) =>
  res.json(await Category.find().sort({ createdAt: -1 }).exec());

exports.read = async (req, res) => {
  let category = await Category.findOne({ slug: req.params.slug }).exec();
  res.json(category);
};

exports.update = async (req, res) => {
  const { name } = req.body;
  try {
    const updated = await Category.findOneAndUpdate(
      { slug: req.params.slug },
      { name, slug: slugify(name) },
      { new: true }
    );
    res.json(updated);
  } catch (err) {
    sendError(err);
  }
};

exports.remove = async (req, res) => {
  try {
    const deleted = await Category.findOneAndDelete({ slug: req.params.slug });
    res.json(deleted);
  } catch (err) {
    sendError(err);
  }
};
```

Now we can move on to frontend.

React Node MERN Ecommerce Tutorial 48

### Error helper

We have to return error message almost every time in each controller methods. To avoid writing same code over and over again, I am using this helper function.

``` server/helpers/error.js ```

```js
exports.sendError = (err, res) =>
  res.status(400).json({
    err: err.message,
  });

```

Now let's continue on creating controller methods.

React Node MERN Ecommerce Tutorial 47

## Creating category routes

``` routes/category.js ```

```js
const express = require("express");
const router = express.Router();

const {
  create,
  read,
  update,
  remove,
  list,
} = require("../controllers/category");
// middleware
const { authCheck, adminCheck } = require("../middlewares");

router.post("/category", authCheck, adminCheck, create);
router.get("/categories", list);
router.get("/category/:slug", read);
router.put("/category/:slug", authCheck, adminCheck, update);
router.delete("/category/:slug", authCheck, adminCheck, remove);

module.exports = router;
```

At the moment, you will see errors in server console because we have not created any of these controller files/functions. Let's do it.

React Node MERN Ecommerce Tutorial 46

## Creating category model

Before admin can create products, there must be categories and subcategories to choose from. 

Each product will belong to a category and subcategories that belongs to that category.

So let's start with our backend. First we start with category, we crate category model, then add some routes and create controller methods to handle those routes.

``` server/models/category ```

```js
const mongoose = require("mongoose");
const { ObjectId } = mongoose.Schema;

const categorySchema = new mongoose.Schema(
  {
    name: {
      type: String,
      trim: true,
      required: "Name is required",
      minlength: [3, "Too short"],
      maxlength: [32, "Too long"],
    },
    slug: {
      type: String,
      unique: true, // unique is not validator unlike required maxlength etc
      lowercase: true,
      index: true,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("Category", categorySchema);
```

React Node MERN Ecommerce Tutorial 45

## Update password with firebase

Before we start creating categories, subcategories and products by admin, let's allow logged in user (both subscriber and admin) the ability to update their password.

``` components/routes/AdminRoute ```

```js
<li className="nav-item">
  <Link className="nav-link" to="/user/password">
    Password
  </Link>
</li>
```

``` pages/user/Password.js ```

```js
import React, { useState, Fragment } from "react";
import { auth } from "../../firebase";
import { toast } from "react-toastify";

const Password = () => {
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    await auth.currentUser
      .updatePassword(password)
      .then(() => {
        setLoading(false);
        toast.success(`Password updated`);
      })
      .catch((error) => {
        setLoading(false);
        toast.error(error.message);
      });
  };

  const passwordUpdateForm = () => (
    <form onSubmit={handleSubmit}>
      <div className="form-group"></div>
      <div className="form-group">
        <label>Your Password</label>
        <input
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          name="password"
          type="password"
          className="form-control"
          placeholder="Enter new password"
          disabled={loading}
        />
      </div>
      <button
        type="submit"
        className="btn btn-primary"
        disabled={!password || loading}
      >
        Submit
      </button>
    </form>
  );

  return (
    <Fragment>
      <div className="container">
        {loading ? (
          <h4 className="text-danger">Loading..</h4>
        ) : (
          <h4>Password Update</h4>
        )}
        {passwordUpdateForm()}
      </div>
    </Fragment>
  );
};

export default Password;
```

React Node MERN Ecommerce Tutorial 44

## Conditional rendering of navigation links

Update nav to show links based on `user/admin` role.

``` Header.js ```

```js
{user && (
  <SubMenu
    icon={<SettingOutlined />}
    title={user.name}
    className="float-right"
  >
    <ItemGroup>
      {user && user.role === "subscriber" && (
        <Item>
          <Link to="/user/history">Dashboard</Link>
        </Item>
      )}

      {user && user.role === "admin" && (
        <Item>
          <Link to="/admin/dashboard">Dashboard</Link>
        </Item>
      )}

      <Item key="logout" icon={<LogoutOutlined />} onClick={logout}>
        Logout
      </Item>
    </ItemGroup>
  </SubMenu>
)}
```

React Node MERN Ecommerce Tutorial 43

## Role based redirect

In Login page, after `dispatch`, use the following code in `handleSubmit` and `googleLogin` functions to redirect user to different pages based on their role.

```js
if (res.data.role === "subscriber") {
    history.push("/user/history");
  } else if (res.data.role === "admin") {
    history.push("/admin/dashboard");
  }
```

React Node MERN Ecommerce Tutorial 42

## Admin routes in react

Now lets implement admin routing in frontend so that only admin user has access to certain pages.

``` functions/auth ```

```js
 export const getCurrentAdmin = async (authtoken) =>
  await axios.post(
    `${process.env.REACT_APP_API}/current-admin`,
    {},
    {
      headers: {
        authtoken,
      },
    }
  );
```

## Admin route

Just like we had User route, we are creating Admin route.

``` components/routes/AdminRoute.js ```

```js
import React, { useEffect, useState } from "react";
import { Route, Link } from "react-router-dom";
import { useSelector } from "react-redux";
import LoadingToRedirect from "./LoadingToRedirect";
import { getCurrentAdmin } from "../../functions/auth";

const AdminRoute = ({ children, ...rest }) => {
  const { user } = useSelector((state) => ({ ...state }));
  const [ok, setOk] = useState(false);

  useEffect(() => {
    if (user) {
      getCurrentAdmin(user.token)
        .then((res) => {
          console.log("ADMIN ROUTE RES", res);
          setOk(true);
        })
        .catch((err) => {
          console.log("ADMIN ROUTE ERR", err);
          setOk(false);
        });
    }
  }, [user]);

  const navLinks = () => (
    <nav>
      <ul className="nav flex-column">
        <li className="nav-item">
          <Link className="nav-link" to="/admin/dashboard">
            Dashboard
          </Link>
        </li>
      </ul>
    </nav>
  );

  const renderContent = () => (
    // props means components passed down to this pricate route component
    <div className="container-fluid pt-5">
      <div className="row">
        <div className="col-2">{navLinks()}</div>
        <div className="col">
          <Route {...rest} />
        </div>
      </div>
    </div>
  );

  return ok ? renderContent() : <LoadingToRedirect />;
};

export default AdminRoute;
```

Now let's try it out. Create a page for admin and add it to routes in `App.js`

``` pages/admin/Dashboard.js ```

```js
import React from "react";

const AdminDashboard = () => {
  return (
    <>
      <p>Admin Dashboard</p>
    </>
  );
};

export default AdminDashboard;
```

``` App.js ```

```js
// import
import AdminRoute from "./components/routes/AdminRoute";
import AdminDashboard from "./pages/admin/AdminDashboard";

// apply
<AdminRoute exact path="/admin/dashboard" component={AdminDashboard} />
```

Now you can try. Visit http://localhost:3000/admin/dashboard

 * Now if you try to visit http://localhost:3000/admin/dashboard
 * you will get error in console and redirected to home page
 * Thats because our current user does not have a role of admin
 * Lets manually change that in database and try. it works. Great!
 * Moving on, we want to redirect users to different page after login
 * Admin will redirect to `'/admin/dashboard'`
 * Users will redirect to `'/user/history'`

React Node MERN Ecommerce Tutorial 41

## Protected routes for admin

It's time to implement Admin routes. They will be protected routes for users with role of `admin`. These pages will be used by admin for creating products, managing orders etc. Let's start with backend.

### Creating Admin middleware in node js

``` middlewares/admin ```

```js
  // import 
  const User = require("../models/user");
  // then
  exports.adminCheck = async (req, res, next) => {
  const { email } = req.user;
  // console.log(email);
  const adminUser = await User.findOne({ email }).exec();

  if (adminUser.role !== "admin") {
    res.status(403).json({
      err: "Admin resource. Access denied.",
    });
  } else {
    next();
  }
};
```

### Create admin route

We can still use `currentUser` method to return current user because we have already checked if the user has role of `admin` or not in `adminCheck` middleware.

``` routes/auth ```

```js
router.post("/current-admin", authCheck, adminCheck, currentUser);
```

Now we can move on to frontend.

React Node MERN Ecommerce Tutorial 40

## Navigation sidebar on user dashboard/pages

 * Lets replace the text User links with actual links
 * It will be used as navigation bar for logged in users
 * All the routes that uses UserRoute will have the exact same navigation on the left

Here is the full code with nav links:

``` components/routes/UserRoute.js ```

```js
import React from "react";
import { Route, Link } from "react-router-dom";
import { useSelector } from "react-redux";
import LoadingToRedirect from "./LoadingToRedirect";

const UserRoute = ({ children, ...rest }) => {
  const { user } = useSelector((state) => ({ ...state }));

  const navLinks = () => (
    <nav>
      <ul className="nav flex-column">
        <li className="nav-item">
          <Link className="nav-link" to="/user/history">
            History
          </Link>
        </li>

        <li className="nav-item">
          <Link className="nav-link" to="/user/password">
            Password
          </Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/user/wishlist">
            Wishlist
          </Link>
        </li>
      </ul>
    </nav>
  );

  const renderContent = () => (
    // props means components passed down to this pricate route component
    <div className="container-fluid pt-5">
      <div className="row">
        <div className="col-2">{navLinks()}</div>
        <div className="col">
          <Route {...rest} />
        </div>
      </div>
    </div>
  );

  return user ? renderContent() : <LoadingToRedirect />;
};

export default UserRoute;
```

### Creating additional pages for user

Lets create these pages so that we will ready to use them later when needed.

Create the following pages:

```js
/pages/user/History.js
/pages/user/Password.js
/pages/user/Wishlist.js
```

``` History.js ```

```js
import React from "react";

const History = () => {
  return (
    <>
      <p>User Purchase History</p>
    </>
  );
};

export default History;
```

Repeat same code with name change for all those files.

Now import to `App.js` to use

```js
// import
import History from "./pages/user/History";
import Password from "./pages/user/Password";
import Wishlist from "./pages/user/Wishlist";
```

```js
// use
<UserRoute exact path="/user/history" component={History} />
<UserRoute exact path="/user/password" component={Password} />
<UserRoute exact path="/user/wishlist" component={Wishlist} />
```

 Now remove `'/user'` route, we don't need that anymore. We will use `user/history` as a landing page when user login to our app.

Lets make that change in `Login.js`
```js
history.push("/user/history");
```

Now try logout and login again. You will get redirect away to `'/user/history'`

React Node MERN Ecommerce Tutorial 39

## Countdown timer to redirect user

Instead of showing the text unauthorized, let's show a countdown. It will start from 5 and end at 0. When it reaches 0, you will redirect user away.
First lets create a component called `LoadingToRedirect.js` inside `components/routes`

``` components/routes/LoadingToRedirect.js ```

```js
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";

const LoadingToRedirect = ({ path = '/' }) => {
  const [count, setCount] = useState(5);
  let history = useHistory();

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((currentCount) => --currentCount);
    }, 1000);
    // redirect once count is equal to 0
    count === 0 && history.push(path);
    // cleanup
    return () => clearInterval(interval);
  }, [count]);

  return (
    <div className="container p-5 text-center">
      <p>Redirecting you in {count} seconds</p>
    </div>
  );
};

export default LoadingToRedirect;
```

Now lets import LoadingToRedirect and use in UserRoute and replace the text Unauthorized

```js
return user ? renderContent() : <LoadingToRedirect />;
```

React Node MERN Ecommerce Tutorial 38

## Protecting routes for logged in user only

To protect routes, we will create a component which will check if we have user in state. If yes, then it will render the component otherwise redirect user away.

``` /src/components/routes/UserRoute.js ```

```js
import React from "react";
import { Route, Link } from "react-router-dom";
import { useSelector } from "react-redux";

const UserRoute = ({ children, ...rest }) => {
  const { user } = useSelector((state) => ({ ...state }));

  const renderContent = () => (
    // props means components passed down to this pricate route component
    <div className="container-fluid pt-5">
      <div className="row">
        <div className="col-2">User links</div>
        <div className="col">
          <Route {...rest} />
        </div>
      </div>
    </div>
  );

  return user ? renderContent() : "Unauthorized";
};

export default UserRoute;
```

/Now use this route in `App.js`. Any route you want to protect for only logged in user, you can use `UserRoute`.

``` App.js ```

```js
<UserRoute exact path="/user" component={User} />
```

Now if you are not logged in and visit `'/user'` page, you will see the text **Unauthorized**. But if you login, you will see the actual content. 

React Node MERN Ecommerce Tutorial 37

We utilized firebase to achieve really flexible authentication system which otherwise could become extremely difficult.

Now we want to focus on protecting routes for user with the role of `admin` so that only admin has access to pages where admin can create products and save in database.

## Setup user dashboard page

 * lets create a user dashboard which will be protected only for logged in users
 * In the protected `pages/dashboard`, users will be able to update their password
 * They will be able to view their orders
 * And also view the products they added to their **wishlist**
 * These features will be built in future, as we progress through the course

``` pages/user/User.js ```

```js
import React from "react";

const User = () => (
  <div className="container-fluid">
    <div className="row">
      <div className="col">user page</div>
    </div>
  </div>
);

export default User;
```

Now import to `App.js` and use

```js
<Route exact path="/user" component={User} />
```

At the moment you can visit this page without logging in. Our goal is to protect this page so that only logged in user can see this

React Node MERN Ecommerce Tutorial 36

## Fetch current user

Now in client side, fetch current user in `App.js` `useEffect`

First let's write a `axios` method in `functions/auth.js`

```js
export const getCurrentUser = async (authtoken) =>
  await axios.post(
    `${process.env.REACT_APP_API}/current-user`,
    {},
    {
      headers: {
        authtoken,
      },
    }
  );
```

``` App.js ```

```js
import { getCurrentUser } from "./functions/auth";
```

Modify `useEffect` to fetch currentUser

```js
useEffect(() => {
    // console.log("APP.JS USEEFFCT");
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      console.log("APP.JS USEEFFCT");
      if (user) {
        const idTokenResult = await user.getIdTokenResult();

        getCurrentUser(idTokenResult.token)
          .then((res) => {
            console.log("CREATE OR UPDATE USER RESPONSE", res);
            dispatch({
              type: "LOGGED_IN_USER",
              payload: {
                name: res.data.name,
              email: res.data.email,
                token: idTokenResult.token,
                role: res.data.role,
                _id: res.data._id,
              },
            });
          })
          .catch((err) => console.log(err));
      }
    });
    //
    return () => unsubscribe();
  }, []);
```



React Node MERN Ecommerce Tutorial 35

## Current user endpoint

Now let's create another endpoint that returns currently logged in user. We will make request to that endpoint to get currently logged in user.

``` server/routes/user ```

```js
const { createOrUpdateUser, currentUser } = require("../controllers/auth");

router.post("/create-or-update-user", authCheck, createOrUpdateUser);
router.post("/current-user", authCheck, currentUser);

// controllers/auth
exports.currentUser = async (req, res) => {
  User.findOne({ email: req.user.email }).exec((err, user) => {
    if (err) throw new Error(err);
    // console.log("current user", user);
    res.json(user);
  });
};
```

Now we can make request to this endpoint from react, to fetch current user.



React Node MERN Ecommerce Tutorial 34

## Reusable code

Move `createOrUpdateUser()` to its own file so that we can re-use it in multiple files.

``` src/functions/auth.js ```

```js
import axios from "axios";

export const createOrUpdateUser = async (authtoken) => {
  return await axios.post(
    `${process.env.REACT_APP_API}/create-or-update-user`,
    {},
    {
      headers: {
        authtoken,
      },
    }
  );
};
```

Now import in `Login.js`

```js
import { createOrUpdateUser } from "../../functions/auth";
```

You can repeat same process in `RegisterComplete.js`



React Node MERN Ecommerce Tutorial 33

## Create or update user on google login

 * Awesome. Now if you look at redux state, you will see user has role and id fields too. If you refresh the page you will see only user email and token.
 * That means we need to make post request to `'/create-or-update-user'` endpoint in `App.js` useEffect as well.
 * But instead of `'/create-or-update-user'` endpoint, we can use `'/current-user'` endpoint in `App.js`
 * Because once user register or login, user is already saved in database. so we can simply query the database to get that user.
 * Then we will also need to do the same (create or update) in register-complete too.

Let's not forget to apply `createOrUpdateUser` in `googleLogin` too.

``` src/pages/auth/Login.js ```

```js
const googleLogin = async () => {
    auth
      .signInWithPopup(googleAuthProvider)
      .then(async function (result) {
        const user = result.user;
        // console.log("GOOGLE", user);
        const idTokenResult = await user.getIdTokenResult();
        createOrUpdateUser(idTokenResult.token)
          .then((res) => {
            console.log("CREATE OR UPDATE USER RESPONSE", res);
            dispatch({
              type: "LOGGED_IN_USER",
              payload: {
                name: res.data.name,
              email: res.data.email,
                token: idTokenResult.token,
                role: res.data.role,
                _id: res.data._id,
              },
            });
          })
          .catch((err) => console.log(err));
        // make api request to createOrUpdate user
      })
      .catch(function (error) {
        toast.error(error.message);
      });
  };
```


React Node MERN Ecommerce Tutorial 32

## Create or update user on login

Lets go back to login page and instead of console log, lets use this response data and populate redux state with user information

``` src/pages/auth/Login.js ```

```js
const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    // console.log("Login", values);
    try {
      const result = await auth.signInWithEmailAndPassword(email, password);
      console.log("result", result);
      const { user } = result;
      const idTokenResult = await user.getIdTokenResult();

      createOrUpdateUser(idTokenResult.token)
        .then((res) => {
          console.log("CREATE OR UPDATE USER RESPONSE", res);
          dispatch({
            type: "LOGGED_IN_USER",
            payload: {
              name: res.data.name,
              email: res.data.email,
              token: idTokenResult.token,
              role: res.data.role,
              _id: res.data._id,
            },
          });
        })
        .catch((err) => console.log(err));

      history.push("/");
      // create or update user in mongodb
    } catch (error) {
      console.log(error);
      toast.error(error.message);
      setLoading(false);
    }
  };
```

React Node MERN Ecommerce Tutorial 31

## Create or update user based on the response from firebase

``` controllers/auth.js ```

```js
const User = require("../models/user");

exports.createOrUpdateUser = async (req, res) => {
  // console.log("REQ USER IN createOrUpdateUser", req.user); // name, email, picture
  const { name, picture, email } = req.user;

  const user = await User.findOneAndUpdate(
    { email },
    { name, picture },
    { new: true }
  );
  if (user) {
    res.json(user);
  } else {
    const newUser = await new User({
      email,
      name,
      picture,
    }).save();
    console.log("newUser", newUser);
    res.json(newUser);
  }
};
```

Now try login again in client and check your console.log

 ![Screen Shot 2020-07-16 at 10.42.35 AM] (https://codecontinue.sfo2.digitaloceanspaces.com/STORAGE/post/f6a2b948-ef1e-4336-98a6-15e1ac41b1d6.jpeg)

React Node MERN Ecommerce Tutorial 30

## Trying create or update user middleware

Lets try sending authtoken (firebase token) from client to server and see how we can get user info from firebase in our server. 

In Login page, each time user logs in we want to create or update user in our database. so we make a post request to `'create-or-update-user'` endpoint for doing that.


``` .env ```

```js
REACT_APP_API=http://localhost:8000/api
```

``` Login.js ```

Create a function that will make a post request to server

```js
const createOrUpdateUser = async (authtoken) => {
    return await axios.post(
      `${process.env.REACT_APP_API}/create-or-update-user`,
      {},
      {
        headers: {
          authtoken,
        },
      }
    );
  };
```

Now before we dispatch we will make request to this endpoint. This will return user response after user has been created or updated in our database.

```js
const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    // console.log("Login", values);
    try {
      const result = await auth.signInWithEmailAndPassword(email, password);
      console.log("result", result);
      const { user } = result;
      const idTokenResult = await user.getIdTokenResult();
      // dispatch({
      //   type: "LOGGED_IN_USER",
      //   payload: {
      //     email: user.email,
      //     token: idTokenResult.token,
      //   },
      // });
      createOrUpdateUser(idTokenResult.token)
        .then((res) => {
          console.log("CREATE OR UPDATE USER RESPONSE", res);
        })
        .catch((err) => console.log(err));

      history.push("/");
      // create or update user in mongodb
    } catch (error) {
      console.log(error);
      toast.error(error.message);
      setLoading(false);
    }
  };
```

Just console.log at the moment, we will come back to it soon.

Now try login and check the server console. Because we applied `authCheck` middleware in `'/create-or-update-user'` route, you can see the user data we got from firebase in server console.

If you login with google, you will also see user photo and other fields. Now this data can be used to create or update user.


React Node MERN Ecommerce Tutorial 29

Now lets create a folder inside server called `firebase` and create a file inside that called `server/firebase/index.js`

``` server/firebase/index.js ```

```js
const admin = require("firebase-admin");
var serviceAccount = require("../config/fbServiceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

module.exports = admin;
```

## Validate firebase token using authCheck middleware

 * Now we are ready to validate the firebase token. Lets send firebase token in headers from client to server to validate.
 * This validation process will be used all the time since this is the way our client communicates with our server. 
 * So let's create a middleware in our server that will do this for us. Then we will apply this middleware in the routes. 
 * Any routes that requires the user to logged in, has to apply this middleware to make sure we have valid logged in user.

``` server/middlewares/index.js ```

```js
const admin = require("../firebase");

exports.authCheck = async (req, res, next) => {
  try {
    const firebaseUser = await admin
      .auth()
      .verifyIdToken(req.headers.authtoken);
    console.log("CURRENT USER IN AUTHCHECK", firebaseUser);
    req.user = firebaseUser; // name, picture, email
    next();
  } catch (err) {
    // console.log(err);
    res.status(401).json({
      err: "Invalid or expired token",
    });
  }
};
```

Now apply as middleware in `create-or-update-user` route

Auth routes with middleware applied in routes:

``` routes.auth.js ```

```js
const express = require("express");
const router = express.Router();

// middleware
const { authCheck } = require("../middlewares");

// controller
const { createOrUpdateUser } = require("../controllers/auth");

// IMPORTANT. CHANGE METHOD TO post FROM get
router.post("/create-or-update-user", authCheck, createOrUpdateUser);

module.exports = router;
```


React Node MERN Ecommerce Tutorial 28

## Using firebase admin with node js to verify token

* Before we start creating user and save or update them in database, we need to access the firebase token that is sent to our server by react.
 * Then we need to send that token to firebase to verify.
 * Once verified, we get the user information from firebase
 * If user logged in using social network, then we also get additional info such as their profile image etc
 * That user response will always contain user email
 * We will create a new user or update existing user based on that email, so email is very important here.
 * Lets start by going to firebase to get firebase service account key which will give us firebase admin rights to query firebase to validate our token.
 * In firebase console, click on Service accounts and copy the code snippet.
 * SCREENSHOT
 * Also click on the button that says Generatre new private key and download that in your server folder `/server/config/fbServiceAccountKey.json'`

React Node MERN Ecommerce Tutorial 27

We are almost ready to create/udpate user to save in our mongo database.

Lets refactor our routes page so that instead of writing all the logic in routes, we can utilize controller methods to keep our code clean and easy to maintain.

Here is the code for updated `routes/user.js`

```js
const express = require("express");
const router = express.Router();

// controller
const { createOrUpdateUser } = require("../controllers/auth");

router.get("/create-or-update-user", createOrUpdateUser);

module.exports = router;
```

## Using Controller methods

``` controllers/auth.js ```

```js
exports.createOrUpdateUser = (req, res) => {
  res.json({
    data: "create-or-update-user response",
  });
};
```

Great. We have refactored our code and it is well organized to scale our app.

React Node MERN Ecommerce Tutorial 26

## Creating User model

This endpoint `'/create-or-update-user'` does nothing at the moment. Soon we want to create or update user based on the firebase token we receive from react app.

For that first we need to create User model so that we can define what fields should be there to create a new user.

` models/user.js `

```js
const mongoose = require("mongoose");
const { ObjectId } = mongoose.Schema;

const userSchema = new mongoose.Schema(
  {
    name: String,
    email: {
      type: String,
      required: true,
      index: true,
    },
    role: {
      type: String,
      default: "subscriber",
    },
    cart: {
      type: Array,
      default: [],
    },
    address: String,
    wishlist: [{ type: ObjectId, ref: "Product" }],
  },

  { timestamps: true }
);

module.exports = mongoose.model("User", userSchema);
```

React Node MERN Ecommerce Tutorial 25

Our server endpoint is ready. Not its time to expand it with routes and controllers.

## Setup routes

Lets create routes files so that we can bring them to server.js and apply as middleware.

``` routes/auth.js ```

```js
const express = require("express");
const router = express.Router();

router.get("/create-or-update-user", (req, res) => {
  res.json({
    data: "create-or-update-user response",
  });
});

module.exports = router;
```

Now lets import it in `server.js` and apply as middleware.

```js
// import
const authRoutes = require("./routes/auth");
```

```js
// routes
// app.get("/api", (req, res) => {
//   res.send("you hit ecom API");
// });
app.use("/api", authRoutes);
```

```js
app.use("/api", authRoutes);
```

Visit http://localhost:8000/api/create-or-update-user

It works but each time having to import routes can be annoying and you might forget to do so too.

### Load all files from routes directory automatically

Let's take another approach which will load each files from routes folder and apply as middleware so that we dont have to import use manually.

``` server.js ```

```js
// replace this
const authRoutes = require("./routes/auth");
// with this
const { readdirSync } = require("fs");
```

```js
// replace this
app.use("/api", authRoutes);
// with the following
readdirSync("./routes").map((r) => app.use("/api", require("./routes/" + r)));
```

Now each routes are loaded from routes folder. Great!

React Node MERN Ecommerce Tutorial 24

## Setup Node.js Server

Previously we installed npm packages. Now it's time to use them to create the entry point for our server. 

``` server/server.js ```

```js
const express = require("express");
const mongoose = require("mongoose");
const morgan = require("morgan");
const bodyParser = require("body-parser");
const cors = require("cors");
require("dotenv").config();

// app
const app = express();

// db
mongoose
  .connect(process.env.DATABASE, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useFindAndModify: false,
  })
  .then(() => console.log("DB Connected"));

// middlewares
app.use(morgan("dev"));
app.use(bodyParser.json({ limit: "2mb" }));
app.use(cors());

// routes
app.get("/api", (req, res) => {
  res.send("you hit ecom API");
});

const port = process.env.PORT || 8000;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});
```

Now you can visit http://localhost:8000/api to see the response from API. 

React Node MERN Ecommerce Tutorial 23

## React Ecommerce backend API setup with Node.js

Run the following commands in your terminal to start off a new project

```js
 mkdir server
 cd server
 npm init -y
 npm i express body-parser mongoose cors morgan express-jwt firebase-admin jsonwebtoken nodemon dotenv
 touch .env
 touch server.js
```

``` .env ```
```js
DATABASE='mongodb://localhost:27017/ecom'
PORT=8000
```

To start and continuously run node js project, we can use `nodemon`. 

``` package.json ```

```js
"scripts": {
    "start": "nodemon server.js"
  },
```



React Node MERN Ecommerce Tutorial 22

## Node.js server (API) for react ecommerce

It is time to move to backend. We have completed a first major section in client side.

However we want to use our own node server with mongodb, that means the firebase implementation pretty much ends here.

We use firebase to only log the user and get token. In our backend we will validate that token using **firebase admin** so that our app is well secure.

What I mean by secure is that if we don't check the validity of token in the backend then anyone can send anything as token to get access to protected routes/resources.

### Creating or updating user

Another important step will be creating or updating user on register or login and save them in our own mongo database.

Then we will come back to our login/register page in the client side and make some adjustments so that when user login, the response is received from our backend.

This response will contain all user information that belongs to that user. It will become very helpful later when we have user's cart items stored in the database. We can get all that information when user is logged in.



React Node MERN Ecommerce Tutorial 21

## Implement login with google using firebase

It's really easy to implement social login with firebase. We will use login with google in this app but you can add more social login options if you want.

We will also use ant button and icon to make it look beautiful. Here is the full code for `login.js`. I have added google login to the existing code.

``` src/pages/auth/Login.js ```

```js
// Login page with google and email/password
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { auth, googleAuthProvider } from "../../firebase";
import { toast } from "react-toastify";
import { Button } from "antd";
import { GoogleOutlined, MailOutlined } from "@ant-design/icons";

const Login = ({ history }) => {
  const [email, setEmail] = useState("kaloraat@gmail.com");
  const [password, setPassword] = useState("kkkkkk");
  const [loading, setLoading] = useState(false);

  const dispatch = useDispatch();

  const { user } = useSelector((state) => ({ ...state }));

  useEffect(() => {
    if (user && user.token) history.push("/");
  }, [user]);

  // email password login
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    // console.log("Login", values);
    try {
      const result = await auth.signInWithEmailAndPassword(email, password);
      console.log("result", result);
      const { user } = result;
      const idTokenResult = await user.getIdTokenResult();
      dispatch({
        type: "LOGGED_IN_USER",
        payload: {
          email: user.email,
          token: idTokenResult.token,
        },
      });
      history.push("/");
      // create or update user in mongodb
    } catch (error) {
      console.log(error);
      toast.error(error.message);
      setLoading(false);
    }
  };

  // google login
  const googleLogin = async () => {
    auth
      .signInWithPopup(googleAuthProvider)
      .then(async function (result) {
        const user = result.user;
        // console.log("GOOGLE", user);
        const idTokenResult = await user.getIdTokenResult();
        dispatch({
          type: "LOGGED_IN_USER",
          payload: {
            email: user.email,
            token: idTokenResult.token,
          },
        });
        // make api request to createOrUpdate user
      })
      .catch(function (error) {
        toast.error(error.message);
      });
  };

  const showLoginForm = () => (
    <>
      <input
        type="email"
        className="form-control"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        autoFocus
      />
      <br />
      <input
        type="password"
        className="form-control"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <br />
      <Button
        onClick={handleSubmit}
        type="submit"
        className="mb-3"
        type="primary"
        block
        shape="round"
        icon={<MailOutlined />}
        size="large"
      >
        Login with Email/Password
      </Button>
    </>
  );

  return (
    <div className="container p-5">
      <div className="row">
        <div className="col-md-6 offset-md-3">
          {loading ? (
            <h4 className="text-danger">Loading..</h4>
          ) : (
            <h4>Login</h4>
          )}

          {showLoginForm()}

          <Button
            className="mb-3"
            type="danger"
            block
            shape="round"
            icon={<GoogleOutlined />}
            size="large"
            onClick={googleLogin}
          >
            Login with Google
          </Button>

          <Link to="/forgot/password" className="text-danger float-right">
            Forgot Password
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Login;
```

React Node MERN Ecommerce Tutorial 20

## Redirect logged in users away

We usually want to protect pages from non logged in user. But there are times when you want to protect pages from logged in user.

Imagine a user is already logged in. Do you want o give him/her access to login/register/forgot-password pages? Of course not right?

Here is the code for redirecting users if they are already logged in.

``` ForgotPassword.js ```

```js
  // import
  const { user } = useSelector((state) => ({ ...state }));

  // redirect when component mounts using useEffect
  useEffect(() => {
    if (user && user.token) history.push("/");
  }, [user]);
```

You can repeat the same process in login, register and register complete pages.

React Node MERN Ecommerce Tutorial 19

It's time to implement forgot password feature. We don't want to lock the users away if they forgot the password right?

``` /auth/ForgotPassword.js ```

```js
import React, { useState } from "react";
import { auth } from "../../firebase";
import { toast } from "react-toastify";

const ForgotPassword = () => {
    const [email, setEmail] = useState("");
    const [loading, setLoading] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);

        const config = {
            url: process.env.REACT_APP_FORGOT_PASSWORD_REDIRECT,
            handleCodeInApp: true,
        };

        await auth
            .sendPasswordResetEmail(email, config)
            .then(() => {
                setEmail("");
                setLoading(false);
                toast.success(`Check your email for password reset link`);
            })
            .catch((error) => {
                setLoading(false);
                toast.success(error.message);
                console.log("error on password reset email", error);
            });
    };

    return (
        <div className="container col-md-6 offset-md-3 p-5">
            {loading ? (
                <h4 className="text-danger">Loading..</h4>
            ) : (
                    <h4>Forgot Password</h4>
                )}

            <form onSubmit={handleSubmit}>
                <input
                    type="email"
                    className="form-control"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Type your email"
                    autoFocus
                />
                <br />
                <button type="submit" className="btn btn-raised" disabled={!email}>
                    Submit
        </button>
            </form>
        </div>
    );
};

export default ForgotPassword;
```

Awesome. Now you and visit `/forgot/password` page or click on the forgot password link in `login.js`

If you enter valid email, you will receive an email with the link. Click on that link to reset your password. you will get redirected to login page once that is done.


React Node MERN Ecommerce Tutorial 18

## Conditional rendering in react

Conditionally show/hide login/register/logout links in `Header.js`

``` src/components/nav/Header/js ```

```js
 // import
import { useSelector, useDispatch } from "react-redux";
```

```js
// get user from state
const { user } = useSelector((state) => ({ ...state }));
```

```js
// conditionally show links
{
    !user && (
        <Item key="register" icon={<UserAddOutlined />} className="float-right">
            <Link to="/register">Register</Link>
        </Item>
    )
}

{
    !user && (
        <Item key="login" icon={<UserOutlined />} className="float-right">
            <Link to="/login">Login</Link>
        </Item>
    )
}

{
    user && (
        <Item
            key="logout"
            icon={<UserOutlined />}
            className="float-right"
            onClick={logout}
        >
            Logout
        </Item>
    )
}
```

now everything works great. login/register links are visible if we dont have logged in user. logout is visible if we have logged in user.

React Node MERN Ecommerce Tutorial 17

## Implement firebase login with email and password

``` src/pages/auth/Login.js ```

```js
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useDispatch } from "react-redux";
import { auth } from "../../firebase";
import { toast } from "react-toastify";
import axios from "axios";

const Login = ({ history }) => {
    const [email, setEmail] = useState("kaloraat@gmail.com");
    const [password, setPassword] = useState("kkkkkk");
    const [loading, setLoading] = useState(false);

    const dispatch = useDispatch();

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        // console.log("Login", values);
        try {
            const result = await auth.signInWithEmailAndPassword(email, password);
            console.log("result", result);
            const { user } = result;
            const idTokenResult = await user.getIdTokenResult();
            dispatch({
                type: "LOGGED_IN_USER",
                payload: {
                    email: user.email,
                    token: idTokenResult.token,
                },
            });
            history.push("/");
            // create or update user in mongodb
        } catch (error) {
            console.log(error);
            toast.error(error.message);
            setLoading(false);
        }
    };

    const showLoginForm = () => (
        <form onSubmit={handleSubmit}>
            <input
                type="email"
                className="form-control"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoFocus
            />
            <br />
            <input
                type="password"
                className="form-control"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <br />
            <button type="submit" className="btn btn-raised">
                Login
      </button>
        </form>
    );

    return (
        <div className="container p-5">
            <div className="row">
                <div className="col-md-6 offset-md-3">
                    {loading ? (
                        <h4 className="text-danger">Loading..</h4>
                    ) : (
                            <h4>Login</h4>
                        )}
                    {showLoginForm()}
                    <Link to="/forgot/password" className="text-danger float-right">
                        Forgot Password
          </Link>
                </div>
            </div>
        </div>
    );
};

export default Login;
```

Great. now a user can register, login and logout

React Node MERN Ecommerce Tutorial 16

## Implement logout feature

Because we have a registered user, we are automatically logged in.

Let's implement logout feature in our `Header.js`. Then we will setup login page so that users can login with Email and password and also with google.

``` Header.js ```

```js
// code changes with logout function
import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";
import firebase from "firebase";
import { useDispatch } from "react-redux";
import { Menu } from "antd";
import {
    AppstoreOutlined,
    UserOutlined,
    UserAddOutlined,
    SettingOutlined,
} from "@ant-design/icons";
import "antd/dist/antd.css"; // import ant css

const { SubMenu } = Menu;
// destructure ItemGroup and Item from Menu
const { ItemGroup, Item } = Menu;

const Header = () => {
    const [current, setCurrent] = useState("home");

    const dispatch = useDispatch();
    let history = useHistory();

    const logout = () => {
        firebase.auth().signOut();
        dispatch({
            type: "LOGGED_IN_USER",
            payload: null,
        });
        history.push("/login");
    };

    return (
        <Menu
            onClick={(e) => setCurrent(e.key)}
            selectedKeys={[current]}
            mode="horizontal"
        >
            <Item key="home" icon={<AppstoreOutlined />}>
                <Link to="/">home</Link>
            </Item>

            <SubMenu icon={<SettingOutlined />} title="Admin">
                <ItemGroup title="Item 1">
                    <Item key="setting:1">Option 1</Item>
                    <Item key="setting:2">Option 2</Item>
                </ItemGroup>
            </SubMenu>

            <Item key="register" icon={<UserAddOutlined />} className="float-right">
                <Link to="/register">Register</Link>
            </Item>
            <Item key="login" icon={<UserOutlined />} className="float-right">
                <Link to="/login">Login</Link>
            </Item>

            <Item
                key="logout"
                icon={<UserOutlined />}
                className="float-right"
                onClick={logout}
            >
                Logout
      </Item>
        </Menu>
    );
};

export default Header;
```

React Node MERN Ecommerce Tutorial 15

## Firebase `onAuthStateChanged`

Now user has been registered. you can see user in firebase auth. you can also see user in our redux state. 

But as soon as we refresh the page, user is no longer there.

To keep track of user auth state, firebase provides `onAuthStateChanged` method. We can use that in `App.js` to always keep track of logged in user state. 

Here we will `dispatch` the user credentials to our redux state each time auth state changes, for example on login/logout, page refresh etc

Moving on, we will add **logout** and **forgot password** features too.

``` App.js ```

```js
import React, { useEffect } from "react";
import { Switch, Route } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import { auth } from "./firebase";
import { useDispatch } from "react-redux";

import Header from "./components/nav/Header";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import RegisterComplete from "./components/auth/RegisterComplete";
import Home from "./pages/Home";

const App = () => {
    const dispatch = useDispatch();

    // to check firebase auth state
    useEffect(() => {
        // console.log("APP.JS USEEFFCT");
        const unsubscribe = auth.onAuthStateChanged(async (user) => {
            console.log("APP.JS USEEFFCT");
            if (user) {
                const idTokenResult = await user.getIdTokenResult();
                console.log("refreshToken", idTokenResult.token);

                dispatch({
                    type: "LOGGED_IN_USER",
                    payload: {
                        email: user.email,
                        token: idTokenResult.token,
                    },
                });
            }
        });
        //
        return () => unsubscribe();
    }, []);

    return (
        <>
            <Header />
            <ToastContainer />
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/login" component={Login} />
                <Route exact path="/register" component={Register} />
                <Route exact path="/register/complete" component={RegisterComplete} />
            </Switch>
        </>
    );
};

export default App;

```

Now when you refresh the page, user is always there in redux state

React Node MERN Ecommerce Tutorial 14

## Firebase Login with email and password

Now user can receive email on register. If they click on that link, they are landed on `/register/complete/?apiKey=`

We need to create that page so that user can enter their desired password to complete registration.

Once we have their email and password, we can complete their registration process. Later we will save the user in our own database, not only in firebase... but for now let's just follow along.

``` auth/RegisterComplete.js ```

```js
import React, { useState, useEffect } from "react";
import { auth } from "../../firebase";
import { toast } from "react-toastify";
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";

const RegisterComplete = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    let history = useHistory();

    const dispatch = useDispatch();

    useEffect(() => {
        setEmail(window.localStorage.getItem("emailForRegistration"));
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();
        console.log("window.location.href", window.location.href);

        if (!email || !password) {
            toast.error("Email and password is required");
            return;
        }

        if (password.length < 6) {
            toast.error("Password must at at least 6 characters long");
            return;
        }

        try {
            // make sure to use async in the next callback / the second argument to register
            const result = await auth.signInWithEmailLink(
                email,
                window.location.href
            );
            //   if user email is verified
            if (result.user.emailVerified) {
                window.localStorage.removeItem("emailForRegistration");
                console.log("email verified", result);
                let user = auth.currentUser;
                await user.updatePassword(password);

                const idTokenResult = await user.getIdTokenResult();
                dispatch({
                    type: "LOGGED_IN_USER",
                    payload: {
                        email: user.email,
                        token: idTokenResult.token,
                    },
                });
                console.log("before dispatch token > ", idTokenResult.token);
                history.push("/");
            }
        } catch (error) {
            console.log("register complete error", error.message);
            toast.error(error.message);
        }
    };

    const completeRegistrationForm = () => (
        <form onSubmit={handleSubmit}>
            <input type="email" className="form-control" value={email} disabled />
            <br />
            <input
                type="password"
                className="form-control"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Password"
                autoFocus
            />
            <br />
            <button type="submit" className="btn btn-raised">
                Complete Registration
      </button>
        </form>
    );

    return (
        <div className="container p-5">
            <div className="row">
                <div className="col-md-6 offset-md-3">
                    <h4>Complete registration</h4>
                    {completeRegistrationForm()}
                </div>
            </div>
        </div>
    );
};

export default RegisterComplete;
```

Make sure to import  `RegisterComplete` component in `App.js`

```js
// import 
import RegisterComplete from "./components/auth/RegisterComplete";

// create a route
<Route exact path="/register/complete" component={RegisterComplete} />
```

React Node MERN Ecommerce Tutorial 13

## Improve Register page

 * Move hard coded url to .env file
 * Move toast container and css to App.js so that we don't have to import them in each pages/components of our app

```js
 // Register.js
const config = {
    url: process.env.REACT_APP_REGISTER_REDIRECT_URL,
    handleCodeInApp: true,
};
```

``` .env ```

```js
REACT_APP_REGISTER_REDIRECT_URL = http://localhost:3000/register/complete
```

Now move `ToastContiner` to `App.js`

```js
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
// put inside return <ToastContainer />
```

Then put inside `return` of `App.js` 

```js
  return (
    <>
      <Header />
      <ToastContainer />
      <Switch>
        <Route exact path="/" component={Home} />
        // rest of code
      </Switch>
    </>
  );
```

To get rid of warning `findDOMNode` is deprecated from your browser console, go to `index.js` and remove `StriceMode`

React Node MERN Ecommerce Tutorial 12

 ## Implement user registration

First we will send them confirmation email to make sure they are not entering whatever email address to login this will help us prevent fake users logging into our app.

In Register page, we want to collect user email for registration. Before saving user to database we will send them confirmation email.

If they have access to that email means that they are using valid email address. Once they click on the link that we will send them in email, they will land on another page called register/complete (we have to create this page soon)

Lets install few npm packages we will need

```js
npm i axios react-toastify
``` 

Here is the full code of Register.js

``` /src/pages/Register.js ```

```js
import React, { useState, useEffect } from "react";
import { auth } from "../../firebase";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const Register = () => {
    const [email, setEmail] = useState("kaloraat@gmail.com");

    const handleSubmit = async (e) => {
        e.preventDefault();

        const config = {
            url: "http://localhost:3000/register/complete",
            handleCodeInApp: true,
        };
        await auth.sendSignInLinkToEmail(email, config);
        toast.success(
            `Email is sent to ${email}. Click the link to complete your registration`
        );
        // save user email in localstorage to be used later to complete registration
        window.localStorage.setItem("emailForRegistration", email);
        // clear state
        setEmail("");
    };

    const registerForm = () => (
        <form onSubmit={handleSubmit}>
            <input
                type="email"
                className="form-control"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoFocus
            />
            <br />
            <button type="submit" className="btn btn-raised">
                Register
      </button>
        </form>
    );

    return (
        <>
            <div className="container p-5">
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <h4>Register</h4>
                        <ToastContainer />
                        {registerForm()}
                    </div>
                </div>
            </div>
        </>
    );
};

export default Register;
```

React Node MERN Ecommerce Tutorial 11

## Using bootstrap material css in react

Let's add bootstrap material as a css framework so that we can easily create responsive layout

Put the following code in the head section in `public/index.html` 

```html
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
```

Now let's try using bootstrap css clasess in our login and register links and see how they work.

``` Header.js ```

```js
<Item key="register" icon={<UserAddOutlined />} className="float-right">
    <Link to="/register">Register</Link>
</Item>
<Item key="login" icon={<UserOutlined />} className="float-right">
    <Link to="/login">Login</Link>
</Item>
```

React Node MERN Ecommerce Tutorial 10

We did setup our react app along with firebase, react router and redux. Now it will all start to get more and more exciting. Let's begin by working on the login page.

## Create register and login pages

``` /src/pages/auth/Login.js ```

```js
import React from "react";

const Login = () => {
  return (
    <>
      <p>Login</p>
    </>
  );
};

export default Login;
```

``` /src/pages/auth/Register.js ```

```js
import React from "react";

const Register = () => {
  return (
    <>
      <p>Register</p>
    </>
  );
};

export default Register;
```

## Create Home page

Let's also create one more page called home

``` /src/pages/Home.js ```

```js
import React from "react";

const Home = () => {
  return (
    <>
      <p>Home</p>
    </>
  );
};

export default Home;
```

Now import Login and Home component in App.js

``` App.js ```

```js
import React from "react";
import { Switch, Route } from "react-router-dom";
import Header from "./components/nav/Header";
import Login from "./pages/auth/Login";
import Home from "./pages/Home";

const App = () => {
  return (
    <>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
      </Switch>
    </>
  );
};

export default App;
```

By now you have implemented routing system. You can click on nav links and go to login, register and home page.

React Node MERN Ecommerce Tutorial 9

## Setup redux with react

Let's setup redux, so that we can finally move on to building our ecommerce app by creating pages.

``` src/index.js ```

```js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
// redux
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import { rootReducer } from "./reducers";
import { composeWithDevTools } from "redux-devtools-extension";

// store
const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

```

At this point our app will show error that says `Module not found: Can't resolve './reducers' `

Thats because we have imported rootReducer but that does not exist, Lets create `reducers` folder with two files `index.js` and `userReducer.js`

``` src/reducers/userReducer.js ```

```js
export function userReducer(state = null, action) {
  switch (action.type) {
    case "LOGGED_IN_USER":
      return action.payload;
    case "LOGOUT":
      return action.payload;
    default:
      return state;
  }
}

```

It's time to create a `rootReducer`, which will combine multiple reducers. At the moment we have only `userReducer` but we will add more reducers later.
``` src/reducers/index.js ```

``` src/reducers/index.js ```

```js
import { combineReducers } from "redux";
import { userReducer } from "./userReducer";

export const rootReducer = combineReducers({
  user: userReducer,
});

```

Great. Now if you have a redux extension installed in your chrome browser you should be able to see the redux state. At the moment our state has nothing but `user: {}`

 ![React with redux] (https://codecontinue.sfo2.digitaloceanspaces.com/STORAGE/post/8c007c1c-790b-4e87-8663-6a2c6dce5bcf.jpeg)


React Node MERN Ecommerce Tutorial 8

There is a bit more work to be done before we start implementing login system to our app. We have to setup routing system with react router. We also have to setup redux. But first lets start with navigation.

#### Move navigation to its own component

Previously we wrote our navigation inside `App.js`. Soon we will use `App.js` as an entry point for our react app. This is where we will import all the components and implement routing system using react-router-dom.

For now, lets focus on moving navigation to its own component.

```/src/components/nav/Header.js```

You can pretty much copy all the code from `App.js` into `Header.js` and just change the component name.

```App.js```

```js
import React from "react";
import Header from "./components/nav/Header";

const App = () => {
  return (
    <>
      <Header />
    </>
  );
};

export default App;
```

Full code of `Header.js`

```js
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Menu } from "antd";
import {
  AppstoreOutlined,
  UserOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "antd/dist/antd.css"; // import ant css

const { SubMenu } = Menu;
// destructure ItemGroup and Item from Menu
const { ItemGroup, Item } = Menu;

const Header = () => {
  const [current, setCurrent] = useState("home");

  return (
    <Menu
      onClick={(e) => setCurrent(e.key)}
      selectedKeys={[current]}
      mode="horizontal"
    >
      <Item key="home" icon={<AppstoreOutlined />}>
        <Link to="/">home</Link>
      </Item>

      <SubMenu icon={<SettingOutlined />} title="Admin">
        <ItemGroup title="Item 1">
          <Item key="setting:1">Option 1</Item>
          <Item key="setting:2">Option 2</Item>
        </ItemGroup>
      </SubMenu>
      <Item key="login" icon={<UserOutlined />}>
        <Link to="/login">Login</Link>
      </Item>
    </Menu>
  );
};

export default Header;

```



React Node MERN Ecommerce Tutorial 7

## Installing firebase

```js
npm i firebase
```

Lets add firebase config to `.env` file

``` .env ```

```js
REACT_APP_FB_API_KEY=XXX
REACT_APP_FB_AUTH_DOMAIN=XXX.firebaseapp.com
REACT_APP_FB_PROJECT_ID=XXX
REACT_APP_FB_APP_ID=XXX
```

### Initialize Firebase
```/src/firebase.js```

```js
// import firebase from "firebase/app";
import * as firebase from "firebase";

var firebaseConfig = {
  apiKey: process.env.REACT_APP_FB_API_KEY,
  authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FB_PROJECT_ID,
  appId: process.env.REACT_APP_FB_APP_ID,
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// export default firebase;
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
```




React Node MERN Ecommerce Tutorial 6

## Firebase setup

Now that we have our basic app setup with navigation. Let's move on to create pages. First we need to implement login system.

### Login system with firebase

Instead of writing our own login/register system, we will use firebase authentication. 

#### Benefits of firebase authentication

* Fully secure login system with refresh token to continuously keep the user logged in
* Easy to implement social login with Google, Facebook etc
* Completely free to use

Head over to [Firebase] (https://firebase.google.com/) and create a new app. Once you create a new app, you will get all project configuration needed.

It should look something like this:

```JS
var firebaseConfig = {
    apiKey: "XXX",
    authDomain: "XXX.firebaseapp.com",
    databaseURL: "https://XXX.firebaseio.com",
    projectId: "XXX",
    storageBucket: "XXX.appspot.com",
    messagingSenderId: "XXX",
    appId: "XXX"
};
```

Now we are ready to implement firebase into our react app.

### Activate Google login

In this project, we will implement **login with email and password** and also **login with google**. You can also add facebook and other services if you wish.

**IMPORTANT**

Make sure to click on Authentication(in the left sidebar) and go to signin methods. There you should enable **Google** as signin methods.



Recent Posts

Categories