Vue 3 Shared Composable: User Authentication Status

This challenge focuses on creating a reusable composable function in Vue 3 that manages and exposes a user's authentication status. This is a fundamental pattern for building secure and dynamic applications, allowing different components to easily react to changes in the user's login state.

Problem Description

Your task is to implement a Vue 3 composable function, useAuth, that encapsulates the logic for tracking a user's authentication status. This composable should provide a reactive way to:

1. Track authentication state: Maintain a reactive boolean variable representing whether the user is currently logged in.
2. Simulate login/logout: Provide functions to simulate logging the user in and out. These functions should update the authentication state.
3. Expose state and actions: Make the authentication state and the login/logout functions accessible to any component that uses the composable.

Key Requirements:

• The composable should be written in TypeScript.
• It must use Vue 3's Composition API (ref for reactive state management).
• The composable should return an object containing:
  • A reactive isAuthenticated boolean.
  • A login() function.
  • A logout() function.
• When login() is called, isAuthenticated should become true.
• When logout() is called, isAuthenticated should become false.
• The initial state of isAuthenticated should be false.

Expected Behavior:

A component using useAuth() should be able to:

• Display different content based on isAuthenticated (e.g., "Welcome, User!" vs. "Please Log In").
• Trigger the login() function (e.g., from a login button).
• Trigger the logout() function (e.g., from a logout button).

Examples

Example 1: Component Usage

Imagine a UserProfile.vue component that uses the useAuth composable.

<template>
  <div>
    <p v-if="isAuthenticated">Welcome, User!</p>
    <p v-else>Please Log In</p>
    <button @click="login">Log In</button>
    <button @click="logout">Log Out</button>
  </div>
</template>

<script setup lang="ts">
import { useAuth } from './composables/useAuth'; // Assuming composable is in ./composables/useAuth.ts

const { isAuthenticated, login, logout } = useAuth();
</script>

Expected Output (in the browser):

Initially, the text "Please Log In" will be displayed, and both "Log In" and "Log Out" buttons will be visible.

• Clicking "Log In": The text changes to "Welcome, User!".
• Clicking "Log Out": The text changes back to "Please Log In".

Example 2: Demonstrating Reactivity

Consider a separate AuthStatusDisplay.vue component.

<template>
  <div>
    <p>Current Auth Status: {{ isAuthenticated ? 'Logged In' : 'Logged Out' }}</p>
  </div>
</template>

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

const { isAuthenticated } = useAuth();
</script>

Expected Output (in the browser):

Initially, "Current Auth Status: Logged Out" will be displayed. If UserProfile.vue (from Example 1) is also on the page and the user clicks "Log In", this display will automatically update to "Current Auth Status: Logged In" without any additional code in AuthStatusDisplay.vue itself.

Constraints

• The solution must be implemented using Vue 3 and TypeScript.
• The composable function must be named useAuth.
• No external libraries or frameworks (beyond Vue 3's Composition API) are allowed for state management within the composable.
• The login and logout functions are purely for simulation in this challenge; no actual API calls are required.

Notes

• Think about how to make the authentication state reactive so that components automatically update when the state changes.
• The composable should be designed to be called directly within setup() or <script setup> of your Vue components.
• Consider how you might extend this composable in the future (e.g., to store user data, handle tokens) – while not required for this challenge, it's good design practice.