Building a website that sets up fake userAuthContext that carries out authentication.

#react #tailwindcss #javascript #github

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

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.

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

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.