Skip to main content
Docs
Dashboard

Add React Router to your Clerk-powered Chrome Extension

You will learn the following:

  • Install react-router-dom
  • Create components for your routes
  • Create layouts
  • Wire layouts and routes up with createMemoryRouter

Before you start

Example repository

This tutorial demonstrates how to integrate React Router into your Chrome Extension application.

Install react-router-dom

React Router is a lightweight, fully-featured routing library. To install it in your project, run the following command:

terminal
pnpm add react-router-dom

Important

This guide assumes you're using Plasmo to build your Chrome Extension, so you must use pnpm as your package manager.

Create routes

  1. In the src/ directory, create a popup/ directory.
  2. In the popup/ directory, create a routes/ directory.
  3. In the routes/ directory, create the home.tsx, sign-in.tsx, sign-up.tsx, and settings.tsx files.
  4. Use the following tabs to view the code necessary for each file.
src/popup/routes/home.tsx
export const Home = () => {
  return (
    <>
      <h1>Clerk + Chrome Extension + React Router</h1>
    </>
  )
}
src/popup/routes/sign-in.tsx
import { SignIn } from '@clerk/chrome-extension'

export const SignInPage = () => {
  return (
    <>
      <p>Sign In</p>
      <SignIn routing="virtual" />
    </>
  )
}
src/popup/routes/sign-up.tsx
import { SignUp } from '@clerk/chrome-extension'

export const SignUpPage = () => {
  return (
    <>
      <p>Sign Up</p>
      <SignUp routing="virtual" />
    </>
  )
}
src/popup/routes/settings.tsx
import { UserProfile } from '@clerk/chrome-extension'

export const Settings = () => {
  return (
    <>
      <h1>Settings</h1>
      <UserProfile routing="virtual" />
    </>
  )
}

Create layouts

  1. Delete your src/popup.tsx file.
  2. In your src/popup/ directory, create a layouts/ directory.
  3. In the layouts/ directory, create a root-layout.tsx file.
  4. In the root-layout.tsx file, paste the following code to create a layout for your app.
    • The layout contains an <Outlet /> component from react-router-dom. This behaves similar to {children} in Next.js or more generic React components.
    • The footer includes Clerk's <UserButton /> component and a link to the /settings page, which renders Clerk's <UserProfile /> component. Clerk's <SignedIn> and <SignedOut> control components determine what's displayed based on the user's authentication state.
src/popup/layouts/root-layout.tsx
import { Link, Outlet, useNavigate } from 'react-router-dom'
import { ClerkProvider, SignedIn, SignedOut, UserButton } from '@clerk/chrome-extension'

const PUBLISHABLE_KEY = process.env.PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Please add the PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY to the .env.development file')
}

export const RootLayout = () => {
  const navigate = useNavigate()

  return (
    <ClerkProvider
      routerPush={(to) => navigate(to)}
      routerReplace={(to) => navigate(to, { replace: true })}
      publishableKey={PUBLISHABLE_KEY}
      afterSignOutUrl="/"
    >
      <div className="plasmo-w-[785px] plasmo-h-[600px]">
        <main>
          <Outlet />
        </main>
        <footer>
          <SignedIn>
            <Link to="/settings">Settings</Link>
            <UserButton />
          </SignedIn>
          <SignedOut>
            <Link to="/">Home</Link>
            <Link to="/sign-in">Sign In</Link>
            <Link to="/sign-up">Sign Up</Link>
          </SignedOut>
        </footer>
      </div>
    </ClerkProvider>
  )
}

Configure layouts and routes with createMemoryRouter

React Router's createMemoryRouter is a router that uses memory to store the state of the router instead of the browser's history. This is useful for creating a router in a non-browser environment like a Chrome Extension.

  1. In the src/popup/ directory, create an index.tsx file.
  2. In the index.tsx file, paste the following code to configure your routes with createMemoryRouter.
src/popup/index.tsx
import React from 'react'

import '../style.css'

import { createMemoryRouter, RouterProvider } from 'react-router-dom'

import { RootLayout } from './layouts/root-layout'
import { Home } from './routes/home'
import { Settings } from './routes/settings'
import { SignInPage } from './routes/sign-in'
import { SignUpPage } from './routes/sign-up'

const router = createMemoryRouter([
  {
    // Wraps the entire app in the root layout
    element: <RootLayout />,
    // Mounted where the <Outlet /> component is inside the root layout
    children: [
      { path: '/', element: <Home /> },
      { path: '/sign-in', element: <SignInPage /> },
      { path: '/sign-up', element: <SignUpPage /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
])

export default function PopupIndex() {
  return <RouterProvider router={router} />
}

Test the integration

  1. Run your project with the following command:
    terminal
    pnpm dev
  2. In your Chrome browser, open the extension popup. Ensure that the home page displays with a footer containing the Home, Sign In, and Sign Up links.
  3. Visit the Sign Up link and ensure the <SignUp /> component is rendered.
  4. Visit the Sign In link and ensure the <SignIn /> component is rendered. Sign in with your account. You'll be redirected to the home page and the footer will display the Settings link and the <UserButton /> component.
  5. Select the <UserButton /> component to open the user menu.
  6. Visit the Settings link and ensure the <UserProfile /> component is rendered.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on