Middleware

If you plan to use Next.js API routes or server-side rendering with getAuth, you must install withClerkMiddleware in your Next.js middleware. Otherwise, you can skip this step.

Copy this snippet into a file named middleware.js or middleware.ts in your project root.

1
import { withClerkMiddleware } from "@clerk/nextjs/server";
2
import { NextResponse } from "next/server";
3

4
export default withClerkMiddleware((req) => {
5
  return NextResponse.next();
6
});
7

8
// Stop Middleware running on static files
9
export const config = { matcher:  '/((?!_next/image|_next/static|favicon.ico).*)',};

1
import { withClerkMiddleware } from "@clerk/nextjs/server";
2
import { NextResponse } from "next/server";
3
import type { NextRequest } from 'next/server'
4

5
export default withClerkMiddleware((req: NextRequest) => {
6
  return NextResponse.next();
7
});
8

9
// Stop Middleware running on static files
10
export const config = { matcher:  '/((?!_next/image|_next/static|favicon.ico).*)',};
11

1
import { withClerkMiddleware, getAuth } from '@clerk/nextjs/server'
2
import { NextResponse } from 'next/server'
3
import type { NextRequest } from 'next/server'
4

5
// Set the paths that don't require the user to be signed in
6
const publicPaths = ['/', '/sign-in*', '/sign-up*']
7

8
const isPublic = (path: string) => {
9
  return publicPaths.find(x =>
10
    path.match(new RegExp(`^${x}$`.replace('*$', '($|/)')))
11
  )
12
}
13

14
export default withClerkMiddleware((request: NextRequest) => {
15
  if (isPublic(request.nextUrl.pathname)) {
16
    return NextResponse.next()
17
  }
18
  // if the user is not signed in redirect them to the sign in page.
19
  const { userId } = getAuth(request)
20

21
  if (!userId) {
22
    // redirect the users to /pages/sign-in/[[...index]].ts
23
    
24
    const signInUrl = new URL('/sign-in', request.url)
25
    signInUrl.searchParams.set('redirect_url', request.url)
26
    return NextResponse.redirect(signInUrl)
27
  }
28
  return NextResponse.next()
29
})
30

31
export const config = { matcher:  '/((?!_next/image|_next/static|favicon.ico).*)',};

Clerk only depends on the withClerkMiddleware() wrapper. You are welcome to customize the internal middleware function as needed.

Before Next.js 12.2

Using the withEdgeMiddlewareAuth wrapper you can access authentication data

1
import { withEdgeMiddlewareAuth } from "@clerk/nextjs/edge-middleware";
2

3
export default withEdgeMiddlewareAuth(async req => {
4
  const { userId, sessionId, getToken } = req.auth;
5
  const supabaseToken = await getToken({ template: 'supabase' })
6
  // Run your middleware
7

8
  // Complete response
9
  return NextResponse.next();
10
});

1
import { withEdgeMiddlewareAuth } from '@clerk/nextjs/edge-middleware'
2
import { NextResponse, NextRequest } from 'next/server'
3
import { ServerGetToken } from '@clerk/types'
4

5
//example usage of interfaces with Clerk
6
interface ClerkRequest extends NextRequest {
7
  auth: {
8
    userId?: string | null
9
    sessionId?: string | null
10
    getToken: ServerGetToken
11
  }
12
}
13

14
export default withEdgeMiddlewareAuth(async (req: ClerkRequest) => {
15
  const { userId, sessionId, getToken } = req.auth
16
  const supabaseToken = await getToken({ template: 'supabase' })
17
  // Load any data your application needs for the API route
18
  return NextResponse.next();
19
})

Example Response

{
  sessionId: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
  userId: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj',
  orgId: null,
  getToken: [AsyncFunction (anonymous)],
  claims: {
    azp: 'http://localhost:3000',
    exp: 1666622607,
    iat: 1666622547,
    iss: 'https://clerk.quiet.muskox-85.lcl.dev',
    nbf: 1666622537,
    sid: 'sess_2GaMqUCB3Sc1WNAkWuNzsnYVVEy',
    sub: 'user_2F2u1wtUyUlxKgFkKqtJNtpJJWj'
  }
}

More detailed information about the fields in this object can be found in the Authentication Object documentation.