@prokopschield/experiment-with-clerk-react NPM

@clerk/clerk-react

Changelog · Report a Bug · Request a Feature · Ask a Question

Overview

Clerk is the easiest way to add authentication and user management to your React application. Add sign up, sign in, and profile management to your application in minutes.

Getting Started

Prerequisites

React v16+
Node.js v14+

Installation

npm install @clerk/clerk-react

Build

npm run build

To build the package in watch mode, run the following:

npm run dev

Usage

Clerk requires your application to be wrapped in the <ClerkProvider/> context.

If using Create React App, set REACT_APP_CLERK_PUBLISHABLE_KEY to your Publishable key in your .env.local file to make the environment variable accessible on process.env and pass it as the publishableKey prop.

import { render } from 'react-dom';

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

const publishableKey = process.env.REACT_APP_CLERK_PUBLISHABLE_KEY;

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

function App() {
  return (
    <>
      <h1>Hello Clerk!</h1>
      <SignedIn>
        <UserButton afterSignOutUrl={window.location.href} />
      </SignedIn>
      <SignedOut>
        <SignInButton mode='modal' />
      </SignedOut>
    </>
  );
}

For further details and examples, please refer to our Documentation.