Social Learning Journal - React
Tags: learningjournal, react, twitter, netlify
Published: 2021-01-01 00:33:18

---
title: Social Learning Journal - React
published: true
description: Create a live ReactJS application that authenticates users via Twitter.
tags: learningjournal, react, twitter, netlify
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9r94xupigc4w1jikseni.jpg
---

I've spent a bit of time stitching together components for the backend of this Social Learning Journal project, now it is time to start putting together some of the elements that will make up the front end. I made a new GitHub project, [react-learning-journal](https://github.com/DEV3L/react-learning-journal). As the name eludes, it will be a [ReactJS](https://reactjs.org/) front end. The intention is to utilize [Firebase](https://firebase.google.com/) as an auth provider. For now, I'll just serve up some static mock data, but the intention for the future is to use [JSON Web Tokens (JWT)](https://jwt.io/) in our security transit layer.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/853pb7iysefyprl9ybzq.png)

# Outcomes

Follow along [React Authentication Crash Course With Firebase And Routing](https://www.youtube.com/watch?v=PKwu15ldZ7k) tutorial to create a basic ReactJS application with Twitter authentication that we can host on [Netlify](https://www.netlify.com/). This will be a simple application that will have a basic login page, Twitter authentication, and redirect to an authenticated "Hello, World!" route. Eventually, Redux, using JWT to handle our security claims, will allow us to create a robust front end to the API server.

# Project Initialization

I use [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm) to manage [Node](https://nodejs.org/en/) versions in my local development environment. With the following commands, I updated to the latest version of Node and created an empty ReactJS project:

```
nvm install v14.15.3
nvm use 14.15.3
npx create-react-app react-learning-journal
```

I utilize [yarn](https://classic.yarnpkg.com/en/) as my JavaScript package manager, instead of the default NPM. So, once the project was done initializing it was easy to very that the base ReactJS Hello World application was up and running.

```
yarn start
```

It is essential in ReactJS development to install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) Chrome extension. This extension allows us to inspect ReactJS Component hierarchies.

With a project started, I added the inception files to [GitHub](https://github.com/DEV3L/react-learning-journal) and fired up [Visual Studio Code](https://code.visualstudio.com/). Outside of any personal customizations (dark mode or bust), I would recommend the Debugger for Chrome extension plugin for ReactJS development. This will allow us to hit interactive breakpoints from VS Code while the application is running. The `launch.json` is checked into the repository, but for reference we need to create a launch configuration to make the magic happen:

```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rorc3ukhoo17dfpxt72x.png)

# Firebase Setup

In order to utilize [Firebase](https://firebase.google.com/) an account must be created. This application will only use the [Provider Authentication](https://firebase.google.com/docs/auth), which will keep us on the free tier regardless of how much site traffic we receive. The [React Authentication Crash Course With Firebase And Routing - 1m 43s](https://youtu.be/PKwu15ldZ7k?t=103) does a great job of walking through this process. He sets it up for Email Authentication, which we will follow until we are ready to setup Twitter as an authentication provider.

If everything went well, you should have a set of variables applicable to your Firebase application like the following:

![firebase](https://image.ibb.co/maGOnS/image.png)

_(These credential are not valid)_

# React App Development

Following the tutorial, we have a basic application that can create users, authenticate, and reset passwords. Granted this is functionality we will scrap a bit later, as we will prefer other authentication providers over email, but it lays the foundation for Authenticated Routes and the general application flow.

In the GitHub `.env` file is a stub for the environment variables. You can add your specific key values to run the project locally.

```
REACT_APP_FIREBASE_API_KEY=api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=auth_domain
REACT_APP_FIREBASE_DATABASE_URL=databse_url
REACT_APP_FIREBASE_PROJECT_ID=project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=messaging_sender_id
REACT_APP_FIREBASE_MESSAGING_APP_ID=messaging_app_id
```

An important note, ALL environment variables for ReactJS must begin with `REACT_APP`. This is a standard naming convention. Later in Netlify, we will have to put our specific values in as these environment variables.

It's a pretty basic site, at the same time incredible how we can have user management handled without having to write a single line of server-side code - for free. I created a tag and the source can be found on [GitHub - react-authentication](https://github.com/DEV3L/react-learning-journal/tree/react-authentication).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u3r1i1n7xfv38q6nreee.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7g72xi5xlhz4ppm3kgjh.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/el46ag6ec1tjtknlu4ks.png)

# Hosting on Netlify

Now that we have a basic application, we can put it up on [Netlify](https://www.netlify.com/). If you don't have an account, signing up for one is the first step. It's free, but they offer premium services like custom DNS mapping.

Once on the dashboard, select _New site from Git_. Select the repo, and branch if different than master. For advanced build settings, we are going to add our `REACT_APP` environment variables here. If you forget to do this, they can easily be added later through the _Site Settings_ tab.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4y41yppxlhxtkhbivhd7.png)

The hosted demo site can be found here, [firebase-authentication-demo](https://firebase-authentication-demo.netlify.app/).

# Twitter Authentication

Now that we have the basic elements setup, we can start utilizing Twitter Authentication to allow users to login via their social media account.

Apply for a [Twitter Developer App](https://developer.twitter.com/en/portal/dashboard). The process is a bit involved but after submission and verifying setup through email, you will be given three keys needed to enable Twitter Authentication on Firebase.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/trcx0dkidf9a9m97i6bw.png)

Back on the Firebase console, select Twitter and check to have it enabled. Enter your brand new credentials from the previous step.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vslg5zakzj58c35zw7xh.png)

At this point, Twitter should be enabled in the Firebase Console. But we need to add the callback URL into the Twitter application. Here is a good video that walks through the process: [Google/Twitter Authorization in Firebase with React and Redux (Message Board pt 3)](https://www.youtube.com/watch?v=AUQn6ZckTvM).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b4eutc7bl5fmo1nhsfb0.png)

After following the steps indicated in the tutorial, it turns out the authentication through Twitter was just another function readily available on the Firebase auth object. The user handle was not readily available in the returned user object, so I stored this value in local storage.

```
export const twitterProvider = new firebase.auth.TwitterAuthProvider();

  function loginWithTwitterPopup() {
    return auth.signInWithPopup(twitterProvider).then((userCredential) => {
      localStorage.setItem('twitterHandle', userCredential.additionalUserInfo.username);
    });
  }
```

Logging in with Twitter, the Dashboard now shows the Handle and Display Name of the logged-in user.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h52mu1abk01hb5zkptxb.png)

# React App Cleanup

With Twitter Authentication up and running, it's time to clean up the email sign-in features. In addition, we will not be allowing our users to update their profile, this is something that should be done on the Twitter site itself. The results of this cleanup can be found on this tag, [twitter-authentication](https://github.com/DEV3L/react-learning-journal/tree/twitter-authentication).

After deploying to Netlify, I received an unauthorized domain. I had to add `learning-journal.netlify.app` as an authorized domain within the Firebase Console. The live site can be found here: [learning-journal](https://learning-journal.netlify.app/).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wrg0k78b2s7q8l1c81wa.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zbfv43t0vzjdspk2tpts.png)

# Conclusion

Now we have a live ReactJS application that authenticates users via Twitter. This lays the foundation for us to start pulling data from the API. In future posts, we will walk through creating an interface that will let us update the classification and other values of the Journaled Events currently stored inside the Mongo Database.