Build A Blog Site With React, Redux Firebase And MaterializeCSS (Part 7)

<h1>Repository <h3>React <p dir="auto"><span><a href="https://github.com/facebook/react" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/facebook/react <h3>Material-ui <p dir="auto"><span><a href="https://github.com/mui-org/material-ui" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/mui-org/material-ui <h3>My Github Address <p dir="auto"><span><a href="https://github.com/pckurdu" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu <h3>This Project Github Address <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-7" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-7 <h1>What Will I Learn? <ul> <li>You will learn how to enable the firebase auth. <li>You will learn <code>firebaseReducer in react-redux-firebase. <li>You will learn <code>isLoaded and <code>isEmpty in firebaseReducer. <li>You will learn <code>connect module in react-redux. <li>You will learn <code>timestampsInSnapshots in firestore. <li>You will learn to create input and button in <code>materializeCSS. <h1>Requirements <ul> <li>text editor (I used visual studio code editor) <li>Basic javascript information <li>Basic react information <h1>Difficulty <ul> <li>Basic <h1>Tutorial Contents <p dir="auto">Hello to everyone, <p dir="auto">In this tutorial we will make the necessary adjustments for <code>firebase auth. We will create the necessary infrastructure to perform firebase auth operations with redux structure. We will also design components for login and signup within the react application. <p dir="auto">We will make <code>Email / Password method enable within the firebase project. We will contact the firebase auth using the <code>Email / Password method functions with the react application. We will also create a test user and create the user's id value. <p dir="auto">In the second section we will create <code>firebaseReducer to use firebase auth in redux structure. We will learn how to access and use firebaseReducer elements from component. <p dir="auto">Then we will eliminate the errors that occur in the application and edit the components to be <code>login and <code>signup. We will use <code>materializecss when creating the designs and we will process the events when the button is clicked. <p dir="auto">It is always best to separate tutorials into sections to better understand: <ul> <li>Setup Sign-in Method In Firebase <li>Building Infrastructure For Access to Auth in Redux <li>Fix Errors <li>Create SignIn Component <li>Create SignUp Component <p dir="auto">Let’s start and enjoy. <h3>1-Setup Sign-in Method In Firebase <p dir="auto">In this section we will open auth settings on firebase web page and create the first user. <p dir="auto">We can perform auth operations very easily in application by using firebase's authorization process. In the application we can provide the user's signup and user’s login with firebase auth. <p dir="auto">We can use <code>auth operations in multiple ways. These ways are set to passive by default. We can enable the way we want to use in the application. <p dir="auto">In the firebase we can set the <code>setup sign-in method.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmRDkMZwkBiRUMHqR3M5HMbBQReY9nGFNWBphw21BbRZXq/react1.gif" alt="react1.gif" /><br /> <br /><br /> We can now use the <code>Email/Password method of firebase authorization in the application. <p dir="auto">With the application using the firebase auth functions can perform login and signup but we can add users with firebase web page. <p dir="auto">Let's add our first user on the firebase web page.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmSYxAP2HfSjsi3DsUPDdgEySpL5yREELNgRJDhnvZh38b/react2.gif" alt="react2.gif" /><br /> <br /><br /> When the user is added firebase sets an id value of guid to that user. We can access the user using this <code>id. <p dir="auto">It's not a good way to keep users on the firebase-authentication side. If we want to keep user information, we need to create users collection in firestore. So we can access users to healthier. <p dir="auto">As we do the firebase authentication settings, we can make the app accessible to auth. <h3>2-Building Infrastructure For Access to Auth in Redux <p dir="auto">In this section we will create redux infrastructure to access firebase auth and edit . <p dir="auto">We must use the <code>firebaseReducer module to connect to firebase authentication. We need to link firebaseReducer to the store. So we can also access the firebaseReducer elements when using the components store and use the information required for authentication. <p dir="auto">We've already mentioned that the store used one reducer in previous tutorials. If we were to use more than one reducer, we had to combine these reducers. Since we combine all the reducers that we use in the <code>rootReducer.js file, we must merge the <code>firebaseReducer into this file. <h4>In rootReducer.js <pre><code>//Let's import firebaseReducer import {firebaseReducer} from 'react-redux-firebase'; … //Let's do the merge using combineReducer. const rootReducer=combineReducers({ auth:authReducer, project:projectReducer, firestore:firestoreReducer, //We can access firebaseReducer with the firebase keyword. firebase:firebaseReducer }); <p dir="auto"><br /><br /> According to what we have merge in rootReducer, we can now use it in components as <code>firebase. <p dir="auto">We have placed the <code>SignedInLinks and <code>SignedOutLinks components in the <code>Navbar component. <h4>In Navbar.js <pre><code>//navbar forming class <nav className="nav-wrapper light-blue lighten-2"> <div className="container"> <Link to='/' className="brand-logo">Project Blog</Link> {/* login is */} <SignedInLinks/> {/* logout is */} <SignedOutLinks/> </div> </nav> <p dir="auto"><br /><br /> These links need to be seen according to the login status. So if the user is logged in, the SignedInLinks component should be seen and the SignedOutLinks links should not be seen. <p dir="auto">Since the user knows the login information in the store with the <code>firebaseReducer, we must call the store in the <code>Navbar component. <p dir="auto">To call a component store, we need to connect with the <code>connect module. With the state information in the connect module, we have access to the store. <p dir="auto">Let's print this state information to the console and talk about what we can access. <h4>In Navbar.js <pre><code>//import connect modul import {connect} from 'react-redux'; … //we should use connect when exporting the component. export default connect()(Navbar) <p dir="auto"><br /><br /> Let's define a function for the connect module to access the store. <pre><code>//to be used in connect. const mapStateToProps=(state)=>{ console.log(state); //have to be return return { } } //we should use connect when exporting the component. export default connect(mapStateToProps)(Navbar) <p dir="auto"><br /><br /> So we can examine the state. In this function we will transfer the data we need in state to componentin props. So we will access the store elements from the component.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmZ9aJKPrdEuWcFhuB2LrDJqLTQkGB6zoBvvfdsmR83CnR/react3.gif" alt="react3.gif" /><br /> <br /><br /> So we have access to the data in the store. If we take a closer look at the console.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmPhuxdUwdcaeAFvinEkvo4kmf6Ac4aBGrx4B3PiMG6Hss/react1.png" alt="react1.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmPhuxdUwdcaeAFvinEkvo4kmf6Ac4aBGrx4B3PiMG6Hss/react1.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmPhuxdUwdcaeAFvinEkvo4kmf6Ac4aBGrx4B3PiMG6Hss/react1.png 2x" /><br /> <br /><br /> We have reached the <code>firebaseReducer we created with the <code>firebase keyword. We can access more than one information in this firebase. We want to find the user input in navbar for now, we are interested in the <code>auth object. <p dir="auto">The auth object has <code>isLoaded and <code>isEmpty objects set to <code>true. These objects are set to true so we can know that the user is not logged in. <p dir="auto">We can adjust the links according to the values of these objects. <h3>3- Fix Errors <p dir="auto">In this section we will correct any errors in past tutorials. <p dir="auto">Let's start with our first mistake.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmT5DRGKKAFhPrSEWDpEqS4DVeKHKsFsvxr6Eh5Gt3AjWA/react2.png" alt="react2.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmT5DRGKKAFhPrSEWDpEqS4DVeKHKsFsvxr6Eh5Gt3AjWA/react2.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmT5DRGKKAFhPrSEWDpEqS4DVeKHKsFsvxr6Eh5Gt3AjWA/react2.png 2x" /><br /> <br /><br /> We see above error message related to firestore settings. We set the firestore's timeStamp settings manually in past tutorials. In firebase, we don't need to make any adjustments anymore because the timestampsInSnapshots property is set to true by default. <p dir="auto">Then we do not need this line in <code>firebaseConfig.js file. <h4>In firebaseConfig.js <pre><code> //firebase.firestore().settings({timestampsInSnapshots:true}); <p dir="auto"><br /><br /> Our second mistake is that we use the key in the wrong place<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmT24VghojGhmJy6QjocJAaE2PssFxhEpZqrk3FJiyPv1A/react3.png" alt="react3.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmT24VghojGhmJy6QjocJAaE2PssFxhEpZqrk3FJiyPv1A/react3.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmT24VghojGhmJy6QjocJAaE2PssFxhEpZqrk3FJiyPv1A/react3.png 2x" /><br /> <br /><br /> We used the <code>key property as a <code>ProjectSummary attribute in the <code>ProjectList.js file. <h4>In ProjectList.js <pre><code>//We are forwarding with project.id. return ( <Link to={'/project/'+project.id}> <ProjectSummary project={project} key={project.id}/> </Link> ) <p dir="auto"><br /><br /> The <code>key value must be defined in the repeating component. Where the repeated component is <code>Link, and we get the error because we use key in ProjectSummary. <p dir="auto">If we use the <code>key in the <code>Link, the error will disappear. <pre><code>//We are forwarding with project.id. return ( <Link to={'/project/'+project.id} key={project.id}> <ProjectSummary project={project} /> </Link> ) <p dir="auto"><br /><br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmae1DAitKswCf1ggmFLP5praY5buvA2GV8MGVZrYvRuVi/react4.gif" alt="react4.gif" /><br /> <br /> <h3>4-Create SignIn Component <p dir="auto">Since we created the infrastructure for firebase auth, we need to make sure that the user is a member, and we should include the user in the system. We must design <code>SignIn and <code>SignUp components to perform these operations.<br /> In this section we will create the <code>SignIn component for future use. <p dir="auto">To be able to signIn the user must be able to enter mail and password. To enter these fields, we will create two inputs and one button. <h4>In SignIn.js <pre><code>export default function SignIn() { return ( <div className="container"> <form className="white"> <h5 className="grey-text text-darken-3">LogIn</h5> {/* for email */} <div className="input-field"> <label htmlFor="email">Email</label> <input type="email" id='email' /> </div> {/* for password */} <div className="input-field"> <label htmlFor="password">Password</label> <input type="password" id='password' /> </div> {/* for submit */} <div className="input-field"> <button className="btn green lighten-1 z-depth-0">Login</button> </div> </form> </div> ) } <p dir="auto"><br /><br /> The following view occurs when the <code>Login link is clicked.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmNTFRXG4RytT1uQpLqRwpzEFjx2qJo6Pc1g2HWhdtmaU5/react5.gif" alt="react5.gif" /><br /> <br /> <h3>5- Create Signup Component <p dir="auto">In this section we will design the <code>SignUp component. <p dir="auto">Unlike signIn component, we will also get user information from this component. For example name,last name.<br /> We using email and password values to create a user in the field of firebase authentication. In the name and last name entries, we will create the users' collection in the future and use them in that collection. <h4>In SignUp.js <pre><code>export default function SignUp() { return ( <div className="container"> <form className="white"> <h5 className="grey-text text-darken-3">Sign Up</h5> {/* for email in auth */} <div className="input-field"> <label htmlFor="email">Email</label> <input type="email" id='email' /> </div> {/* for password in auth */} <div className="input-field"> <label htmlFor="password">Password</label> <input type="password" id='password'/> </div> {/* for first name in firestore */} <div className="input-field"> <label htmlFor="firstName">First Name</label> <input type="text" id='firstName' /> </div> {/* for last name in firestore */} <div className="input-field"> <label htmlFor="lastName">Last Name</label> <input type="text" id='lastName' /> </div> <div className="input-field"> <button className="btn blue lighten-1 z-depth-0">Sign Up</button> </div> </form> </div> ) } <p dir="auto"><br /><br /> The following view occurs when the <code>SignUp link is clicked.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmWHiq7Sxbbd9YDwy4mvy8CeWo7SBTz8nqakxxEgcAzRvo/react6.gif" alt="react6.gif" /><br /> <br /> <h1>Curriculum <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-1 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-2" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-2 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-3" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-3 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-4" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-4 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-5" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-5 <p dir="auto"><span><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-6" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-6 <h1>Proof of Work Done <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-7" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-7