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.

Install#

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

Configure#

2. Copy apps/web/.env.example to apps/web/.env and add your Clerk publisable key which you can find in the Clerk dashboard.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/login
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/signup
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/app
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/app

3. 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 (
    <ClerkAuthProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
    >
      {({ authService }) => (
        <BaseAuthProvider {...authService}>{props.children}</BaseAuthProvider>
      )}
    </ClerkAuthProvider>
  )
}

Your app is now configured to use Clerk for authentication.

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

Troubleshooting#

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: [
  '@clerk/clerk-react',
  '@saas-ui/clerk',
],

Next up#

• Clerk Next.js documentation