Clerk

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.

Import#

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

Usage#

If you haven't done so already install @clerk/clerk-react.

yarn add @clerk/clerk-react

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/react'
import { ClerkAuthProvider } from '@saas-ui/clerk'

// You can find the publishable key in the Clerk dashboard.

// Authentication with frontendApi is considered legacy.
const frontendApi = 'clerk.x.x.lcl.dev'

function App({ children }) {
  return (
    <ClerkAuthProvider
      frontendApi={frontendApi}
      publishableKey={process.env.CLERK_PUBLISABLE_KEY}
    >
      {({ authService }) => (
        <SaasProvider>
          <AuthProvider {...authService}>{children}</AuthProvider>
        </SaasProvider>
      )}
    </ClerkAuthProvider>
  )
}

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

Props#

ClerkAuthProvider Props#