Clerk RedwoodJS SDK
The Clerk RedwoodJS SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.
npm create redwood-app my-redwood-project --typescript
yarn create redwood-app my-redwood-project --typescript
pnpm create redwood-app my-redwood-project --typescript
bun create redwood-app my-redwood-project --typescript
Set environment variables
Below is an example of an .env.local
file.
Pro tip! If you're signed into the Clerk Dashboard, your Secret Key should become visible by clicking on the eye icon. Otherwise, you can find your keys on the API keys page in the Clerk Dashboard.
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 --force
You 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 HomePage
import { SignInButton, UserButton } from '@clerk/clerk-react'
import { useAuth } from '../../auth'
const HomePage = () => {
const { currentUser, isAuthenticated } = useAuth()
return (
<>
{isAuthenticated ? (
<>
<UserButton />
<h1>Hello {currentUser.firstName}</h1>
</>
) : (
<SignInButton mode="modal" />
)}
</>
)
}
Feedback
Last updated on