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 the @app/features package.

cd packages/app-features && 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 public Supabase URL and KEY.

NEXT_PUBLIC_CLERK_PUBLISABLE_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 packages/app-features/core/providers/auth.tsx and add the Clerk provider.

import { AuthProvider as BaseAuthProvider } from '@saas-ui/react'
import { ClerkAuthProvider } from '@saas-ui/clerk'

export const AuthProvider = (props: { children: React.ReactNode }) => {
  return (
    <ClerkAuthProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISABLE_KEY}
    >
      {({ authService }) => (
        <BaseAuthProvider {...authService}>{children}</BaseAuthProvider>
      )}
    </ClerkAuthProvider>
  )
}

Your app is now configured to use Clerk for authentication.

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

Next up#

• Clerk Next.js documentation