Building a website that sets up fake userAuthContext that carries out authentication.
Tags: react, tailwindcss, javascript, github
Published: 2023-01-08 08:52:56

During the AltSchool second semester examination, we were asked to pick ONE question out of four.

![Examination Questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v26tgzwfw58m5dahs9bu.PNG)

I chose to do number 3, where i was expected to implement nested routes, navigation bar, SEO and userAuthContext that carries out fake authentication.

Honestly, i didn't know how to begin but after taking a few days, i decided to start by implementing the parts i am familiar with.

I began by installing my react app with `npx create-react-app altschool-react-examination` using my git bash in my local machine.

After opening the file in my Vscode, i installed two dependencies that i needed for my Routers, Register page and Sign in page.

- `npm install react-router-dom@6`

- `npm install react-hook-form`

I started by creating the pages and then the style pages. I built my UI to look like the AltSchool landing page in terms of a few content.

![Landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwvhxfa76f9j2oy7u0mn.PNG)

After i was done with the UI part of the examination, i was confused as to how to implement the authentication part, i spent a lot sleepless nights watching YouTube videos on ContextAPI, replayed live class videos and at some point i almost gave up. 

With encouragement from my Altschool buddy Chukwurah Victor, i kept searching till i came across a video that explained it better and then i created the userContext file with the code below:

```
import { createContext, useContext, useState } from "react";
import {useNavigate}  from "react-router-dom";

export const userContext = createContext({
  user: null,
  logIn: () => {},
  logOut: () => {},
});

const USER = { name: "Guest", isGuestUser: true };

export function UserContextProvider({ children }) {
  const [user, setUser] = useState(USER);
  let navigate = useNavigate();
  function logIn(username) {
    setUser({ isGuestUser: false, name: username });
    navigate("/dashboard")
  }
  function logOut() {
    setUser(USER);
    navigate("/login")
  }
  return (
    <userContext.Provider value={{ user, logIn, logOut }}>
      {children}
    </userContext.Provider>
  );
}

export function useUserContext() {
  const { user, logIn, logOut } = useContext(userContext);

  return { user, logIn, logOut };
}
```
And to Authenticate the user, i created an `Auth.js` file with the code below:

```
import React from "react";
import { useUserContext } from "../context/UserContext";


const Auth = () => {
  const { user } = useUserContext();
  return <>{user.isGuestUser ? "" : ""}</>;
};

export default Auth;
```

When one logs in, it authenticates and displays your username

![User Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm48xybnbux77sfixmv8.PNG)

I was happy that i was able to finish the examination just in time to submit it. For the holiday challenge, we were asked to modify the examination or add new features. 

I looked at the work i had done the UI wasn't appealing and the code was bulky since i used plain CSS. For the holiday project, i decided to improve on the codebase by using Tailwindcss to style my project instead.


![login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qufy4c4cuanx6188i9te.PNG)

This provided an avenue as i was just learning Tailwindcss and i decided to improve my skills by applying it. I hosted both project using Netlify.

- **Old codebase with Plain CSS**

![Old](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5jaozvvttzmutu3stnu.PNG) 

- **New Codebase with Tailwindcss**

![New](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x544bnuo03b2kkj1hvgk.PNG)

All round i can say i really enjoyed working on the project and you can find below the links to the GitHub repositories and Live links.

## GitHub Repositories

- Examination: [https://github.com/Mataoseeker/Altschool_React_Examination]()

- Holiday Challenge: [https://github.com/Mataoseeker/holiday_challenge]()

## Live Links

- Examination: [https://altschool-react-examination.netlify.app/]()

- Holiday Challenge: [https://holiday-challenge-01.netlify.app/]()


Learning continues.. Thank you for reading my article.