KSA-ORACLE-ALLACCESSKEYS/QUICK_START_AUTH.md

🚀 Quick Start - Authentication System

✅ What's Been Set Up

Your Laravel + Vue 3 + Inertia.js application now has a complete authentication system with:

1. ✅ Axios - Already installed (v1.11.0)
2. ✅ Pinia - State management (already installed, replaces Vuex)
3. ✅ Auth Service - API calls to http://localhost:8000/api/auth/login
4. ✅ Auth Store - Centralized authentication state
5. ✅ Route Guards - Protect pages based on authentication
6. ✅ Persistence - Auth state survives page reloads

📁 Files Created

resources/js/
├── services/
│   └── authService.ts          ← API service for auth endpoints
├── stores/
│   └── auth.ts                 ← Pinia store for auth state
├── middleware/
│   └── auth.ts                 ← Route guard middleware
├── composables/
│   └── useAuthGuard.ts         ← Composables for protecting routes
└── components/
    └── LoginExample.vue        ← Example login component

🎯 How to Use

1. In Your Login Component

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth';
import { router } from '@inertiajs/vue3';
import { ref } from 'vue';

const authStore = useAuthStore();
const email = ref('');
const password = ref('');

async function login() {
    const success = await authStore.login({
        email: email.value,
        password: password.value,
        remember: true
    });
    
    if (success) {
        router.get('/dashboard');
    }
}
</script>

<template>
    <form @submit.prevent="login">
        <input v-model="email" type="email" placeholder="Email" />
        <input v-model="password" type="password" placeholder="Password" />
        <button type="submit" :disabled="authStore.loading">
            {{ authStore.loading ? 'Logging in...' : 'Login' }}
        </button>
        <p v-if="authStore.error" class="error">{{ authStore.error }}</p>
    </form>
</template>

2. Protect Your Dashboard

<script setup lang="ts">
import { useAuthGuard } from '@/composables/useAuthGuard';

// This will redirect to /login if not authenticated
useAuthGuard();
</script>

<template>
    <div>
        <h1>Protected Dashboard</h1>
    </div>
</template>

3. Display User Info

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();
</script>

<template>
    <div v-if="authStore.isAuthenticated">
        Welcome, {{ authStore.currentUser?.name }}!
        <button @click="authStore.logout">Logout</button>
    </div>
</template>

🔧 Backend Requirements

You need these Laravel API endpoints:

Login Endpoint

// POST http://localhost:8000/api/auth/login
Route::post('api/auth/login', function(Request $request) {
    $credentials = $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    if (Auth::attempt($credentials)) {
        return response()->json([
            'user' => Auth::user(),
            'token' => Auth::user()->createToken('auth')->plainTextToken
        ]);
    }

    return response()->json(['message' => 'Invalid credentials'], 401);
});

User Endpoint

// GET http://localhost:8000/api/auth/user
Route::get('api/auth/user', function() {
    return response()->json(['user' => Auth::user()]);
})->middleware('auth:sanctum');

Logout Endpoint

// POST http://localhost:8000/api/auth/logout
Route::post('api/auth/logout', function(Request $request) {
    $request->user()->currentAccessToken()->delete();
    return response()->json(['message' => 'Logged out']);
})->middleware('auth:sanctum');

🎨 Complete Working Examples

Example 1: Simple Login Page

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth';
import { useGuestGuard } from '@/composables/useAuthGuard';
import { router } from '@inertiajs/vue3';
import { ref } from 'vue';

useGuestGuard(); // Redirect to dashboard if already logged in

const authStore = useAuthStore();
const form = ref({
    email: '',
    password: '',
    remember: false
});

async function handleSubmit() {
    const success = await authStore.login(form.value);
    if (success) {
        router.get('/dashboard');
    }
}
</script>

<template>
    <div class="login-container">
        <h1>Login</h1>
        
        <div v-if="authStore.error" class="alert alert-error">
            {{ authStore.error }}
        </div>

        <form @submit.prevent="handleSubmit">
            <div>
                <label>Email</label>
                <input v-model="form.email" type="email" required />
            </div>

            <div>
                <label>Password</label>
                <input v-model="form.password" type="password" required />
            </div>

            <div>
                <label>
                    <input v-model="form.remember" type="checkbox" />
                    Remember me
                </label>
            </div>

            <button type="submit" :disabled="authStore.loading">
                {{ authStore.loading ? 'Logging in...' : 'Login' }}
            </button>
        </form>
    </div>
</template>

Example 2: Protected Dashboard

<script setup lang="ts">
import { useAuthGuard } from '@/composables/useAuthGuard';
import { useAuthStore } from '@/stores/auth';
import { router } from '@inertiajs/vue3';

useAuthGuard(); // Redirect to login if not authenticated

const authStore = useAuthStore();

async function handleLogout() {
    await authStore.logout();
    router.get('/login');
}
</script>

<template>
    <div class="dashboard">
        <header>
            <h1>Dashboard</h1>
            <div class="user-menu">
                <span>{{ authStore.currentUser?.name }}</span>
                <button @click="handleLogout">Logout</button>
            </div>
        </header>
        
        <main>
            <p>Welcome back, {{ authStore.currentUser?.name }}!</p>
            <p>Email: {{ authStore.currentUser?.email }}</p>
        </main>
    </div>
</template>

📋 Auth Store API Reference

const authStore = useAuthStore();

// State
authStore.user              // User object or null
authStore.token             // Auth token or null
authStore.loading           // Boolean: loading state
authStore.error             // String: error message or null

// Getters
authStore.isAuthenticated   // Boolean: is user logged in?
authStore.currentUser       // User object or null

// Actions
await authStore.login({ email, password, remember })   // Returns boolean
await authStore.logout()                               // Returns void
await authStore.checkAuth()                            // Returns boolean
await authStore.fetchUser()                            // Returns void
authStore.clearError()                                 // Returns void
authStore.setUser(userData)                            // Returns void

✨ Key Features

• ✅ Auto-persistence: Auth state saved to localStorage
• ✅ CSRF Protection: Automatically handled
• ✅ Error Handling: Built-in error messages
• ✅ Loading States: Track async operations
• ✅ TypeScript: Full type safety
• ✅ Inertia Compatible: Works with your existing setup

🐛 Troubleshooting

Issue: User not staying logged in

Solution: Make sure your Laravel API returns the user object on the /api/auth/user endpoint

Issue: CSRF token mismatch

Solution: Your existing resources/js/lib/http.ts handles this automatically

Issue: Redirect not working

Solution: Ensure you're using router.get() from @inertiajs/vue3

📚 Next Steps

1. Create your Laravel API endpoints (see examples above)
2. Update your login page component
3. Add useAuthGuard() to protected pages
4. Test the authentication flow

For detailed documentation, see AUTH_SETUP.md