# Kinde Authentication Setup

This document provides instructions for setting up Kinde authentication in your Next.js application.

## Prerequisites

1. Create a Kinde account at [https://kinde.com](https://kinde.com)
2. Create a new project in your Kinde dashboard
3. Configure your application settings

## Configuration Steps

### 1. Environment Variables

Update the `.env.local` file with your actual Kinde credentials:

```bash
# Kinde Configuration
KINDE_CLIENT_ID=your_actual_kinde_client_id
KINDE_CLIENT_SECRET=your_actual_kinde_client_secret
KINDE_ISSUER_URL=https://your_subdomain.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/files
```

### 2. Kinde Dashboard Setup

1. Go to your Kinde dashboard
2. Navigate to Settings > Applications
3. Select your application
4. Under "Callback URLs", add:
   - `http://localhost:3000/api/auth/kinde_callback`
5. Under "Logout URLs", add:
   - `http://localhost:3000`
6. Under "Allowed Logout URLs", add:
   - `http://localhost:3000`

### 3. Authentication Flow

The application now includes:
- **Login**: `/api/auth/login`
- **Register**: `/api/auth/register`
- **Logout**: `/api/auth/logout`
- **Callback**: `/api/auth/callback`

### 4. Usage in Components

You can use the authentication components in your pages:

```tsx
import { LoginButton, LogoutButton, RegisterButton } from "@/app/components/authButtons";

// In your component
<LoginButton />
<LogoutButton />
<RegisterButton />
```

### 5. Getting User Information

To access user information in client components:

```tsx
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

const { user, isLoading } = useKindeBrowserClient();
```

### 6. Server-Side Usage

For server-side components and API routes:

```tsx
import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";

const { getUser, isAuthenticated } = getKindeServerSession();
```

## Testing the Authentication

1. Start your development server: `npm run dev`
2. Visit `http://localhost:3000`
3. Click the "Login" button to test authentication
4. After successful login, you'll be redirected to `/files`

## Next Steps

- Configure production environment variables
- Set up proper domain URLs for production
- Add role-based access control if needed
- Implement additional user profile features