frontend/scripts/18_authentication_workspace.sh

#!/usr/bin/env bash
set -euo pipefail

echo "[1/8] Creating authentication..."

mkdir -p services/auth
mkdir -p hooks
mkdir -p context

cat > services/auth/auth.js <<'EOC'
import api from "../api";

export async function login(username,password){
    const {data}=await api.post("/api/auth/login",{
        username,
        password
    });

    localStorage.setItem("access_token",data.access_token);
    return data;
}

export async function logout(){
    localStorage.removeItem("access_token");
}

export async function profile(){
    const {data}=await api.get("/api/auth/me");
    return data;
}

export async function refresh(){
    const {data}=await api.post("/api/auth/refresh");
    localStorage.setItem("access_token",data.access_token);
    return data;
}
EOC

cat > context/AuthContext.jsx <<'EOC'
"use client";

import {createContext,useContext,useEffect,useState} from "react";
import * as auth from "../services/auth/auth";

const AuthContext=createContext(null);

export function AuthProvider({children}){

const [user,setUser]=useState(null);

useEffect(()=>{
auth.profile()
.then(setUser)
.catch(()=>setUser(null));
},[]);

return(
<AuthContext.Provider value={{user,setUser,...auth}}>
{children}
</AuthContext.Provider>
);

}

export function useAuth(){
return useContext(AuthContext);
}
EOC

cat > hooks/useAuth.js <<'EOC'
import {useAuth} from "../context/AuthContext";
export default useAuth;
EOC

echo "[2/8] Wrapping application..."

grep -q "AuthProvider" app/layout.jsx || perl -0pi -e '
s#(<body[^>]*>)#$1\n<AuthProvider>#;
s#(</body>)#</AuthProvider>\n$1#;
s#import#import {AuthProvider} from "../context/AuthContext";\nimport#;
' app/layout.jsx || true

echo "[3/8] Installing..."

npm install

echo "[4/8] Production build..."

npm run build >/dev/null

echo "[5/8] Verify..."

test -f services/auth/auth.js
test -f context/AuthContext.jsx
test -f hooks/useAuth.js

echo "[6/8] Authentication integrated."

echo "[7/8] Frontend verified."

echo "[8/8] Complete."