Clerk Authentication

How to configure the Clerk authentication service.

Clerk is a service that provides beautiful and secure user authentication. This guide will show you how to configure Clerk in your app and connect them to the Saas UI authentication components.


  1. Install the Clerk React client and the Saas UI Clerk integration in apps/web.
cd apps/web && yarn add @clerk/clerk-react @saas-ui/clerk

clerk-react is a dependency of @saas-ui/clerk and is required to be installed in the same package. To use Clerks Next.js feature like middleware support, you need to install @clerk-ui/nextjs as well.

yarn add @clerk/nextjs


  1. Copy apps/web/.env.example to apps/web/.env and add your Clerk publisable key which you can find in the Clerk dashboard.
  1. Edit apps/web/src/features/common/providers/auth.tsx and add the Clerk provider.
import { AuthProvider as BaseAuthProvider } from '@saas-ui/auth'
import { ClerkAuthProvider } from '@saas-ui/clerk'
export const AuthProvider = (props: { children: React.ReactNode }) => {
return (
{({ authService }) => (
<BaseAuthProvider {...authService}>{props.children}</BaseAuthProvider>

Your app is now configured to use Clerk for authentication.

Open http://localhost:3000/app to try it out.


If you get the following error in Next.js you can add the following to nextjs.config.mjs. This will resolve any ESM / CommonJS issues which can accur with @clerk/clerk-react > 4.18

SyntaxError: Named export 'AuthenticateWithRedirectCallback' not found. The requested module '@clerk/clerk-react' is a CommonJS module, which may not support all module.exports as named exports.
transpilePackages: [

Next up#

  • Clerk Next.js documentation

Was this helpful?