Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.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:

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:

1

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

1

Set up auth

The next step is to run a Redwood CLI command to install the required packages and generate some boilerplate code:

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

You should see terminal output similar to the following:

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

In your code editor of choice, open up web/src/App.tsx (or App.js if you’re not using TypeScript).

Wrap the Redwood <AuthProvider type="clerk"> component with <ClerkAuthProvider>

1

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 or you can use the Clerk components directly.

For example, you can write:

1

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

Next steps

Was this helpful?

Clerk © 2022