“Digging into Gatsby 5’s Slice API” Register now

ContactSign Up for Free
Community Plugin
View plugin on GitHub


Drop-in Clerk integration for Gatsby sites.

This plugin adds ClerkProvider around your app.


  1. Install the plugin and its peer dependency:
npm i gatsby-plugin-clerk @clerk/clerk-react

# or

yarn add gatsby-plugin-clerk @clerk/clerk-react


  1. Add gatsby-plugin-clerk as a plugin in your Gatsby config:
// gatsby-config.js

module.exports = {
    plugins: [
            resolve: 'gatsby-plugin-clerk',
            options: {
                // OBS: Don't push your frontend API key to version control.
                // A safer approach is to set it as an environment variable for each environment your app will run in.
                frontendApi: <YOUR_FRONTEND_API_KEY>
  1. Use Clerk:
// src/pages/index.js

import React from 'react'
import { SignIn, SignedIn, SignedOut, UserButton } from '@clerk/clerk-react'

function IndexPage() {
    return (
                <UserButton />

                <SignIn />

export default IndexPage
© 2022 Gatsby, Inc.