2.E.4: Instagram Auth
- 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
We will build on the previous exercise to incorporate authentication and user information on all posts, likes and comments.
- 2.Set up Firebase Authentication in our local
firebase.jsas per the official Firebase documentation
- 1.Under "Add and initialize the Authentication SDK", we will need to import
getAuthand 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.Enable Email/Password sign-in 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.
- 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.js), we may want to consider refactoring
Appinto multiple components for maintainability before adding new functionality such as auth.
- 2.In our reference solution we separate
Composer.js(the form to create new posts) and
NewsFeed.jsfiles for their respective components and put them in a
srcthat contains the component
.jsfiles and their relevant
- 1.This will require some re-wiring of relative imports to files such as
src/firebase.jsand in files such as
- 3.Separate composer state and logic into a
Composer.jsand news feed state and logic into a
NewsFeed.js. Import both
App.jsto render them in the
Appcomponent as before. Revise React docs for composing components for a refresher.
- 4.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
loggedInUseras state in
Appcomponent and using the
loggedInUserto determine whether to render the "Create Account or Sign In" button or the composer.
- 2.Consider also storing
shouldRenderAuthFormboolean state in
Appcomponent and creating a class method
shouldRenderAuthForm. When an unauthenticated user clicks "Create Account or Sign In" button,
toggleAuthFormand render the auth form instead of the news feed. Once the user authenticates, auth form logic can call
Appto render composer and news feed instead of auth form.
- 3.All posts should now render the author's identity as part of the post.
Import Bootstrap CSS to use React Bootstrap
(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Test using incognito mode
Use incognito mode 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.
- 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
Submit a pull request to the
mainbranch of Rocket's Instagram repo and share your PR link in your section Slack channel.
To play with the solution, clone it, run
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.
Firebase Auth Functionalities
Please checkout the finished code in this repository, ensure that you're on the
authbranch. 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.envwithin the application to create an
.envfile 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 installafter the installation you can then run the application with the command