Clerk
Integrating Clerk authentication with Saas UI.
Source
@saas-ui/clerk
- 2.10.1 (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
Import
import { ClerkAuthProvider } from '@saas-ui/clerk'
Usage
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 = 'clerk.x.x.lcl.dev'function App({ children }) {return (<ClerkAuthProviderfrontendApi={frontendApi}publishableKey={process.env.CLERK_PUBLISABLE_KEY}>{({ authService }) => (<SaasProvider><AuthProvider {...authService}>{children}</AuthProvider></SaasProvider>)}</ClerkAuthProvider>)}
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.
Props
ClerkAuthProvider Props
Was this helpful?