So fügen Sie einer React-App mit Clerk im Jahr 2026 eine Authentifizierung hinzu

Der Aufbau einer Authentifizierung von Grund auf ist komplex und fehleranfällig – Anmeldeabläufe, Passwort-Zurücksetzung, soziale Anmeldung, Sitzungsverwaltung und Sicherheit. Sachbearbeiter erledigt alles mit Drop-in-React-Komponenten. Dieser Leitfaden fügt einer React-App schnell und sicher eine vollständige Authentifizierung hinzu.

Warum Clerk verwenden?

• Vorgefertigte UI-Komponenten: Anmelde-, Registrierungs- und Benutzerprofilkomponenten sind sofort einsatzbereit
• Eingebautes soziales Login: Google, GitHub und mehr mit minimaler Konfiguration
• Behandelt die schwierigen Teile: Sitzungen, Passwort-Reset, E-Mail-Verifizierung, MFA
• Standardmäßig sicher: Befolgt bewährte Sicherheitspraktiken, die Sie nicht implementieren müssen
• Benutzerverwaltung: Ein Dashboard zum Anzeigen und Verwalten von Benutzern

Einrichtung

npm install @clerk/clerk-react

# Create an app at clerk.com, get your publishable key, add to .env
VITE_CLERK_PUBLISHABLE_KEY=pk_test_xxx

Verpacken Sie Ihre App mit ClerkProvider

// main.jsx
import { ClerkProvider } from '@clerk/clerk-react';

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

ReactDOM.createRoot(document.getElementById('root')).render(
  <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
    <App />
  </ClerkProvider>
);

Anmelden und Registrieren hinzufügen

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

function Header() {
  return (
    <header>
      <SignedOut>
        {/* Shown only when signed OUT */}
        <SignInButton />
        <SignUpButton />
      </SignedOut>

      <SignedIn>
        {/* Shown only when signed IN - includes profile/sign-out menu */}
        <UserButton />
      </SignedIn>
    </header>
  );
}

Vollständige Anmelde-/Registrierungsseiten

import { SignIn, SignUp } from '@clerk/clerk-react';

// Dedicated sign-in page with the full Clerk UI
function SignInPage() {
  return <SignIn routing="path" path="/sign-in" />;
}

function SignUpPage() {
  return <SignUp routing="path" path="/sign-up" />;
}
// These render complete, styled auth flows with social login,
// password reset, email verification - all handled for you

Routen schützen

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

function ProtectedPage() {
  return (
    <>
      <SignedIn>
        {/* Protected content - only for signed-in users */}
        <Dashboard />
      </SignedIn>
      <SignedOut>
        {/* Redirect signed-out users to sign in */}
        <RedirectToSignIn />
      </SignedOut>
    </>
  );
}

Zugriff auf Benutzerdaten

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

function Profile() {
  const { isLoaded, isSignedIn, user } = useUser();

  if (!isLoaded) return <div>Loading...</div>;
  if (!isSignedIn) return <div>Not signed in</div>;

  return (
    <div>
      <h1>Hello, {user.firstName}!</h1>
      <p>Email: {user.primaryEmailAddress?.emailAddress}</p>
      <img src={user.imageUrl} alt="avatar" />
    </div>
  );
}

Aufrufen Ihres Backends mit Auth-Tokens

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

