Gatsby Authentication

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

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.

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
# Navigate to your application's root directory
2
cd your_app
3
4
# Install the necessary Clerk packages
5
npm install gatsby-plugin-clerk @clerk/clerk-react

As a next step, you'll need the frontendApi key of your Clerk application. To find it, go to the API Keys page and copy the Frontend API Key field.

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

gatsby-config.js
1
module.exports = {
2
plugins: [
3
{
4
resolve: 'gatsby-plugin-clerk',
5
options: {
6
frontendApi: <YOUR_FRONTEND_API_KEY>
7
}
8
}
9
]
10
}

Clerk is now successfully installed 🎉

From here onwards, everything should work just the same. You can start using components like SignedIn and SignedOut from the root of your app.

src/pages/index.js
1
import React from 'react'
2
import {
3
SignIn,
4
SignedIn,
5
SignedOut,
6
UserButton
7
} from '@clerk/clerk-react'
8
9
export default function IndexPage() {
10
return (
11
<>
12
<SignedIn>
13
<UserButton />
14
</SignedIn>
15
<SignedOut>
16
<SignIn />
17
</SignedOut>
18
</>
19
)
20
}

And that's it, in just a few steps, we added easy and secure authentication with beautiful and complete user management to your Gatsby app.

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!

© 2022 Clerk. All rights reserved.