Week 8 Assignment

Overview

This week's assignment continues to build upon the Shopping List application we developed in Week 7. We will add authentication to our application using Firebase Authentication and GitHub OAuth.

Prerequisites

Before starting this assignment, you should have completed the Week 7 Assignment and have a working shopping list application. If you have not completed the Week 7 assignment, you have three options:

1. Use another student's Week 7 Assignment as a starting point for this week's assignment. Refer to the list of student repositories.

2. Use your assignment solution from Week 3 as a starting point for this week's assignment. Refer to the Week 3 Assignment for instructions.

3. Start from scratch. To practice authentication, you really just need a simple application that has a login page and a protected page.

Part 1: Create a Firebase Project

Follow this step-by-step guide to create a Firebase project with GitHub OAuth web app.

Part 2: Add Firebase Authentication

npm install firebase
npm install encoding

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getAuth } from "firebase/auth";
 
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
 
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

NEXT_PUBLIC_FIREBASE_API_KEY=""
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
NEXT_PUBLIC_FIREBASE_PROJECT_ID=""
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=""
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=""
NEXT_PUBLIC_FIREBASE_APP_ID=""

Part 3: Create AuthContext and useAuth Hook

In the _utils folder, create a file called auth-context.js and add the following code.

"use client";
 
import { useContext, createContext, useState, useEffect } from "react";
import {
  signInWithPopup,
  signOut,
  onAuthStateChanged,
  GithubAuthProvider,
} from "firebase/auth";
import { auth } from "./firebase";
 
const AuthContext = createContext();
 
export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);
 
  const gitHubSignIn = () => {
    const provider = new GithubAuthProvider();
    return signInWithPopup(auth, provider);
  };
 
  const firebaseSignOut = () => {
    return signOut(auth);
  };
 
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => unsubscribe();
  }, [user]);
 
  return (
    <AuthContext.Provider value={{ user, gitHubSignIn, firebaseSignOut }}>
      {children}
    </AuthContext.Provider>
  );
};
 
export const useUserAuth = () => {
  return useContext(AuthContext);
};

Part 4: Add AuthContextProvider to layout.js

In the week-8 folder, create a file called layout.js and add the following code.

import { AuthContextProvider } from "./_utils/auth-context";
 
const Layout = ({ children }) => {
  return <AuthContextProvider>{children}</AuthContextProvider>;
};
 
export default Layout;

Part 5: Add a Landing Page with Login Button

In the week-8 folder, create a page.js file. This will be the landing page for our application. Display a login button if the user is not logged in. If the user is logged in, display a welcome message, a logout button, and a link to the shopping list page.

The following code snippets may be helpful:

import { useUserAuth } from "./_utils/auth-context";
 
const { user, gitHubSignIn, firebaseSignOut } = useUserAuth();
 
await gitHubSignIn();
 
await firebaseSignOut();
 
<p>
  Welcome, {user.displayName} ({user.email})
</p>;

• user is the user object returned from Firebase Authentication. If the user is not logged in, the value will be null.
• gitHubSignIn is a function that will open a popup window to allow the user to sign in with GitHub.
• logOut is a function that will log the user out.

Part 6: Protect the Shopping List Page

Even though a user can't see a link to the shopping list page without being logged in, we should still protect the page so that if a user tries to access the page directly, they won't be able to see the shopping list.

In the week-8/shopping-list/page.js file, check if the user is logged in by using the useUserAuth hook and if the user object is null, do not render the shopping list page. Optional: You can redirect the user to the landing page if you want.

Part 7: Deploy to Vercel (Optional)

If you wish to deploy your application to Vercel, you will need to make the following changes.

Extras

A few things you can do to improve your application:

• After logging in, redirect the user to the shopping list page.
• Add a logout button to the shopping list page.
• Add a profile page that displays the user's profile information.
• Add other OAuth providers such as Google.

Example Output

https://cprg306-assignments.vercel.app/week-8 (opens in a new tab)

Also, try to go to the shopping list page directly without signing in https://cprg306-assignments.vercel.app/week-8/shopping-list (opens in a new tab)

Assignment Submission

The instructor will be able to find your assignment in your GitHub repository. Make sure you have committed and pushed your changes to GitHub before the assignment deadline.