Building with purpose 6: Setting up the frontend

Now we’re moving towards the frontend part because we want to get the long-lived token from Clerk in order to test the backend fully with it (because right now we can only see the "User not authenticated" message). Here we go!

Adding React Router

We’ll follow the instructions in the official React Router installation (note that I’ll use pnpx and not npx as in the docs).

We’ll get a series of questions (I didn’t initiate a git repo because I prefer to do it myself).

You shouldn’t see the overwrite section (it happened because I used the command with npx and canceled when I noticed it at the dependencies step).

Next, we need to set up the repo on Git and add it to the local one. We are not going to cover this here. At the same time, we can also set up Husky (you can follow the same process we documented with the backend part).

If we now run pnpm dev, we should see this screen:

This means that the initial configuration went well.

DaisyUI time

Now we are going to add DaisyUI for the styling of our app. It should be pretty straightforward.

npm install daisyui@latest

@import "tailwindcss"; 
@plugin "daisyui";

<button className="btn btn-soft btn-success m-auto">Success</button>

We’ll also add flex flex-col justify-center to the div containing the box and the button to center the elements correctly.

Daisy is working properly now 💪

Setting up Clerk

The interesting part, so we can return to the backend, is setting up Clerk right now. We’ll follow the official documentation to avoid any mistakes.

First things first, we need to pnpm add @clerk/react-router.

Next, copy the API keys into the .env file (we need to create it). They should look like this:

VITE_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Right after that, we’ll open the root.tsx file to configure the rootAuthLoader(). We’ll add the import with the others and the loader function just before the links function:

import { rootAuthLoader } from '@clerk/react-router/ssr.server'

---

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args)
}

Last but not least, wrap the entire app at the entry point with the <ClerkProvider> so we can make authentication globally accessible.

export default function App({ loaderData }: Route.ComponentProps) {
  return (
    <ClerkProvider
      loaderData={loaderData}
      signUpFallbackRedirectUrl="/"
      signInFallbackRedirectUrl="/"
    >
      <header className="flex items-center justify-center py-8 px-4">
        <SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <UserButton />
        </SignedIn>
      </header>
      <main>
        <Outlet />
      </main>
    </ClerkProvider>
  )
}

With all this ready, it’s time to test if it works or not. We run pnpm dev and… TADAH! The Sign In is there 😄

If we sign up now, we’ll be able to create our user.

We create the account, enter the six-digit number we receive in our email inbox, and after entering the number, we'll be logged in!

That's it for this part.

Salut, Jordi.

Check the repository HERE.