Аутентификация с Clerk интеграция в React JS

Clerk — это платформа аутентификации и управления пользователями для веб-приложений.

Она позволяет разработчикам быстро и безопасно реализовать системы регистрации, входа и управления профилями пользователей, не тратя время на создание собственных решений.

Clerk предоставляет готовые компоненты для различных JavaScript-фреймворков и библиотек, таких как React, Next.js, и других.

Вот пример того, как интегрировать Clerk в ваше React-приложение:

Установка Clerk

npm install @clerk/clerk-react

Настройка

Создайте файл .env.local в корне вашего проекта и добавьте свой API-ключ из Clerk Dashboard:

REACT_APP_CLERK_FRONTEND_API=<ваш API-ключ>

Обертка приложения

В файле index.js вашего проекта оберните ваше приложение в компонент ClerkProvider:

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

ReactDOM.render(
  <React.StrictMode>
    <ClerkProvider frontendApi={process.env.REACT_APP_CLERK_FRONTEND_API}>
      <App />
    </ClerkProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Добавление компонентов для входа и регистрации

Добавьте компоненты SignUp и SignIn:

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

// Компонент для регистрации
function Register() {
  return <SignUp />;
}

// Компонент для входа
function Login() {
  return <SignIn />;
}

Защита маршрутов

Используйте HOC (Higher Order Component) withClerk для защиты маршрутов и получения информации о текущем пользователе:

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

function UserProfile({ clerkUser }) {
  return (
    <div>
      <h1>Профиль пользователя</h1>
      <p>Имя: {clerkUser.fullName}</p>
      <p>Электронная почта: {clerkUser.primaryEmailAddress.emailAddress}</p>
    </div>
  );
}

export default withClerk(UserProfile);

В этом примере компонент UserProfile будет доступен только для авторизованных пользователей, а информация о пользователе будет передана через clerkUser.

Выход из системы

Добавьте кнопку выхода из системы с помощью useClerk:

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

function LogoutButton() {
  const { signOut } = useClerk();

  return <button onClick={signOut}>Выйти</button>;
}

Управление профилем пользователя

Для управления профилем пользователя можно использовать компонент UserButton:

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

function Navbar() {
  return (
    <header>
      <nav>
        {/* Другие элементы навигации */}
        <UserButton />
      </nav>
    </header>
  );
}

В этом примере мы добавляем кнопку пользователя, которая открывает виджет Clerk для управления профилем.

Таким образом, используя Clerk, вы можете быстро и безопасно реализовать систему аутентификации и управления пользователями для вашего приложения на React или любом другом поддерживаемом фреймворке.