App Structure and Authentication UI
Let's implement the concepts learned in the chapter on Reagent and React Router to build a login page..... plus the magic of REPL!
App structure and authentication UI#
The structure we are going to use for our app is largely influenced by React Router. For every route path, we are going to have a dedicated namespace. React routes grow in the shape of trees and our namespaces will grow in the same way. Here is a table of possible routes and their respective namespaces:
This structure is inspired by Fractal Structure for React Apps. Notice how the namespace graph and the routes mirror each other. This structure is opinionated and made to fit React Router.
For smaller apps, like ours, it also makes sense to have a single namespace called
app.views with all view-related logic. Feel free to change things up as you get the hang of it.
In real-world apps, the index page is generally a landing page with various links including to register and log in. In real life, it's also probably a static html page. In our simple application, however, the index page is a component that points to the login and register page.
Let's create this component with Hiccup and Tailwind CSS:
mr-2 specify margin all and margin right at scale 2. The
Link component is a React component adapted to Reagent using
:> shorthand. To tie this component to the
/ index route, we need to update the
And require the
app.pages.index namespace in
With the route connected to the component, you should see a humble landing page if you visit
You might have some remnants of the
test-ui component in
app.core namespace. These can be safely removed.
For this application, we'll be using Firebase Authentication with email and password. The login form has two input fields:
password, and a button to submit the form. Blueprint's
Button components will be handy.
To store the state of the input, we'll use a ratom. Since the login component is mounted at
/login, we need to create the namespace