function useApi() {
  const { getToken } = useAuth();

  const callApi = async (endpoint) => {
    const token = await getToken();   // Clerk session token
    const res = await fetch(endpoint, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return res.json();
  };

  return { callApi };
}
// Your backend verifies the Clerk token to authenticate the request

Backend-Verifizierung (Node.js)

npm install @clerk/backend

import { verifyToken } from '@clerk/backend';

async function authenticate(req, res, next) {
  const token = req.headers.authorization?.replace('Bearer ', '');
  if (!token) return res.status(401).json({ error: 'No token' });

  try {
    const payload = await verifyToken(token, {
      secretKey: process.env.CLERK_SECRET_KEY,
    });
    req.userId = payload.sub;   // Clerk user ID
    next();
  } catch {
    res.status(401).json({ error: 'Invalid token' });
  }
}

Häufig gestellte Fragen

F: Sachbearbeiter vs. Authentifizierung selbst erstellen?
A: Clerk verwaltet die komplexen, sicherheitskritischen Teile (Sitzungen, Passwort-Reset, E-Mail-Verifizierung, MFA, Social Login) mit vorgefertigten Komponenten – das spart viel Zeit und reduziert das Sicherheitsrisiko. Wenn Sie die Authentifizierung selbst erstellen, haben Sie die volle Kontrolle, müssen aber alle diese Abläufe korrekt implementieren und sichern. Für die meisten Apps ist Clerk (oder ähnlich) die pragmatische Wahl.

F: Clerk vs. NextAuth vs. Supabase Auth?
A: Clerk bietet die ausgefeiltesten vorgefertigten UI-Komponenten und Benutzerverwaltung. NextAuth (Auth.js) eignet sich hervorragend für Next.js und selbstgehostete Flexibilität. Supabase Auth paart sich mit einem Supabase-Backend. Alle sind solide – Sachbearbeiter zeichnet sich durch Drop-in-UI und DX aus; Wählen Sie basierend auf Ihrem Stack und ob Sie gehosteten Komfort oder selbst gehostete Kontrolle wünschen.

F: Wie schütze ich Backend-API-Routen?
A: Holen Sie sich das Clerk-Sitzungstoken im Frontend mitgetToken(), senden Sie es als Bearer-Token und überprüfen Sie es in Ihrem Backend mit@clerk/backendist das VerifyToken. Mit dem verifizierten Token erhalten Sie die Benutzer-ID zum Autorisieren von Anfragen. Dies ist der standardmäßige tokenbasierte Ablauf.

F: Unterstützt Clerk Social Login?
A: Ja – Google, GitHub und viele andere Anbieter mit minimaler Konfiguration. Aktivieren Sie sie im Clerk-Dashboard und die Anmelde-/Registrierungskomponenten zeigen automatisch die Social-Login-Optionen an. Keine manuelle OAuth-Implementierung erforderlich.

F: Ist Clerk kostenlos?
A: Clerk verfügt über eine kostenlose Stufe, die für viele Apps geeignet ist, sowie kostenpflichtige Stufen für eine höhere Nutzung und erweiterte Funktionen. Überprüfen Sie die aktuellen Preise für Ihre erwartete Benutzerzahl. Für den Einstieg und kleine bis mittlere Apps reicht oft die kostenlose Stufe aus.

Fazit

Clerk macht das Hinzufügen der Authentifizierung zu einer React-App schnell und sicher, indem es die komplexen Teile – Sitzungen, Passwortzurücksetzung, E-Mail-Verifizierung, MFA und soziale Anmeldung – mit Drop-in-Komponenten abwickelt. Der Arbeitsablauf:Binden Sie Ihre App in ClerkProvider ein, verwenden Sie SignedIn/SignedOut-Komponenten, um die richtige Benutzeroberfläche anzuzeigen, fügen Sie SignIn/SignUp-Seiten hinzu, schützen Sie Routen mit SignedIn + RedirectToSignIn, greifen Sie mit useUser auf Benutzerdaten zu und überprüfen Sie Clerk-Tokens in Ihrem Backend. Sie erhalten ein vollständiges, sicheres Authentifizierungssystem mit einer ausgefeilten Benutzeroberfläche in einem Bruchteil der Zeit, die der Aufbau selbst erfordern würde, und ohne das Sicherheitsrisiko einer manuellen Implementierung von Authentifizierungsabläufen. Bei den meisten React-Apps, die eine Authentifizierung benötigen, können Sie sich mit Clerk (oder einem ähnlichen verwalteten Authentifizierungsanbieter) auf die eigentlichen Funktionen Ihrer App konzentrieren, anstatt die sichere Authentifizierung neu zu erfinden.