Simplify User Management with Clerk in Your Web Application

Unlock Secure & Simple User Management

I was thinking of putting a gimmick in this page.

You need to sign in for some articles

Lol. So I thought of adding authentication but doing it takes a lot of time and I need to be well-versed in a specific authentication set up and honestly I don't have the time for now to figure out how to do it. I need to create more blogs for this page for now. Luckily I found Clerk.com

If you want the comprehensive tutorial read Clerk's Documentation.

So this is how I set up the authentication in my website, targeting only a specific article.

1Create a Clerk Account here

2In your dashboard create an application.

Write your Application Name and under the Sign in options toggle Single sign-on options of your choice.

Then click the button

Once the application is created in the Clerk dashboard, you will be redirected to the API Keys page, which will show you your application's API keys.

3Copy your API keys

4Create $.env.local file in your root folder.

5And paste the API keys in your $.env.local

6In your RootLayout:

/src/app/layout.tsx

Copy Code

1
2import { ClerkProvider } from '@clerk/nextjs'
3import './globals.css'
4 
5export default function RootLayout({
6  children,
7}: {
8  children: React.ReactNode
9}) {
10  return (
11    <ClerkProvider>
12      <html lang="en">
13        <body>{children}</body>
14      </html>
15    </ClerkProvider>
16  )
17}
18

<ClerkProvider> must be in the RootLayout. The entire web app should be wrapped inside the Clerk Provider

If you try to wrap a specific page with <ClerkProvider> it won't work.
I tried it.

How Do You Trigger Authentication
For a Specific Page?

7Create middleware.ts file in your root file

8and Copy this code

middleware.ts

Copy Code

1
2import { authMiddleware } from "@clerk/nextjs";
3 
4// See https://clerk.com/docs/references/nextjs/auth-middleware
5// for more information about configuring your Middleware
6export default authMiddleware({
7  // Allow signed out users to access the specified routes:
8  // publicRoutes: ['/anyone-can-visit-this-route'],
9});
10 
11export const config = {
12  matcher: [
13    // Exclude files with a "." followed by an extension, which are typically static files.
14    // Exclude files in the _next directory, which are Next.js internals.
15    "/((?!.+\.[\w]+$|_next).*)",
16    // Re-include any files in the api or trpc folders that might have an extension
17    "/(api|trpc)(.*)"
18  ]
19};
20

Now Let's Modify the Code

Let's take a look at this portion of the code

1
2// See https://clerk.com/docs/references/nextjs/auth-middleware
3// for more information about configuring your Middleware
4export default authMiddleware({
5  // Allow signed out users to access the specified routes:
6  // publicRoutes: ['/anyone-can-visit-this-route'],
7});
8

We can configure a specific route in our application to be available to users who are not signed in.

Give publicRoutes a value array of all the routes you want to be publicly available with no authentication needed.

Copy Code

1
2let publicRoutes = [
3    '/', 
4    "/articles", 
5    "/about", 
6    "/articles/thanks-clerk"  
7];
8
9export default authMiddleware({
10  // Allow signed out users to access the specified routes:
11   publicRoutes: publicRoutes,
12});
13