2.E.4: Instagram Auth
Last updated
Last updated
Know how to decompose complex components into multiple smaller, more manageable components
Understand where to put authentication in a UX flow to lure users in and give them as much reason to login as possible
Understand how to use Firebase Authentication
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.
Start with the code we wrote in the previous exercise in our forked and cloned copy of the
Set up Firebase Authentication in our local firebase.jsx as per the
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);
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.
in the Firebase console (Step 3 in the linked docs)
Once in the Auth section of our app in the Firebase console, click "Get started" button
Choose the Email/Password sign-in method from the menu
Enable Email/Password
Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.
Refactor app into multiple components each in separate files for maintainability.
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.
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.
This will require some re-wiring of relative imports to files such as src/firebase.jsx and in files such as src/main.jsx.
If you customised your UI in previous exercises, feel free to decompose your components however makes sense for your UI.
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.
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.
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.
Create a new AuthForm component in components/AuthForm.jsx for the auth form and import it where relevant in App.
All posts should now render the author's identity as part of the post.
If you haven't already, implement like and/or comment functionality for posts from Comfortable and More Comfortable in the Instagram Posts exercise
Likes should now be associated with a user's identity, and a user can only like a post at most once
Comments should show the author's identity like posts
Submit a pull request to the main branch of Rocket's Instagram repo and share your PR link in your section Slack channel.
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.
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.