Clojure is a functional hosted LISP known for its expressiveness, which has excellent interop with Javascript, Java, and Microsoft's Common Language Runtime (CLR). 

Many developers praise the elegance and productivity Clojure allows, but for many it seems like an esoteric language with an "ugly" syntax that is impossible to get started with. This course will change that view and show you how to be productive with this marvelous language.

In this course, we'll build a web-based graphics editor similar to Canva. We'll explore Clojure from the perspective of a JavaScript developer. Along the way, we'll also explore state management, authentication, API integration with Google Firebase and interop with NPM.

This course takes you from zero to an understanding of Clojure semantics, LISP tools, and building a production-ready React application in just a few hours. 

We'll start with the basics and build up to writing a fullstack app with both frontend and backend in Clojure. 

The frontend, built using ClojureScript (Clojure that runs on JavaScript) will be a single page React application with routing, key-based authentication and API integration, which will save, list, edit and delete graphics.
 

The backend is hosted on Google Firebase. 

Throughout the course, we'll learn about tools like REPL that aid development. Towards the end, we'll learn about advanced concepts like code splitting and end-to-end testing.

Clojure is unlike other languages as it is hosted on, and can leverage, existing VMs. This means that you can learn Clojure once and write it on the backend with JVM or CLR, and the frontend with JavaScript. If a new technology like Rust takes over the world tomorrow, you will probably be able to continue to write Clojure because a Rust port is already in the making.

By the end of this course, you'll have a superpower: the ability to write fullstack Clojure applications.

Build a Fullstack Web Graphics Editor in Clojure and React

This is a course on Clojure for React developers in which we'll build a web-based graphics editor similar to Canva.

Tinycanva: Clojure for React Developers

---
title: Auth Event Handlers
slug: tc-firebase-auth-events
description: 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.
privateVideoUrl: https://fullstack.wistia.com/medias/vsqkpx46s8
code: https://gitlab.com/fullstackio/books/newline-course-apps/shivek-khurana-tinycanva-clojure-for-react-developers-app/-/tree/main/code/module_04/lesson_04.08/App/source_code/tinycanva?ref_type=heads
---

# 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](https://clojars.org/re-frame) and can be installed by updating the dependencies vector in `shadow-cljs.edn`. We also recommend installing `refrisk`, a visual debugging tool for Reframe:

```clojure { actualFilename=./protected/source_code/tinycanva/shadow-cljs.edn endLine=20 startLine=17 statedFilename=tinycanva/shadow-cljs.edn url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.08/protected/source_code/tinycanva/shadow-cljs.edn#L17 }
 :dependencies [[reagent "0.10.0"]
                [re-frame "1.1.1"]
                [re-frisk "1.3.4"]
                [devcards "0.2.6"]
```

## 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`:

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/core.cljs endLine=3 startLine=3 statedFilename=tinycanva/src/app/core.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.08/protected/source_code/tinycanva/src/app/core.cljs#L3 }
  (:require [reagent.dom :as rd] ;; was [reagent.core :as r]
```

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

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/core.cljs endLine=28 startLine=28 statedFilename=tinycanva/src/app/core.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.08/protected/source_code/tinycanva/src/app/core.cljs#L28 }
  (rd/render [root-router] (.getElementById js/document "app")))
```

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

```bash
mkdir src/app/domain
touch src/app/domain/firebase.cljs
```

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](https://firebase.google.com/docs/auth/web/firebaseui) 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.

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.