React JS — Authentication

Authentication

The React JS version supports multiple authentication methods. You can switch to JWT, Clerk, or Supabase by updating the platform value in src/guards/auth/AuthContext.tsx.

Global App Setup with Authentication

The app entry point wraps the entire app with ThemeProvider and CustomizerContextProvider. MSW mock workers are started before React renders so all API calls are intercepted from the start.

// src/main.tsx
import { Suspense } from 'react';
import { createRoot } from 'react-dom/client';
import './css/globals.css';
import App from './App.tsx';
import Spinner from './views/spinner/Spinner.tsx';
import { CustomizerContextProvider } from './context/CustomizerContext.tsx';
import './utils/i18n';
import { ThemeProvider } from './context/shadcntheme/ThemeContext.tsx';
import { AuthProvider } from 'src/guards/auth/AuthContext.tsx';

async function deferRender() {
  const { worker } = await import('./api/mocks/browser.ts');
  return worker.start({ onUnhandledRequest: 'bypass' });
}

deferRender().then(() => {
  createRoot(document.getElementById('root')!).render(
    <ThemeProvider defaultTheme="system" storageKey="activeMode">
      <CustomizerContextProvider>
        <Suspense fallback={<Spinner />}>
          <AuthProvider>
            <App />
          </AuthProvider>
        </Suspense>
      </CustomizerContextProvider>
    </ThemeProvider>
  );
});

1. JWT Method

To use JWT authentication, update the platform value in your auth context to 'JWT'. Connect handleSubmit in AuthLogin.tsx to your backend JWT endpoint.

// src/guards/auth/AuthContext.tsx
const initialState = {
  isAuthenticated: false,
  isInitialized: false,
  user: null,
  platform: 'JWT',   // Change platform to JWT
};

Platform Configuration:

// File: src/guards/auth/AuthContext.tsx
const initialState: InitialStateType = {
  platform: 'JWT', // Change platform to JWT for JWT Authentication
};

Folders and Files: src > guards > authGuard > UseAuth.tsx

// File: src/guards/authGuard/UseAuth.tsx
import { useContext } from 'react';
import AuthContext from 'src/guards/auth/AuthContext';

const useAuth = () => useContext(AuthContext);

export default useAuth;

2. Clerk Method

To use Clerk authentication, install the Clerk React SDK, add your keys to .env, wrap your app with ClerkProvider, and set platform: 'Clerk'.

Install Clerk:

npm install @clerk/clerk-react

Setup Environment Variables — .env:

VITE_CLERK_PUBLISHABLE_KEY=your_publishable_key

Wrap your app with ClerkProvider in src/main.tsx:

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

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

deferRender().then(() => {
  createRoot(document.getElementById('root')!).render(
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <ThemeProvider defaultTheme="system" storageKey="activeMode">
        <CustomizerContextProvider>
          <Suspense fallback={<Spinner />}>
            <App />
          </Suspense>
        </CustomizerContextProvider>
      </ThemeProvider>
    </ClerkProvider>
  );
});

Platform Configuration:

// File: src/guards/auth/AuthContext.tsx
const initialState: InitialStateType = {
  platform: 'Clerk', // Change platform to Clerk for Clerk Authentication
};

Use Clerk hooks in your components:

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

const { user, isSignedIn } = useUser();
const { signOut } = useClerk();

For more details about Clerk: https://clerk.com/docs

3. Supabase Method

To use Supabase auth, install the Supabase client, add your credentials to .env, create a supabaseClient.ts file, and set platform: 'Supabase'.

Environment File — .env:

VITE_SUPABASE_URL="YOUR_VITE_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_VITE_SUPABASE_ANON_KEY"

Supabase Client — src/guards/supabase/supabaseClient.ts:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl: string = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey: string = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey);

Platform Configuration:

// File: src/guards/auth/AuthContext.tsx
const initialState: InitialStateType = {
  platform: 'Supabase', // Change platform to Supabase for Supabase Authentication
};

Steps to Generate Supabase Keys:

1. Visit https://supabase.com/ and sign up or log in.
2. Click "New Project" on the dashboard.
3. Enter project name, select a region, then click Create Project.
4. Go to the Authenticationtab — Email & Password is enabled by default.
5. You can also enable OAuth providers like Google, GitHub, Twitter, etc.
6. In the Settings tab under Authentication, customize email templates for verification and password reset.
7. From the left sidebar, click API.
8. Project URL: Copy this URL paste as VITE_SUPABASE_URL.
9. Anon Key: Copy this key paste as VITE_SUPABASE_ANON_KEY.
10. Install the client: npm install @supabase/supabase-js
11. Create the .env file and supabaseClient.ts as shown above.