vtorio/KINDE_SETUP.md

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
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:

# 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:

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:

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

const { user, isLoading } = useKindeBrowserClient();

6. Server-Side Usage

For server-side components and API routes:

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