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. As the name eludes, it will be a ReactJS front end. The intention is to utilize Firebase 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) in our security transit layer.

Outcomes

Follow along React Authentication Crash Course With Firebase And Routing tutorial to create a basic ReactJS application with Twitter authentication that we can host on Netlify. 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) to manage Node 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 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 Chrome extension. This extension allows us to inspect ReactJS Component hierarchies.

With a project started, I added the inception files to GitHub and fired up Visual Studio Code. 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}"
    }
  ]
}

Firebase Setup

In order to utilize Firebase an account must be created. This application will only use the Provider Authentication, 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 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:

(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.

Hosting on Netlify

Now that we have a basic application, we can put it up on Netlify. 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.

The hosted demo site can be found here, firebase-authentication-demo.

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. 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.

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

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).

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.

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.

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.

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.