{"id":1566,"date":"2018-12-16T00:00:00","date_gmt":"2018-12-15T23:00:00","guid":{"rendered":"https:\/\/old.weichie.com\/blog\/react-firebase-chat-app\/"},"modified":"2020-08-11T17:03:57","modified_gmt":"2020-08-11T16:03:57","slug":"react-firebase-chat-app","status":"publish","type":"post","link":"https:\/\/old.weichie.com\/nl\/blog\/react-firebase-chat-app\/","title":{"rendered":"Building a Firebase Chat-app with React, React Router & Authentication (part 1)"},"content":{"rendered":"\n

I want to start creating apps with React, and what better way to do this than with a real-time application that other people can use? Making ‘real’ stuff, gives me more motivation to start learning new things. I’ll be building a React Chat application with firebase and will blog along the way, to let you know how I did it and where I struggled. Hopefully it can help you getting started with React or Firebase as well!<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

Project Setup<\/h2>\n\n\n\n

You can see a live demo of this application here: https:\/\/chat.weichie.com<\/a>. You need to register an account first before you can see the chat. I did not put any effort into styling.

The GIT Repo of this project can be found here: https:\/\/github.com\/weichie\/react-firebase-chat<\/a>. Feel free to have a look around!<\/p>\n\n\n\n

PART 2 IS FINALLY HERE!<\/a> Make sure to check it out once you’ve finished part 1 of course.<\/p>\n\n\n\n

I am just starting out with React myself as well, so if you are an advanced React user, this blog probably can’t help you. But feel free to leave a comment with suggestions or feedback! Assuming you have basic knowledge of ES6 and React, I’ll be using the create-react-app<\/code>, firebase<\/code>, and react-router<\/code> npm packages. So no redux or any other fancy library.<\/p>\n\n\n\n

Let’s get started!<\/h3>\n\n\n\n

First let’s create our new react project!<\/p>\n\n\n\n

create-react-app chatbox<\/code><\/pre>\n\n\n\n
After this is installed, manually browse to this folder and take a look at the \/src<\/code> folder. There’s a bunch of files that I personally do not like, so I’m removing all files in this folder EXCEPT the index.js and index.css files! Before we’ll start, we also add the react-router and firebase packages to our project:<\/p>\n\n\n\n
npm i react-router\nnpm i react-router-dom\nnpm i firebase<\/code><\/pre>\n\n\n\n
Now that all our dependencies are installed, we can go ahead and creating our folder structure. We need a ‘homepage’, where all our chats will be displayed. And an Auth folder that will have all our views for authentication, like user registration and login etc… We’ll create a \/components<\/code> folder inside the default \/src folder. Afterwards, inside \/components<\/code> we’ll create a \/Home<\/code> and a \/Auth<\/code> folder. Our Home folder will have a Home.js and a Home.css file. The Auth folder will have an Auth.css, Register.js and Login.js file. Here’s my folder structure:<\/p>\n\n\n\n
- node_modules\n- package-lock.json\n- package.json\n- public\n- README.md\n- src\n    - components\n        - Home\n            - Home.js\n            - Home.css\n        - Auth\n            - Auth.css\n            - Login.js\n            - Register.js\n        - index.css\n        - index.js\n- yarn.lock<\/code><\/pre>\n\n\n\n
Let’s fire up our local server to see what we have so far! I’m using Yarn, but create-react-app will tell you in the terminal what commands are available for you if you don’t have yarn installed. Make sure you are in the root of your project before you run the command.<\/p>\n\n\n\n
yarn start<\/code><\/pre>\n\n\n\n
Once the pages is loaded, we should see an error. (as I removed App.js to cleanup my project). So let’s start building our Home.js component:<\/p>\n\n\n\n
\/\/ \/components\/Home\/Home.js\nimport React from 'react';\nimport '.\/Home.css';\nclass Home extends React.Component{\n\trender(){\n\t\treturn(\n\t\t\t<div className=\"home--container\">\n\t\t\t\t<h1>Home Container<\/h1>\n\t\t\t<\/div>\n\t\t);\n\t}\n}\nexport default Home;<\/code><\/pre>\n\n\n\n
We’ll just add a <h1> for now, to see if our component is working. After this, we need to include our fresh home component into our index.js file, to make sure we’re launching the Home component instead of the previous App component (that we removed).<\/p>\n\n\n\n
\/\/ index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport Home from '.\/components\/Home\/Home';\nReactDOM.render(<Home \/>, document.getElementById('root'));<\/code><\/pre>\n\n\n\n
If we navigate to our project now, we should be able to see our ‘Home Container’ h1 element on the page. We’ll copy the code from our Home component also to our Auth components, to make sure they all work fine. So we have something to look at while we implement our React-Router.<\/p>\n\n\n\n
Copy the Home.js code to the \/Auth\/Login.js and Register.js so we can start navigating through our different components. Just change the classname of the projects (obviously) and the title. So we can actually see when we change views. After that, import our Auth components into our index.js file as well to finish our project setup.<\/p>\n\n\n\n
\/\/ index.js\n...\nimport Login    from '.\/components\/Auth\/Login';\nimport Register from '.\/components\/Auth\/Register';\n...<\/code><\/pre>\n\n\n\n
Implementing React Router<\/h2>\n\n\n\n
Now that we have all our components, let’s hook up React Router first, before we actually start implementing Firebase and Authentication. If you didn’t have react-router and react-router-dom installed in your project already, please go ahead and do so. If you have it, let’s edit our index.js file with react-router.<\/p>\n\n\n\n
First, import BrowserRouter from the react-router-dom:<\/p>\n\n\n\n
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';<\/code><\/pre>\n\n\n\n
Afterward, let’s create a Router component inside our index.js. This looks like a regular React Component like we did for Home and our Auth.<\/p>\n\n\n\n
class AppRouter extends React.Component{\n\trender(){\n\t\treturn(\n\t\t\t\/* ... router code here ... *\/\n\t\t);\n\t}\n}<\/code><\/pre>\n\n\n\n
We’ll add our Routercode in a second. For now, let’s switch out our <Home \/> component with our new <AppRouter \/> component to make sure we’re displaying the correct component at startup.<\/p>\n\n\n\n
ReactDOM.render(\n\t<AppRouter \/>, \n\tdocument.getElementById('root')\n);<\/code><\/pre>\n\n\n\n
Ok, time to build our router inside our previously created AppRouter component! The Router component only accepts 1 child. So we’ll wrap everything in a parent-div:<\/p>\n\n\n\n
\/\/ index.js\n...\nclass AppRouter extends React.Component{\n\trender(){\n\t\treturn(\n\t\t\t<Router>\n\t\t\t\t<div className=\"app\">\n\t\t\t\t\t<nav className=\"main-nav\">\n\t\t\t\t\t\t<Link to=\"\/\">Home<\/Link>\n\t\t\t\t\t\t<Link to=\"\/login\">Login<\/Link>\n\t\t\t\t\t\t<Link to=\"\/register\">Register<\/Link>\n\t\t\t\t\t<\/nav>\n\t\t\t\t\t<Switch>\n\t\t\t\t\t\t<Route path=\"\/\" exact component={Home} \/>\n\t\t\t\t\t\t<Route path=\"\/login\" exact component={Login} \/>\n\t\t\t\t\t\t<Route path=\"\/register\" exact component={Register} \/>\n\t\t\t\t\t\t<Route component={NoMatch} \/>\n\t\t\t\t\t<\/Switch>\n\t\t\t\t<\/div>\n\t\t\t<\/Router>\n\t\t);\n\t}\n}\n...<\/code><\/pre>\n\n\n\n
We’ll use the <nav> element to display our navigation, so we’re able to navigate through our different views. Instead of <a href=””> elements, we need to use <Link to=””> elements. ReactRouter will automatically render these into normal <a href=””> tags once it’s in the browser.<\/p>\n\n\n\n
Also notice we’re using the Switch component to create our routes. Here we can say that if the URL of the page is equal to \/login, then render the Login component. Notice I use a {NoMatch} default Route, that we will be using for 404-pages. here’s the function for the NoMatch if you want to use this too. Place it right under our AppRouter component:<\/p>\n\n\n\n
const NoMatch = ({location}) => 
No route match for {location.pathname}<\/div>;<\/code><\/pre>\n\n\n\n
Implementing Firebase<\/h2>\n\n\n\n
Before we can continue with our authentication, we’ll need to link firebase first. Head over to firebase.com<\/a> and create a new database. After creating the new database, you should be able to see next screen: Click on the web icon to receive your web access tokens.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This will open a popup with all the data you need. Copy all of it, because we’ll need it in a second. If you have not installed the firebase npm package yet, please go ahead and do so. If you have it already, create a new file named firebase.js<\/code> in our \/src folder and paste the firebase snipped we just copied in there. Your firebase.js file will look like this:<\/p>\n\n\n\n
\/\/ firebase.js\nimport firebase from 'firebase';\nconst config = {\n  apiKey: \"xxxxxxxxxx-xxxx-xxxx_xxxxxxxxxx_xxxxxxx\",\n  authDomain: \"app-name.firebaseapp.com\",\n  databaseURL: \"https:\/\/app-name.firebaseio.com\",\n  projectId: \"app-name\",\n  storageBucket: \"app-name.appspot.com\",\n  messagingSenderId: \"xxxxxxxxxxxx\"\n};\nfirebase.initializeApp(config);\nexport const provider = new firebase.auth.GoogleAuthProvider();\nexport const auth = firebase.auth();\nexport default firebase;<\/code><\/pre>\n\n\n\n
Import Firebase from ‘firebase’ at the top of this file to ease-up our future process. Because we’re using authentication through firebase as well, we’ll need a few more stuff. Add the firebase Provider and the firebase Auth into the file as well, just as in the example I posted before. At the end of our firebase.js file we need to export our firebase file so we can import it in all the files that will need to link with firebase.<\/p>\n\n\n\n
That’s actually all we need to link our React App with React-router to Firebase! Woohoow, I hope you could still follow along so far?<\/p>\n\n\n\n
Register new users in firebase<\/h2>\n\n\n\n
First things first, we can’t send messages without a user account. Because we need to know who send the message, so we know with who we’re chatting. Best to do authentication at the start, so we don’t need to manually edit all previous messages with a ‘sender_id’ or something like that. Here’s the setup for our Register.js component:<\/p>\n\n\n\n
\/\/ \/components\/Auth\/Register.js\nimport React from 'react';\nimport firebase from '..\/..\/firebase.js'\nimport { Link } from 'react-router-dom';\nimport '.\/Auth.css';\nimport Login from '.\/Login';\nclass Register extends React.Component{\n\tconstructor(props){\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tusername: '',\n\t\t\temail: '',\n\t\t\tpassword: '',\n\t\t\terror: null\n\t\t}\n\t}\n\thandleChange = e => {\n\t\tthis.setState({[e.target.name]: e.target.value});\n\t}\n\thandleSubmit = e => {\n\t\te.preventDefault();\n\t\tconsole.log('Submitting form...');\n\t}\n\trender(){\n\t\tconst {email, username, password, error} = this.state;\n\t\treturn(\n\t\t\t<div className=\"auth--container\">\n\t\t\t\t<h1>Register your account<\/h1>\n\t\t\t\t{error && <p className=\"error-message\">{error.message}<\/p>}\n\t\t\t\t<form onSubmit={this.handleSubmit}>\n\t\t\t\t\t<label htmlFor=\"username\">Username<\/label>\n\t\t\t\t\t<input type=\"text\" name=\"username\" id=\"username\" value={username} onChange={this.handleChange} \/>\n\t\t\t\t\t<label htmlFor=\"email\">Email address<\/label>\n\t\t\t\t\t<input type=\"text\" name=\"email\" id=\"email\" value={email} onChange={this.handleChange} \/>\n\t\t\t\t\t<label htmlFor=\"password\">Choose a password<\/label>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\tname=\"password\"\n\t\t\t\t\t\tid=\"password\"\n\t\t\t\t\t\tvalue={password}\n\t\t\t\t\t\tonChange={this.handleChange}\n\t\t\t\t\t\/>\n\t\t\t\t\t<button className=\"general-submit\" children=\"Get Started\" \/>\n\t\t\t\t\t<p>Already have an account? <Link className=\"login-btn\" to=\"\/login\">Login here<\/Link><\/p>\n\t\t\t\t<\/form>\n\t\t\t<\/div>\n\t\t);\n\t}\n}\nexport default Register;<\/code><\/pre>\n\n\n\n
I’ll go over the file top to bottom. At the top, we import everything we need from React, firebase, and react-router. I am importing our Login component to easily switch to Login if our user already has an account. After that, we’ll create a constructor to set up our default state. We add an onChange handler for our inputfields (otherwise React doesn’t let us edit those fields) and an OnSubmit handler when our form will be submitted. For now, we only log ‘Submitting…’ to make sure this is working. We’ll add our firebase code in a minute!<\/p>\n\n\n\n
After our functions we’ll add our jsx code inside the render() method. Our input fields need a name-attribute. Because this is what we target in our onChange function with [e.target.name]<\/code> to change the current state. The value of the input-fields will be equal to their {state} value and we also add an onChange attribute that is equal to our handleChange() function.<\/p>\n\n\n\n
Update Firebase Authentication settings<\/strong><\/p>\n\n\n\n
Before we can start building user registration and login, we need to activate authentication in our firebase project. Head over to firebase and select the ‘Authentication’ tab from the left sidebar menu. In there, head over to the ‘inlog-method’ tab and enable email\/password authentication.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Once done, and our \/register page is rendering correctly on the page, we can add our firebase code to register our users. Please change our onSubmit function to the following:<\/p>\n\n\n\n
handleSubmit = e => {\n    e.preventDefault();\n    const {email, username, password} = this.state;\n    firebase\n        .auth()\n\t.createUserWithEmailAndPassword(email, password)\n\t.then(() => {\n\t    const user = firebase.auth().currentUser;\n\t    user\n\t        .updateProfile({displayName: username})\n\t\t.then(() => {\n\t\t    this.props.history.push('\/');\n\t\t})\n\t\t.catch(error => {\n\t\t    this.setState({error});\n\t\t});\n        })\n    .catch(error => {\n        this.setState({error});\n    });\n}<\/code><\/pre>\n\n\n\n
First, we’ll declare all the variables from our state with ES6 destructuring like this: const { email, username, and password }. After that, we can do our Firebase call. This one access a lot of functions at once. firebase.auth() gives us access to the firebase authentication methods. Next we call ‘createUserWithEmailAndPassword(). I mean… ever seen an easier way to register users to your database? I don’t think so! The user’s password will be automatically hashed and we automatically get a user UID. I’m in love!<\/p>\n\n\n\n
The createUserWithEmailAndPassword() doesn’t allow to set a username all at once. So we’ll access the auth().currentUser directly after our registration and set the username ourselves. All Firebase calls are Promises, so we can hook them up with .then(() => {...})<\/code> and .catch(error => {...})<\/code> to catch all errors. We have an error-field in our state, which will be displayed on the page when we have errors. So after each catch, we’ll set the state to error. As you start playing with this, you will see that firebase gives us perfect error messages for everything that can go wrong.<\/p>\n\n\n\n
Login existing users<\/h2>\n\n\n\n
The firebase registration function automatically logs-in new users. That’s why we redirect back to the homepage after registration, because the user will be logged in automatically. You can turn this off in your firebase settings as well as adding extra’s like user email confirmations first. But I am not going to cover that in this post.<\/p>\n\n\n\n
Let’s build something to login existing users, as for now, we lose our login-state when we navigate to different pages. We will add something to keep track of our state in this login function. The login code is actually exactly the same as our registration code. Except the handleSubmit function, this will look like this:<\/p>\n\n\n\n
handleSubmit = e => {\n    e.preventDefault();\n    const {email, password} = this.state;\n    firebase\n        .auth()\n        .signInWithEmailAndPassword(email, password)\n        .then(user => {\n            this.props.history.push('\/');\n        })\n        .catch(error => {\n            this.setState({error});\n        });\n}<\/code><\/pre>\n\n\n\n
This is the handleSubmit event in our Login.js file. All the rest is the same as our registration file. Except of course for login, we’ll only use email and password, no username. But even the handleSubmit code looks the same. We just switchour the createUserWithEmailAndPassword() function with the signInWithEmailAndPassword() function.<\/p>\n\n\n\n
Now… How do we remain logged in while switching views? We’ll be updating our index.js file for this:<\/p>\n\n\n\n
\/\/ index.js\n\/\/Import firebase package\nimport firebase, {auth, provider} from '.\/firebase.js'\n\/\/Add Contstructor to AppRouter component\nconstructor(props){\n    super(props);\n    this.state = {user: null}\n}\n\/\/Add componentDidMount lifecycle\ncomponentDidMount(){\n    auth.onAuthStateChanged(user => {\n    if(user){\n        this.setState({user});\n    }\n});<\/code><\/pre>\n\n\n\n
We need to include firebase at the top of our indexfile to be able to use Firebase functions. We also add a constructor to initialize our starting state. If our component mounts, we’ll check with firebase if our ‘userstate’ (authstate in firebase) changed. If so, we check if we had a user, and we put the user in our React state again. So we’re actually pulling our Firebase state into our React state. (If you don’t logout in firebase, you will automatically be logged in when you visit the webpage again later on)<\/p>\n\n\n\n
Logout the current user<\/h2>\n\n\n\n
Let’s build a function to log our current users out of the application. We’ll just run a logout function when clicking on a link, so we don’t need navigation or create a new component for this. Add a log out link to the navigation:<\/p>\n\n\n\n
\/\/ element in index.js\n