Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

RedwoodJS Authentication

Learn how to install Clerk in a RedwoodJS application

Learn more about RedwoodJS authentication with Clerk.

Overview

Clerk is the easiest way to add authentication and user management to your Redwood application. This guide will walk you through the necessary steps to install and use Clerk in a new create redwood-app application.

After following this guide, you should have a working Redwood app complete with:

  • Fully fledged sign in and sign up flows.
  • Social Logins.
  • Secure email/password authentication.

Looking for a quickstart? We created a demo app to show you how to add Clerk to your project.

Before you start

You need to create a Clerk Application in your Clerk Dashboard. For more information, check out our Set up your application guide.

Creating a new Redwood app

Start by creating a new React application - this is usually done using the create redwood-app CLI:

yarn create redwood-app my-redwood-project

Installing Clerk

After your Clerk application has been created, retrieve your API keys from the API Keys page.

In your Redwood app directory, create a .env file (if one does not currently exist) and set the following environment variables to the respective values from your Clerk dashboard:

.env
1

In order for the Frontend API to be accessible to the Web side in production, you need to add CLERK_PUBLISHABLE_KEY to the includeEnvironmentVariables array in the redwood.toml file:

.env
1

Set up 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

Note: The --force flag is needed to overwrite the existing dbAuth logic.

You should see terminal output similar to the following:

✔ Generating auth lib...
  ✔ Successfully wrote file `./api/src/lib/auth.js`
  ✔ Adding auth config to web...
  ✔ Adding auth config to GraphQL API...
  ✔ Adding required web packages...
  ✔ Adding required api packages...
  ✔ Installing packages...
  ✔ One more thing...


    You'll need to add three env vars to your .env file:
    
    CLERK_PUBLISHABLE_KEY="..."
    CLERK_SECRET_KEY="..."
    ...

If you already followed the instructions to add your environment variables, you should be all set. If you didn’t, add them now.

Add Clerk components and hooks

Now that Clerk auth is set up, restart the dev server with yarn rw dev. If you had the dev server running, it must be restarted to read the newly added environment variables.

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.

For example, you can write:

1
import { useAuth } from '../../auth'
2


3
const HomePage = () => {
4
  const { currentUser, isAuthenticated, logIn, logOut } = useAuth()
5


6
  return (
7
    <>
8
      {isAuthenticated ? (
9
        <button onClick={logOut}>Log out</button>
10
      ) : (
11
        <button onClick={logIn}>Log in</button>
12
      )}
13
      {isAuthenticated && <h1>Hello {currentUser.firstName}</h1>}
14
    </>
15
  )
16
}
17


18
export default HomePage

The isAuthenticated property checks if there is an active user session. Clicking the “Log in” button opens a modal window allowing you to sign in with the authentication methods chosen when you set up the project in the Clerk dashboard.

Since Clerk React is installed, you can use the Clerk components instead:

1
import { SignInButton, UserButton } from '@clerk/clerk-react'
2
import { useAuth } from '../../auth'
3


4
const HomePage = () => {
5
  const { currentUser, isAuthenticated } = useAuth()
6


7
  return (
8
    <>
9
      {isAuthenticated ? (
10
        <UserButton afterSignOutUrl={window.location.href} />
11
      ) : (
12
        <SignInButton mode="modal" />
13
      )}
14
      {isAuthenticated && <h1>Hello {currentUser.firstName}</h1>}
15
    </>
16
  )
17
} 
18


19
export default HomePage

Next steps

Was this helpful?

Clerk © 2023