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)

Import#

import { ClerkAuthProvider } from '@saas-ui/clerk'

Usage#

If you haven't done so already install @clerk/clerk-react.

yarn add @clerk/clerk-react

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 frontend api key in the Clerk dashboard.
const frontendApi = 'clerk.x.x.lcl.dev'
function App({ children }) {
return (
<ClerkAuthProvider frontendApi={frontendApi}>
{({ 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

Type
string

Was this helpful?