Step-by-Step: Implement Authentication with React 19, Clerk 1.0, and GitHub OAuth 2.0

This tutorial walks you through integrating secure, production-ready authentication into a React 19 application using Clerk 1.0 and GitHub OAuth 2.0. You’ll learn to configure OAuth providers, set up Clerk in your React project, and protect routes with minimal boilerplate.

Prerequisites

• Node.js v20 or later installed locally
• Existing React 19 project (or create one during Step 3)
• Free Clerk account
• GitHub account for OAuth app setup

Step 1: Create a Clerk Application

Log in to your Clerk dashboard and click Add Application. Name your app (e.g., "React 19 Auth Demo"), then select GitHub as an authentication provider under the "Social Connections" section. Complete the setup flow to create your app.

Navigate to the API Keys section of your Clerk dashboard. Copy your Publishable Key and Secret Key — you’ll need these later.

Step 2: Configure GitHub OAuth 2.0 App

Log in to your GitHub account and go to Settings > Developer Settings > OAuth Apps, then click New OAuth App.

Fill in the required fields:

• Application Name: Match your Clerk app name (e.g., "React 19 Auth Demo")
• Homepage URL: For local development, use http://localhost:3000
• Authorization Callback URL: Copy this from Clerk’s GitHub provider settings: Go to Clerk Dashboard > Authentication > Social Connections > GitHub, and copy the "Callback URL" provided. It will look like https://clerk.[your-clerk-domain].com/v1/oauth/callback/github

Click Register Application, then copy the generated Client ID. Click Generate Client Secret and copy that value too.

Return to Clerk’s GitHub provider settings, paste the GitHub Client ID and Client Secret into the respective fields, and click Save.

Step 3: Initialize React 19 Project

If you don’t have a React 19 project yet, create one with the following command:

npx create-react@latest my-auth-app
# Select React 19 when prompted, choose TypeScript or JavaScript as preferred

Navigate to your project directory and install the Clerk 1.0 React SDK:

cd my-auth-app
npm install @clerk/clerk-react@^1.0.0

Step 4: Configure Clerk in React 19

Open your project’s entry file (e.g., src/main.tsx for Vite projects, src/index.js for Create React App). Wrap your root component with Clerk’s ClerkProvider and pass your Clerk Publishable Key:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ClerkProvider } from '@clerk/clerk-react';
import App from './App';

const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ClerkProvider 
      publishableKey={clerkPubKey}
      afterSignInUrl="/"
      afterSignUpUrl="/"
    >
      <App />
    </ClerkProvider>
  </React.StrictMode>
);

Create a .env file in your project root and add your Clerk Publishable Key:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here

Note: For Create React App, use REACT_APP_CLERK_PUBLISHABLE_KEY instead of the VITE_ prefix.

Step 5: Add Authentication UI Components

Clerk provides pre-built, customizable UI components for authentication. Update your App.jsx (or App.tsx) to include sign-in/sign-up buttons and user profile controls:

import { SignedIn, SignedOut, SignInButton, SignUpButton, UserButton, useAuth } from '@clerk/clerk-react';

function App() {
  const { user } = useAuth();

  return (
    <div className="app">
      <nav className="nav-bar">
        <h1>React 19 + Clerk 1.0 Auth Demo</h1>
        <SignedOut>
          <SignInButton mode="modal" />
          <SignUpButton mode="modal" />
        </SignedOut>
        <SignedIn>
          <UserButton afterSignOutUrl="/" />
        </SignedIn>
      </nav>
      <main>
        <SignedOut>
          <p>Please sign in or sign up to access the dashboard.</p>
        </SignedOut>
        <SignedIn>
          <h2>Welcome, {user?.firstName}!</h2>
          <p>You are successfully authenticated via GitHub OAuth 2.0.</p>
          <p>Email: {user?.emailAddresses[0]?.emailAddress}</p>
        </SignedIn>
      </main>
    </div>
  );
}

export default App;

Step 6: Protect Routes

Use Clerk’s Protect component or useAuth hook to restrict access to specific routes. For example, create a simple dashboard component:

import { Protect } from '@clerk/clerk-react';

function Dashboard() {
  return (
    <Protect
      fallback={<p>You must sign in to access this page.</p>}
    >
      <div className="dashboard">
        <h2>Protected Dashboard</h2>
        <p>This content is only visible to authenticated users.</p>
      </div>
    </Protect>
  );
}

export default Dashboard;

Add the dashboard route to your app (using React Router if needed — install react-router-dom@latest for React 19 compatibility).

Step 7: Test the Authentication Flow

Start your development server:

npm run dev

Open http://localhost:3000 in your browser. Click Sign In, select GitHub from the modal, and authorize your app on the GitHub OAuth screen. You’ll be redirected back to your app, signed in as your GitHub user.

Test signing out by clicking your user avatar and selecting "Sign Out" from the dropdown.

Step 8: Access User Data

Clerk exposes user data via the useAuth and useUser hooks. The user object includes GitHub profile data like username, avatar URL, and email addresses:

import { useUser } from '@clerk/clerk-react';

function Profile() {
  const { user } = useUser();

  return (
    <div className="profile">
      <img src={user?.imageUrl} alt="User avatar" width="100" />
      <h2>{user?.fullName}</h2>
      <p>GitHub Username: {user?.username}</p>
      <p>Email: {user?.emailAddresses[0]?.emailAddress}</p>
    </div>
  );
}

export default Profile;

Conclusion

You’ve successfully implemented authentication with React 19, Clerk 1.0, and GitHub OAuth 2.0. Clerk handles session management, token refresh, and security best practices out of the box, so you can focus on building your app’s core features. Next steps include adding role-based access control, setting up Clerk webhooks for user events, or deploying your app to production.