How to Add Clerk Login & Logout Authentication in React.js Web Application

Authentication is one of the most essential parts of any modern web application. Instead of building everything from scratch, we can use Clerk, a developer-friendly authentication and user management solution, to add secure and scalable login to a React.js app.

---

Why Clerk?

• Easy-to-use authentication flows (email, social logins, etc.)
• Pre-built UI components for login, sign-up, and user profiles
• Secure session management and JWT support
• Scalable and customizable for your app’s needs

---

Method 1: Full Routing & Protected Pages Setup

---

Step-by-Step Guide to Adding Clerk Authentication

1. Set Up Your Clerk Account

Head to Clerk’s website and sign up for a free account.

Create a new application in the Clerk dashboard and grab your Publishable Key and Secret Key.

---

2. Install Clerk in Your React Project

Assuming you have a React.js app set up (if not, use npx create-react-app my-app), install the Clerk SDK:

npm install @clerk/clerk-react  

---

3. Configure Clerk in Your App

Wrap your app with the ClerkProvider component to enable Clerk’s functionality. In your index.js or App.js:

import { ClerkProvider } from '@clerk/clerk-react';  
import { BrowserRouter } from 'react-router-dom';  

const clerkPubKey = 'YOUR_PUBLISHABLE_KEY'; // Replace with your Clerk Publishable Key  

function App() {  
  return (  
    <ClerkProvider publishableKey={clerkPubKey}>  
      <BrowserRouter>  
        {/* Your app components go here */}  
      </BrowserRouter>  
    </ClerkProvider>  
  );  
}  

export default App;  

---

4. Add Clerk’s Pre-Built Components

Clerk provides ready-to-use components like SignIn and SignUp. Add a login page to your app:

// src/pages/Login.js  
import { SignIn } from '@clerk/clerk-react';  

function Login() {  
  return (  
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>  
      <SignIn />  
    </div>  
  );  
}  

export default Login;  

Add this to your routes (e.g., using react-router-dom):

import { Routes, Route } from 'react-router-dom';  
import Login from './pages/Login';  

function App() {  
  return (  
    <ClerkProvider publishableKey={clerkPubKey}>  
      <BrowserRouter>  
        <Routes>  
          <Route path="/login" element={<Login />} />  
          {/* Other routes */}  
        </Routes>  
      </BrowserRouter>  
    </ClerkProvider>  
  );  
}  

---

5. Protect Routes with Clerk

To restrict access to authenticated users only, use Clerk’s SignedIn and SignedOut components or the useAuth hook. Example:

import { SignedIn, SignedOut, RedirectToSignIn, UserButton } from '@clerk/clerk-react';  

function Dashboard() {  
  return (  
    <div>  
      <SignedIn>  
        <h1>Welcome to the Dashboard!</h1>  
        <UserButton /> {/* Displays user profile and sign-out option */}  
      </SignedIn>  
      <SignedOut>  
        <RedirectToSignIn /> {/* Redirects to login if not signed in */}  
      </SignedOut>  
    </div>  
  );  
}  

export default Dashboard;  

---

6. Customize the Look and Feel

Clerk’s components are customizable via their dashboard or by overriding CSS. You can also use the appearance prop to style components:

<SignIn  
  appearance={{  
    elements: {  
      formButtonPrimary: 'bg-blue-500 hover:bg-blue-600 text-white',  
    },  
  }}  
/>  

---

7. Test Your Authentication Flow

Run your app (npm start).
Navigate to /login to see the Clerk login UI.
Test signing up, logging in, and accessing protected routes.

Bonus: Accessing User Data

Use Clerk’s useUser hook to access the authenticated user’s info:

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

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

  if (!user) return <div>Loading...</div>;  

  return <div>Welcome, {user.firstName}!</div>;  
}  

---

Method 2: Minimal Setup with SignIn/SignUp

---

Authentication is one of the most essential parts of any modern app. Instead of building everything manually, Clerk gives us:

• Pre-built sign-in/sign-up components
• Support for Google, GitHub & other providers
• Simple React hooks & APIs

---

Step 1: Create React App

npx create-react-app my-app
cd my-app

---

Step 2: Install Clerk

npm install @clerk/clerk-react

---

Step 3: Wrap with ClerkProvider

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

const clerkFrontendApi = "YOUR_FRONTEND_API_KEY";

ReactDOM.render(
  <ClerkProvider publishableKey={clerkFrontendApi}>
    <App />
  </ClerkProvider>,
  document.getElementById("root")
);

---

Step 4: Add Authentication Components

import { SignIn, SignUp, UserButton, useUser } from "@clerk/clerk-react";

function App() {
  const { isSignedIn } = useUser();

  return (
    <div>
      {!isSignedIn ? (
        <>
          <h2>Welcome! Please Sign In</h2>
          <SignIn />
          <SignUp />
        </>
      ) : (
        <>
          <h2>Dashboard</h2>
          <UserButton />
        </>
      )}
    </div>
  );
}

export default App;

---

Step 5: Run Your App

npm start

You now have a working React app with Clerk authentication 🎉

---

Next Steps

• Add protected routes with SignedIn and SignedOut.
• Explore OAuth (Google, GitHub, etc.).
• Build a custom Profile Page using useUser.

---

Resources

• Clerk Documentation
• Clerk React SDK
• React Router for routing

---

Conclusion

Clerk makes authentication in React apps simple, secure, and production-ready without the headache of managing sessions and tokens manually. If you’re building a React.js project, Clerk is worth trying out for fast authentication setup.