Clerk
Integrating Clerk authentication with Saas UI.
Source
@saas-ui/clerk
- 2.11.2 (latest)
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 (<ClerkProviderpublishableKey={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?