This video is available to students only

Auth Event Handlers

In this chapter, we'll initiate the Reframe loop for our login form, dispatch form submit events and handle them, ie implement steps 1 and 2.

Auth event handlers#

Firebase Auth package wraps the API into an SDK. There are functions for all tasks that you might need to perform.

A real-world app might depend on REST or GraphQL APIs. In this chapter, we'll integrate Reframe and Firebase Auth, and draw parallels between Firebase SDK and custom REST APIs.

Install Reframe#

Reframe ships as a Clojars package and can be installed by updating the dependencies vector in shadow-cljs.edn. We also recommend installing refrisk, a visual debugging tool for Reframe:

Update Reagent version#

The Reagent version that ships with create-cljs-app is 0.8.0. The latest Reframe version (1.1.1) causes issues with 0.8.0, so we updated Reagent to version 0.10.0 (in dependencies above).

Version 0.10.0 requires another change. The render function has moved from reagent.core to reagent.dom. To make this change, we need to import reagent.dom instead of reagent.core in app.core:

We also need to update the render function to use rd/render instead of r/render:

Create Firebase domain namespace#

There are multiple ways to structure a Reframe app. As discussed before, we'll segregate code by domain. All Reframe events, effects, and subscriptions related to Firebase will stay in app.domain.firebase namespace.

We'll populate the namespace later in this chapter.

Firebase Auth flow#

Firebase Auth starts by registering an application. This is done by calling firebase.initializeApp(config). Remember the credentials we asked you to save in the last chapter? They're needed to initialize the application.

It is possible to interact with multiple Firebase projects in the same app, but for our use case, we just need one project per environment.

Once an app is initialized, we can call various login functions with the arguments they expect. For example, to login with email and password, we need to call firebase.auth().signInWithEmailAndPassword method. The authentication function is asynchronous and takes a callback to monitor the state of the user.

We'll wrap this in Reframe and everything will make sense when the dots are connected. It's easier to understand with code, so let's build this thing!

Dispatch login event with email and password#

The first step is to dispatch a login event from the app.pages.login/page component. We built this component in the previous chapter but omitted the onClick handler for the submit button.

 

This page is a preview of Tinycanva: Clojure for React Developers

Please select a discussion on the left.