Use Clerk with RedwoodJS
Learn how to use Clerk to quickly and easily add secure authentication and user management to your RedwoodJS application.
yarn create redwood-app my-redwood-project --typescriptSet environment variables
Below is an example of an .env.local file.
Pro tip! If you are signed into your Clerk Dashboard, your secret key should become visible by clicking on the eye icon. Otherwise, you can find your keys in the Clerk Dashboard on the API Keys page.
CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY[web]
includeEnvironmentVariables = ['CLERK_PUBLISHABLE_KEY']Set up Redwood auth
The next step is to run a Redwood CLI command to install the required packages and generate some boilerplate code:
yarn rw setup auth clerk --forceYou can now access Clerk functions through the Redwood useAuth() hook, which is exported from src/web/auth.tsx, or you can use the Clerk components directly.
Protecting your pages
Below is an example of using the useAuth hook to verify if the user is authenticated. This will open a modal for your user to sign in to their account.
import { useAuth } from '../../auth'
const HomePage = () => {
const { currentUser, isAuthenticated, logIn, logOut } = useAuth()
return (
<>
{isAuthenticated ? (
<button onClick={logOut}>Log out</button>
<h1>Hello {currentUser.firstName}</h1>
) : (
<button onClick={logIn}>Log in</button>
)}
</>
)
}
export default HomePageimport { SignInButton, UserButton } from '@clerk/clerk-react'
import { useAuth } from '../../auth'
const HomePage = () => {
const { currentUser, isAuthenticated } = useAuth()
return (
<>
{isAuthenticated ? (
<UserButton afterSignOutUrl={window.location.href} />
<h1>Hello {currentUser.firstName}</h1>
) : (
<SignInButton mode="modal" />
)}
</>
)
}Next steps
Now that you have an application integrated with Clerk, you will want to read the following documentation:
Customization & Localization
Learn how to customize and localize the Clerk components.
Authentication Components
Learn more about all our authentication components.
Client Side Helpers
Learn more about our client side helpers and how to use them.
Feedback
Last updated on