Xion Apex Academy

Posted on Sep 29

# DevLog: Building GritPath OS - Day 2 Using Clerk Auth

#nextjs #beginners #clerk #webdev

DevLog: Building GritPath OS - Day 2 Using Clerk Auth

Overview

As previously mentioned, today's focus is on implementing Clerk authentication in our GritPath OS project. This post will cover the setup process, referencing Clerk's documentation, and sharing my understanding of how Clerk integrates with our project. While most of the setup covered here is for development, I'll also touch on production considerations where applicable.

Getting Started with Clerk

Step 1: Installation

First things first - once your project template is set up, install the Clerk Next.js package:

npm install @clerk/nextjs

Step 2: Setting Up Middleware

After installation, you'll need to create a middleware.ts file. This can be placed in one of three locations:

app/ directory
src/ directory
Root project folder

The middleware is what grants users authentication throughout your app. In my case, I had two middleware files - one in the root and one in the app section.

In your middleware.ts file, export the clerkMiddleware() helper:

middleware.ts

import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

Important Note: By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for specific routes. You can set this up later - for now, the most important thing is ensuring everything works.

Adding ClerkProvider and Components

Step 3: Adding ClerkProvider to Your Layout

Add the <ClerkProvider> component to your app's layout. This component provides Clerk's authentication context throughout your app.

The implementation depends on your project structure. In my case, I added it to my layout.tsx and included it on my landing page for the sign-in buttons.

Step 4: Using Clerk Authentication Components

Clerk provides several pre-designed authentication components. You can check out their documentation at https://clerk.com/docs/nextjs/reference/components/user/user-button for different types of ready-made authentication components.

If you're using custom styled components, you'll want to use their Unstyled components:

<SignInButton>
<SignInWithMetamaskButton>
<SignUpButton>
<SignOutButton>

Step 5: Implementing the Components

Here's how to properly wrap and implement the components in your layout:

import type { Metadata } from 'next'
import { 
  ClerkProvider, 
  SignInButton, 
  SignUpButton, 
  SignedIn, 
  SignedOut, 
  UserButton 
} from '@clerk/nextjs'

export default function RootLayout({ 
  children 
}: Readonly<{ 
  children: React.ReactNode 
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <SignedOut>
            <SignInButton>
              <button>Sign In</button>
            </SignInButton>
            <SignUpButton>
              <button>Sign Up</button>
            </SignUpButton>
          </SignedOut>
          <SignedIn>
            <UserButton />
          </SignedIn>
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}

Key Point: When using unstyled buttons, you need to wrap them with <SignedIn> and <SignedOut> components to control when they're displayed based on authentication status.

Dashboard Configuration

Step 6: Setting Up Your Clerk Dashboard

Once the code setup is complete, head to your Clerk dashboard:

For new projects: Follow the onboarding process to set up your auth app
For existing projects: Click "Configure" on the dashboard (screenshots will be provided)
Go to the first setting and configure your user authentication to preview how it will look

One of the great features of Clerk is that each setting lets you preview how everything will appear once you're done making changes.

Step 7: JWT Token Configuration (Convex Integration)

Scroll down to the JWT Token section. While I won't cover this extensively here (that's for another write-up), here's the basic setup for Convex integration:

Click "New Template" or the "+" sign
Name: Convex
Template: Select "Convex" from the available options
This will generate a number that you can copy for later use

Step 8: Customization

Scroll down to the customization section and make your login look however you like.

Step 9: API Keys Setup

Finally, go to your API section where you should see two important keys:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

Copy these and place them in your .env.local or .env environment file for your project.

Important Notes

Development vs Production: Your development and production setups are quite different, and production tends to require more work. I'll explain this in detail next time.
Template vs From Scratch: Since I'm using a template, the process is slightly different from building everything from scratch, but the core concepts remain the same.
This is a rough guide - I'll be adding screenshots of the dashboard and various screens in future updates.

Next Steps

In the next DevLog, I'll cover:

Production deployment considerations
JWT token integration in more detail
Dashboard screenshots and visual guides
Advanced authentication flows

That's a wrap for Day 2! The foundation is set, and we're ready to build upon this authentication system. I'll explain a bit more about going into production from what I know and understand.

DEV Community