Implementing the registration page

As we don’t have a registration UI yet, we’ll fast-forward to creating one. We want the registration page (called Create account) to look pretty much the same as the Login page: a box where you can enter your email and a password of your choice to create a new account. It shall be reachable at tenant.domain/register.

First, you want to make sure that the registration is reachable with a click in the UI, so simply add a Link component to your Login.js component below the existing buttons:

<Link
  href={urlPath("/register", tenant)}
  style={{
    textAlign: "center",
    display: "block",
    marginTop: "1em",
  }}
>
  Create account
</Link>

My login screen will now look like this:

Figure 7.3: Login screen

Design note

If your login page looks slightly...