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.

Was this helpful?