string
Clerk
Integrating Clerk authentication with Saas UI.
Source
@saas-ui/clerk
- 2.4.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.
Installation#
yarn add @clerk/clerk-react @saas-ui/clerk
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/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 (<ClerkAuthProviderfrontendApi={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#
frontendApi
frontendApi
Type
Was this helpful?