Firebase and Clojure(Script) Part Two – Adding Facebook Authentication in 3 Easy Steps

Overview

This blog post is part of three planned entries. They are:

The Github project housing this code can be found here

This go around we want to add Facebook Authentication to our chat application. If the user is not logged in, then we display a login button and hide the input fields for adding a message. If the user is already logged in, then we display the input fields for adding a message and populate the name field with their Facebook display name.

If you get confused during this post (how could you with my amazing clarity?), Firebase has two excellent articles on accomplishing the same functionality with JavaScript:

This is a very naive implementation and there are a million improvements to be made that are outside the scope of this entry.

1. Configure Facebook and Firebase Forge for Authentication

Configure Facebook

Go to Facebook Developer Apps. You should see something similar to below depending on whether you have previously created a Facebook App before.

Facebook Developer Apps

Facebook Developer Apps

Click on the “Create New App” button in the top right hand corner. You should see a window pop open similar to the below:

Facebook Create New App Window

Facebook Create New App Window

Fill out the App Name with “Firebase Auth”, press Continue, fill out the Captcha, and then press Continue again. You’ll see the Firebase Auth configuration screen.

facebook_config_screen

Check the Website with Facebook Login,  enter https://auth.firebase.com/auth/facebook/callback into the “Site URL” input box, and then click “Save Changes”. Take note of the App ID and App Secret at the top of the Firebase Auth App configuration screen.

Configure Firebase Forge

Go to Firebase and login. You’ll see a list of your Firebases. Click on the name of the Firebase you used in Part One of this series. You’ll see the Firebase Forge page. Click on Auth listed on the right hand side, scroll down till you reach the “Authentication Providers” section, ensure that the Facebook button is selected, and click Enabled. Fill in the App ID and App Secret you made note of after configuring your Facebook App. When you are done, it should look similar to:

firebase_forge_auth

2. Modify handler.clj

Open your src/balling_firebase/handler.clj in your favorite editor and change it to match the below:

The major changes we made from Part One of this series are:

  1. https://cdn.firebase.com/v0/firebase-simple-login.js is now included in our list of javascript files to import. It gives us access to Firebase’s Simple Login functionality.
  2. [:button {:id "login"} "Login"] was added to provide a Login button to trigger the Facebook Login window.
  3. The nameInput and messageInput were surrounded by a div with the id of entry so that they can be hidden when a user is not logged in.

3. Modify core.cljs

Open your src-cljs/balling-firebase/core.cljs in your favorite editor and change it to match the below:

The major changes we made from Part One of this series are:

  1. init-login-auth-handler was added to the init method. It initializes the FirebaseSimpleLogin method with the messages var (which points to an instantiation of the Firebase object pointed to your Firebase) and the simple-login-handler. It also adds to the Login button a click event handler that pops up the Facebook login.
  2. The simple-login-handler deals with three cases:
    1. If there is an error, handle-firebase-simple-login-error is called which simply prints the error to the console.
    2. If the user has logged in previously, handle-firebase-simple-login-user-present is called which hides the Login button, displays the nameInput and messageInput input fields where the user can enter messages and prepopulates the nameInput with the user’s Facebook Display Name. It also logs the user to the console so you can see what is provided.
    3. If the user has not logged in previously, handle-firebase-simple-login-user-not-present is called which displays the Login button and hides the nameInput and messageInput  input fields.

Run It

Follow the directions in Part One to transpile the ClojureScript to Javascript and start the web server.

Follow

Get every new post delivered to your Inbox.

Join 662 other followers

%d bloggers like this: