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#
- 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#
- Copy
apps/web/.env.example
toapps/web/.env
and add your public Supabase URL and KEY.
NEXT_PUBLIC_CLERK_PUBLISABLE_KEY=""NEXT_PUBLIC_CLERK_SIGN_IN_URL=/loginNEXT_PUBLIC_CLERK_SIGN_UP_URL=/signupNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/appNEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/app
- 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 (<ClerkAuthProviderpublishableKey={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#
Was this helpful?