kandi-login / Web (React)

Available

Authentication for Next.js and Vite React apps. Drop-in LoginButton component, AuthProvider context, and route guards. Works with both MUI and Tailwind styling.

Download Example Project

Quick Start

Clone the example project

git clone https://github.com/KandiForge/kandi-packages.git
cd kandi-packages/examples/web

Install dependencies

npm install

Start the development server

npm run dev
# Opens on http://localhost:3000 — pre-configured for the reference server

Try logging in — the example app connects to the reference server automatically

Auth Configuration

auth.config.ts

// auth.config.ts
import { createAuthClient } from '@kandiforge/kandi-login/client';

export const auth = createAuthClient({
  authServerUrl: 'https://api.packages.kandiforge.com',
  authBasePath: '/api/auth',
  providers: ['google', 'github'],
  onAuthStateChange: (user) => {
    console.log('Auth state:', user);
  },
});

Switch to Your Server

The example app points to the KandiForge reference server by default. Once you have your own server running:

// Change authServerUrl to your own server:
authServerUrl: 'https://your-api.example.com'

Run the conformance validator against your server to confirm it implements all required endpoints.

Test Personas for Automated Testing

Use the test persona system to authenticate in Playwright, and Cypress tests without launching a browser OAuth flow.

playwright/auth.setup.tsNo browser needed

// playwright/auth.setup.ts
import { test as setup } from '@playwright/test';

setup('authenticate as admin', async ({ request }) => {
  // Seed personas (idempotent — safe to call every run)
  await request.post('https://your-api.example.com/api/auth/test/seed');

  // Get real JWT tokens without browser OAuth
  const res = await request.post(
    'https://your-api.example.com/api/auth/test/login-as',
    { data: { personaId: 'admin-alex' } }
  );
  const { access_token } = await res.json();

  // Store for use in tests
  process.env.TEST_ACCESS_TOKEN = access_token;
});

Default personas: admin-alex, designer-dana, viewer-val, new-user-naya. See all personas

Back to kandi-login overview