Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

Gatsby Authentication

Learn to install and initialize Clerk in a new Gatsby application.

Learn more about Gatsby authentication with Clerk.

Overview

Clerk is the easiest way to add authentication and user management to your Gatsby application. This guide will walk you through the necessary steps to install and use Clerk in a new Gatsby application. After following this guide, you should have a working Gatsby app complete with:

  • Fully fledged sign in and sign up flows.
  • Google Social Login.
  • Secure email/password authentication.
  • A prebuilt user profile page.

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.

Create a new Gatsby app

Start by creating a new Gatsby application - this is usually done using the npx gatsby new CLI:

Choose a directory to create the app and follow the terminal prompts to set up your app with your preferred options.

Installing the plugin

Once you have a Gatsby app ready, you need to install the Clerk React SDK and gatsby-plugin-clerk. This will give you access to our prebuilt Clerk Components and React hooks.

1

As a next step, you'll need the frontendApi key of your Clerk application.

So, let's configure the plugin on gatsby-config.js.

gatsby-config.js
1

Clerk is now successfully installed.

From here, you can start using components like SignedIn and SignedOut from the root of your app.

src/pages/index.js
1

Clerk + Gatsby starter repository

To make it even easier for you, we went ahead and created a Clerk + Gatsby starter repository. It has Clerk integrated with Gatsby's default starter.

Inside src/api you can also find the new Gatsby Functions in action. We added a couple of examples there, so you know how to use Gatsby's serverless functions with Clerk's backend API.

Fork it, clone it, and build it!

Next steps

Was this helpful?

Clerk © 2022