Integrating Clerk authentication with Saas UI.

This integration allows you to connect the Clerk API with the Saas UI auth screens and provider.

Supported authentication strategies are:

  • Magic link
  • Password
  • Social login (Oauth)

If you are using Clerk with Next.js, it's recommended to use their Next.js integration. It comes with extra features like SSR and middlware support.


A full working example can be found in the examples folder of the Saas UI repository.


yarn add @clerk/clerk-react @saas-ui/clerk @saas-ui/auth


import { ClerkAuthProvider } from '@saas-ui/clerk'


Setup AuthProvider#

Add ClerkAuthProvider to the root of your app and configure the auth service.

ClerkAuthProvider will add ClerkProvider for you, so you can use all build-in Clerk hooks and components in your app.

import { AuthProvider } from '@saas-ui/auth'
import { ClerkAuthProvider } from '@saas-ui/clerk'
// You can find the publishable key in the Clerk dashboard.
// Authentication with frontendApi is considered legacy.
const frontendApi = ''
function App({ children }) {
return (
{({ authService }) => (
<AuthProvider {...authService}>{children}</AuthProvider>

That's it! Check the Auth documentation to see how to add authentication screens to your app.


ClerkAuthProvider Props#

Was this helpful?