Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Setup
  • Base: Users must login to post, posts have author identity
  • Comfortable: Identity in navbar
  • More Comfortable: Identity for likes and comments
  • Submission
  • Reference Solution
  • Sample Implementation Firebase Auth Legacy (Slightly different code)
  1. 2: Full Stack
  2. 2.E: Exercises

2.E.4: Instagram Auth

Previous2.E.3: Instagram PostsNext2.E.5: Instagram Routes

Last updated 1 year ago

Learning Objectives

  1. Know how to decompose complex components into multiple smaller, more manageable components

  2. Understand where to put authentication in a UX flow to lure users in and give them as much reason to login as possible

  3. Understand how to use Firebase Authentication

  4. Know how to read documentation to apply a new technology

Introduction

We will build on the previous exercise to incorporate authentication and user information on all posts, likes and comments.

Setup

  1. Start with the code we wrote in the previous exercise in our forked and cloned copy of the

  2. Set up Firebase Authentication in our local firebase.jsx as per the

    1. Under "Add and initialize the Authentication SDK", we will need to import getAuth and export a named export with the Auth object, like export const auth = getAuth(firebaseApp);

    2. Skip "(Optional) Prototype and test with Firebase Local Emulator Suite" and everything below it for now; that content will be covered in the next step.

  3. in the Firebase console (Step 3 in the linked docs)

    1. Once in the Auth section of our app in the Firebase console, click "Get started" button

    2. Choose the Email/Password sign-in method from the menu

    3. Enable Email/Password

  4. Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.

Base: Users must login to post, posts have author identity

  1. Refactor app into multiple components each in separate files for maintainability.

    1. Now that our app is starting to become complex (100+ lines of news feed code alone in App.jsx), we may want to consider refactoring App into multiple components for maintainability before adding new functionality such as auth.

    2. In our reference solution we separate App.jsx, Composer.jsx (the form to create new posts) and NewsFeed.jsx files for their respective components and put them in a components folder in src that contains the component .jsx files and their relevant .css files.

      1. This will require some re-wiring of relative imports to files such as src/firebase.jsx and in files such as src/main.jsx.

    3. If you customised your UI in previous exercises, feel free to decompose your components however makes sense for your UI.

  2. Update our user flow such that a user needs to log in to post. They should still see the news feed (without composer) before logging in (to lure them in). But when they are not logged in, we display a button to "Create Account or Sign In" instead of the composer.

    1. Consider storing loggedInUser as state in App component and using the onAuthStateChanged listener in App's componentDidMount to keep loggedInUser updated. App can use loggedInUser to determine whether to render the "Create Account or Sign In" button or the composer.

    2. Consider also storing shouldRenderAuthForm boolean state in App component and creating a class method toggleAuthForm in App that toggles shouldRenderAuthForm. When an unauthenticated user clicks "Create Account or Sign In" button, App can call toggleAuthForm and render the auth form instead of the news feed. Once the user authenticates, auth form logic can call toggleAuthForm again for App to render composer and news feed instead of auth form.

    3. Create a new AuthForm component in components/AuthForm.jsx for the auth form and import it where relevant in App.

  3. All posts should now render the author's identity as part of the post.

Import Bootstrap CSS to use React Bootstrap

Warning
(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

Test using incognito mode

Comfortable: Identity in navbar

More Comfortable: Identity for likes and comments

  1. If you haven't already, implement like and/or comment functionality for posts from Comfortable and More Comfortable in the Instagram Posts exercise

  2. Likes should now be associated with a user's identity, and a user can only like a post at most once

  3. Comments should show the author's identity like posts

Submission

Submit a pull request to the main branch of Rocket's Instagram repo and share your PR link in your section Slack channel.

Reference Solution

To play with the solution, clone it, run npm i and npm start. We did not host a reference deployment for this solution because we will build on this repo in the following exercises and will host a reference deployment for the final one.

Sample Implementation Firebase Auth Legacy (Slightly different code)

Separate composer state and logic into a Composer component in Composer.jsx and news feed state and logic into a NewsFeed component in NewsFeed.jsx. Import both Composer and NewsFeed in App.jsx to render them in the App component as before. Revise for a refresher.

You may find the and helpful for email validation and hiding passwords in the password field

If we wish to use React Bootstrap, don't forget to in either main.jsx or App.jsx.

If you see the following Webpack warning, this is an , non-breaking and should be resolved by Bootstrap soon. Can ignore for now.

Use to open our app without storing logins across sessions. Without implementing logout functionality, our browsers may cache logins making it more difficult to test login functionality more than once when not in incognito mode.

Display the logged-in user's identity in a navbar at the top of the app. Consider using for this.

If you would like to deploy your app to the internet, follow Vitejs GitHub Pages .

Here is for this exercise. You can do better!

Please checkout the finished code in this , ensure that you're on the auth branch. If you want to test out the application on your machine you will need to have registered an Application on Firebase with Realtime Database, Storage and Authentication activated. Use the sample.env within the application to create an .env file with your Firebase credentials. With this in mind if you want to run the application on your machine you will need to install the dependencies with the command npm install after the installation you can then run the application with the command npm run dev. Then open a browser of your choice and navigate to http://localhost:5173.

🏭
Rocket Academy Instagram starter repo
official Firebase documentation
Enable Email/Password sign-in
React docs for composing components
email HTML input type
password HTML input type
import Bootstrap CSS
open Bootstrap issue
incognito mode
React Bootstrap's Navbar component
deployment instructions here
reference code
repository
Firebase Auth
Firebase Auth Functionalities
Firebase Auth