cd workout

npx create-next-app nextjs

Need to install the following packages:
  create-next-app@14.2.6
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No
Creating a new Next.js app in /home/rian/Documents/PROJECT/PYTHON/workout/nextjs.
 
Using npm.
 
Initializing project with template: app
 
 
Installing dependencies:
- react
- react-dom
- next
 
 
added 22 packages, and audited 23 packages in 2m
 
3 packages are looking for funding
  run `npm fund` for details
 
found 0 vulnerabilities
Initialized a git repository.
 
Success! Created nextjs at /home/rian/Documents/PROJECT/PYTHON/workout/nextjs

cd nextjs
 
install axios dan boostrap

mkdir /src/app/context
 
touch /src/app/context/AuthContext.js

"use client"
 
import { createContext, useContext, useState } from "react"
import axios from "axios"
import { useRouter } from "next/navigation"
 
const AuthContext = createContext()
 
export const AuthProvider = ({children}) => {
    const [user, setUser] = useState(null)
    const router = useRouter()
 
    const login = async (username, password) => {
        try{
            const formData = new FormData()
            formData.append('username', username)
            formData.append('password', password)
            const response = await axios.post('http://localhost:8000/auth/token', formData, {
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            })
            axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.access_token}`
            localStorage.setItem('token', response.data.access_token)
            setUser(response.data)
            router.push('/')
        }catch(error){
            console.log('Login Failed:', error)
        }
    }
 
    const logout = () => {
        setUser(null)
        delete axios.defaults.headers.common['Authorization']
        router.push('/login')
    }
 
    return (
        <AuthContext.Provider value={{ user, login, logout }}>
            {children}
        </AuthContext.Provider>
    )
}
 
export default AuthContext

mkdir /src/app/components
 
touch /src/app/components/ProtectedRoute.js

"use client"
 
import { useContext, useEffect } from "react"
import { useRouter } from "next/navigation"
import AuthContext from "../context/AuthContext"
 
const ProtectedRoute = ({children}) => {
    const {user} = useContext(AuthContext)
    const router = useRouter()
 
    useEffect(() => {
        if(!user){
            router.push('/login')
        }
    }, [user, router])
 
    return user ? children : null
}
 
export default ProtectedRoute