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.

Example#

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

Installation#

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

Usage#

Setup AuthProvider#

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

import { useMemo } from 'react'
import { SaasProvider } from '@saas-ui/react'
import { createAuthService } from '@saas-ui/clerk'
import { AuthProvider } from '@saas-ui/auth'
import { useClerk, ClerkProvider } from '@clerk/clerk-react'

export function Provider({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <SaasProvider>
        <AuthServiceProvider>{children}</AuthServiceProvider>
      </SaasProvider>
    </ClerkProvider>
  )
}

function AuthServiceProvider({ children }: { children: React.ReactNode }) {
  const clerk = useClerk()

  const authService = useMemo(() => {
    if (clerk.loaded) {
      return createAuthService(clerk)
    }
  }, [clerk.loaded])

  if (!clerk.loaded) {
    return null
  }

  return <AuthProvider {...authService}>{children}</AuthProvider>
}

Configure Clerk#

Login with Password#

To use password authentication, you need to enable Password in the Clerk dashboard. You can enable this under Configure > User & Authentication > Email, Phone, Username.

Login with email#

To use magic link authentication, you need to enable Email verification link in the Clerk dashboard. You can enable this under Configure > User & Authentication > Email, Phone, Username.

Next steps#

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