xc-clerk-react

CrossClassify & Clerk React SDK

The CrossClassify & Clerk SDK for react apps, which helps to collect metadata of users activity like page navigation and form interactions.

Prerequisites

• node 18 (or later)

SDK Integration Guide

First, install xc-clerk-react as a dependency:

npm install --save xc-clerk-react

Step 1: Setup the environments

Setup the environments in the .env file:

• VITE_CROSS_CLASSIFY_PUBLISHABLE_SITE_ID: you're CrossClassify project site id.
• VITE_CROSS_CLASSIFY_PUBLISHABLE_API_KEY: you're CrossClassify project api key.
• VITE_CLERK_PUBLISHABLE_KEY: you're Clerk project key.

• Get site_id and api_key from app.crossclassify.com by creating a new web app in a project.
• Get CLERK_KEY from www.clerk.com by creating a new project.

Step 2: Handle Provider

Render components in every where that you want to use it.

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

// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
    throw new Error("Missing Publishable Key")
}

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

Step 3: Render modules

Render components in every where that you want to use it.

import { SecureSignIn, SecureSignUp } from "xc-clerk-react";

const SignInPage = () => (
    <SecureSignIn />
);

const SignUpPage = () => (
    <SecureSignUp />
);

export default SignInPage;

Now go to dashboard and check if your signup submits are shown up in the "Registrations" menu. Congratulations! You're done!