[{"id":"bb229c22-f182-4465-85e5-22c807f55ff2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Login Page","styles":{}}],"children":[]},{"id":"a0cd3a41-d74f-4779-ba9a-1730444e36de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Login Page","styles":{"bold":true}},{"type":"text","text":" is a page where users enter their account information to access protected parts of an app.","styles":{}}],"children":[]},{"id":"d09b35b9-b372-4b47-a66b-f0d30fbaab9f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"0c11f8c9-74e6-4cc5-9430-8aa30508ede3","type":"procode","props":{"code":"Login Page = page for user sign in\n","language":"txt","filename":"","files":"[{\"id\":\"sp17ntv2t\",\"name\":\"code\",\"code\":\"Login Page = page for user sign in\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"67a47ae1-f684-4b83-b344-865a81c2519a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usually, a login page has:","styles":{}}],"children":[]},{"id":"e0fa4620-3fcc-4a77-87b0-bbaf9430a847","type":"procode","props":{"code":"Login Page\n├── Email input\n├── Password input\n├── Submit button\n├── Loading state\n├── Error message\n└── Redirect after success\n","language":"txt","filename":"","files":"[{\"id\":\"bz1s8bkn2\",\"name\":\"code\",\"code\":\"Login Page\\n├── Email input\\n├── Password input\\n├── Submit button\\n├── Loading state\\n├── Error message\\n└── Redirect after success\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"004ca5b0-a358-489a-bc28-0bc86deb4083","type":"divider","props":{},"children":[]},{"id":"b025ac45-4903-47cd-a88e-88e4c274e85b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"116dbfb2-fb0c-4e83-a8a2-11760f107b39","type":"procode","props":{"code":"Login Page\n├── Collects user email\n├── Collects user password\n├── Sends data to backend API\n├── Backend checks account\n├── Backend returns token or session\n├── Frontend saves login state\n└── User enters protected page\n","language":"txt","filename":"","files":"[{\"id\":\"6z14z0b1h\",\"name\":\"code\",\"code\":\"Login Page\\n├── Collects user email\\n├── Collects user password\\n├── Sends data to backend API\\n├── Backend checks account\\n├── Backend returns token or session\\n├── Frontend saves login state\\n└── User enters protected page\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fad9d1fa-5d6d-4702-9b78-a75c5c1d4826","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"56afc00a-6ee6-45c4-8613-bde3c59c7277","type":"procode","props":{"code":"User enters email and password.\nReact sends login request.\nBackend checks user.\nReact redirects user after success.\n","language":"txt","filename":"","files":"[{\"id\":\"bx8rccvuc\",\"name\":\"code\",\"code\":\"User enters email and password.\\nReact sends login request.\\nBackend checks user.\\nReact redirects user after success.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5981ed52-18ac-4b7d-9c4f-831f1d7cd6eb","type":"divider","props":{},"children":[]},{"id":"3ef59a07-e4ad-4f7a-a1d9-7e6cd6f9ffc1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic Login Flow","styles":{}}],"children":[]},{"id":"9f95bcb6-5b12-4e8c-8ce9-8042ff49dbdc","type":"procode","props":{"code":"User opens login page\n├── User types email\n├── User types password\n├── User clicks Login\n├── React validates form\n├── React sends POST /api/auth/login\n├── Backend checks credentials\n├── Backend returns token/session\n├── React saves auth data\n└── React redirects to dashboard\n","language":"txt","filename":"","files":"[{\"id\":\"58luao6pl\",\"name\":\"code\",\"code\":\"User opens login page\\n├── User types email\\n├── User types password\\n├── User clicks Login\\n├── React validates form\\n├── React sends POST /api/auth/login\\n├── Backend checks credentials\\n├── Backend returns token/session\\n├── React saves auth data\\n└── React redirects to dashboard\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d8c7e503-5dca-4a73-9b38-cfbc36167ef2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"3d6b90ef-0486-436c-ad25-216a9522a4be","type":"procode","props":{"code":"Login page connects form input with authentication API.\n","language":"txt","filename":"","files":"[{\"id\":\"y8v21gw6o\",\"name\":\"code\",\"code\":\"Login page connects form input with authentication API.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d153ce46-82e1-4b21-846f-88678dc4f544","type":"divider","props":{},"children":[]},{"id":"9f5d94b0-97d3-4fb7-a8b7-68abe8e50571","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic Login Form State","styles":{}}],"children":[]},{"id":"154c037e-3377-45e9-a321-bb98069ba374","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function LoginPage() {\n const [email, setEmail] = useState(\"\")\n const [password, setPassword] = useState(\"\")\n\n return (\n

\n setEmail(event.target.value)}\n placeholder=\"Email\"\n />\n\n setPassword(event.target.value)}\n placeholder=\"Password\"\n />\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"0scnd77mh\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function LoginPage() {\\n const [email, setEmail] = useState(\\\"\\\")\\n const [password, setPassword] = useState(\\\"\\\")\\n\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n console.log({\\n email,\\n password,\\n })\\n }\\n\\n return (\\n

\\n setEmail(event.target.value)}\\n placeholder=\\\"Email\\\"\\n />\\n\\n setPassword(event.target.value)}\\n placeholder=\\\"Password\\\"\\n />\\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb175a22-3d7d-4ab7-8559-8d1e72059b2c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"7e22a433-408d-4c52-ab76-2e7afab5ef62","type":"procode","props":{"code":"Submit form\n├── prevent default browser reload\n├── read email state\n├── read password state\n└── send data later\n","language":"txt","filename":"","files":"[{\"id\":\"0mv3x87vo\",\"name\":\"code\",\"code\":\"Submit form\\n├── prevent default browser reload\\n├── read email state\\n├── read password state\\n└── send data later\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1807c961-2d4b-4114-a6b0-4bb961511a38","type":"divider","props":{},"children":[]},{"id":"282ff3ec-fb82-47f6-a39f-c1fcc08c5be2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Login with API Request","styles":{}}],"children":[]},{"id":"c6318c25-4e55-4ee2-aff9-cf6b175d1bd1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example endpoint:","styles":{}}],"children":[]},{"id":"7a4ec315-f8ed-46ad-af13-ae7b3aa3f8cf","type":"procode","props":{"code":"POST /api/auth/login\n","language":"txt","filename":"","files":"[{\"id\":\"re9wiplkm\",\"name\":\"code\",\"code\":\"POST /api/auth/login\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bfe9c83a-ded9-4d63-bff2-c85a80c302af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Request body:","styles":{}}],"children":[]},{"id":"d89f53a9-a441-4955-b679-9439176735e8","type":"procode","props":{"code":"{\n \"email\": \"user@mail.com\",\n \"password\": \"password123\"\n}\n","language":"json","filename":"","files":"[{\"id\":\"ja30ipgyz\",\"name\":\"code\",\"code\":\"{\\n \\\"email\\\": \\\"user@mail.com\\\",\\n \\\"password\\\": \\\"password123\\\"\\n}\\n\",\"language\":\"json\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cdd49cb6-9880-4aa3-803f-890fb02f544f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example response:","styles":{}}],"children":[]},{"id":"905dff40-215d-4b2b-81c5-a236d42b5804","type":"procode","props":{"code":"{\n \"token\": \"jwt_token_here\",\n \"user\": {\n \"id\": 1,\n \"name\": \"Farid\",\n \"email\": \"user@mail.com\"\n }\n}\n","language":"json","filename":"","files":"[{\"id\":\"aw9doq3ee\",\"name\":\"code\",\"code\":\"{\\n \\\"token\\\": \\\"jwt_token_here\\\",\\n \\\"user\\\": {\\n \\\"id\\\": 1,\\n \\\"name\\\": \\\"Farid\\\",\\n \\\"email\\\": \\\"user@mail.com\\\"\\n }\\n}\\n\",\"language\":\"json\"}]","width":"100%","height":"auto"},"children":[]},{"id":"73077028-b828-4b69-9389-4161f0c4b16e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"React example:","styles":{}}],"children":[]},{"id":"f1a8c086-d7b8-440b-83bb-4ee8dee2f035","type":"procode","props":{"code":"import { useState } from \"react\"\n\nexport default function LoginPage() {\n const [email, setEmail] = useState(\"\")\n const [password, setPassword] = useState(\"\")\n\n async function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n const response = await fetch(\"/api/auth/login\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n email,\n password,\n }),\n })\n\n const data = await response.json()\n\n console.log(data)\n }\n\n return (\n

\n setEmail(event.target.value)}\n placeholder=\"Email\"\n />\n\n setPassword(event.target.value)}\n placeholder=\"Password\"\n />\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"d28dna2nt\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\nexport default function LoginPage() {\\n const [email, setEmail] = useState(\\\"\\\")\\n const [password, setPassword] = useState(\\\"\\\")\\n\\n async function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n const response = await fetch(\\\"/api/auth/login\\\", {\\n method: \\\"POST\\\",\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n body: JSON.stringify({\\n email,\\n password,\\n }),\\n })\\n\\n const data = await response.json()\\n\\n console.log(data)\\n }\\n\\n return (\\n

Login

\n\n {error &&

{error}

}\n\n setEmail(event.target.value)}\n placeholder=\"Email\"\n />\n\n setPassword(event.target.value)}\n placeholder=\"Password\"\n />\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"316ivey5n\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\n\\ntype LoginResponse = {\\n token: string\\n user: {\\n id: number\\n name: string\\n email: string\\n }\\n}\\n\\nexport default function LoginPage() {\\n const [email, setEmail] = useState(\\\"\\\")\\n const [password, setPassword] = useState(\\\"\\\")\\n const [loading, setLoading] = useState(false)\\n const [error, setError] = useState(\\\"\\\")\\n\\n async function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n setLoading(true)\\n setError(\\\"\\\")\\n\\n try {\\n const response = await fetch(\\\"/api/auth/login\\\", {\\n method: \\\"POST\\\",\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n body: JSON.stringify({\\n email,\\n password,\\n }),\\n })\\n\\n if (!response.ok) {\\n throw new Error(\\\"Email or password is incorrect\\\")\\n }\\n\\n const data: LoginResponse = await response.json()\\n\\n localStorage.setItem(\\\"token\\\", data.token)\\n\\n console.log(\\\"Login success\\\", data.user)\\n } catch (error) {\\n setError(\\\"Email or password is incorrect\\\")\\n } finally {\\n setLoading(false)\\n }\\n }\\n\\n return (\\n

\\n

Login

\\n\\n {error &&

{error}

}\\n\\n setEmail(event.target.value)}\\n placeholder=\\\"Email\\\"\\n />\\n\\n setPassword(event.target.value)}\\n placeholder=\\\"Password\\\"\\n />\\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c905e0af-6f86-4381-b9b6-5e5b0485ab6c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"af80d397-cb62-470d-8c75-aab53fbfc39d","type":"procode","props":{"code":"Login submit\n├── loading becomes true\n├── error becomes empty\n├── request sent to backend\n├── success saves token\n├── error shows message\n└── loading becomes false\n","language":"txt","filename":"","files":"[{\"id\":\"tzm6wtpek\",\"name\":\"code\",\"code\":\"Login submit\\n├── loading becomes true\\n├── error becomes empty\\n├── request sent to backend\\n├── success saves token\\n├── error shows message\\n└── loading becomes false\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a3e7f30a-1a0c-461e-aea2-7d17712a895e","type":"divider","props":{},"children":[]},{"id":"2a6a4cb3-75c6-4423-8fd3-70730500ea39","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Basic Validation","styles":{}}],"children":[]},{"id":"b5fc6c1f-4202-4ff2-ad75-1b1a55ba015e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Before sending request, check the input.","styles":{}}],"children":[]},{"id":"59ea8b11-1d6d-4547-bb41-31556c2ec84a","type":"procode","props":{"code":"if (!email) {\n setError(\"Email is required\")\n return\n}\n\nif (!password) {\n setError(\"Password is required\")\n return\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"g4po39pf1\",\"name\":\"code\",\"code\":\"if (!email) {\\n setError(\\\"Email is required\\\")\\n return\\n}\\n\\nif (!password) {\\n setError(\\\"Password is required\\\")\\n return\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b0c3178e-9414-40aa-b589-9897bbd97922","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Full example:","styles":{}}],"children":[]},{"id":"e1e0d2a3-c489-43e5-a2c1-fdbba8ab5c9e","type":"procode","props":{"code":"async function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n if (!email) {\n setError(\"Email is required\")\n return\n }\n\n if (!password) {\n setError(\"Password is required\")\n return\n }\n\n setLoading(true)\n setError(\"\")\n\n try {\n const response = await fetch(\"/api/auth/login\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n email,\n password,\n }),\n })\n\n if (!response.ok) {\n throw new Error(\"Login failed\")\n }\n\n const data = await response.json()\n\n localStorage.setItem(\"token\", data.token)\n } catch {\n setError(\"Email or password is incorrect\")\n } finally {\n setLoading(false)\n }\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"1hnt4jzw3\",\"name\":\"code\",\"code\":\"async function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n if (!email) {\\n setError(\\\"Email is required\\\")\\n return\\n }\\n\\n if (!password) {\\n setError(\\\"Password is required\\\")\\n return\\n }\\n\\n setLoading(true)\\n setError(\\\"\\\")\\n\\n try {\\n const response = await fetch(\\\"/api/auth/login\\\", {\\n method: \\\"POST\\\",\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n body: JSON.stringify({\\n email,\\n password,\\n }),\\n })\\n\\n if (!response.ok) {\\n throw new Error(\\\"Login failed\\\")\\n }\\n\\n const data = await response.json()\\n\\n localStorage.setItem(\\\"token\\\", data.token)\\n } catch {\\n setError(\\\"Email or password is incorrect\\\")\\n } finally {\\n setLoading(false)\\n }\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d5c23ea0-c38f-431e-9ab6-db568679ccc0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"e1cf8cea-ff93-4da8-9f21-5b0885c5f2cc","type":"procode","props":{"code":"Validate first.\nSend request after input is valid.\n","language":"txt","filename":"","files":"[{\"id\":\"k7s9el5uk\",\"name\":\"code\",\"code\":\"Validate first.\\nSend request after input is valid.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5b6bad00-d744-4f87-83f4-efccd57b6400","type":"divider","props":{},"children":[]},{"id":"bb9da177-d698-453b-a763-dcf38957d066","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Login with React Router Redirect","styles":{}}],"children":[]},{"id":"ef519571-98d4-4d38-a0d1-bb8a99dbfff9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After login success, usually redirect user to dashboard.","styles":{}}],"children":[]},{"id":"42d1f895-0ef3-494b-a213-0e6b93ef290c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Install React Router if needed:","styles":{}}],"children":[]},{"id":"d67aed3b-31fb-4b2e-8242-3275a44f3337","type":"procode","props":{"code":"npm install react-router-dom\n","language":"bash","filename":"","files":"[{\"id\":\"x3xfg2ghq\",\"name\":\"code\",\"code\":\"npm install react-router-dom\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8a5f4926-d2cf-4e2b-a78d-c15e3989816d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Using pnpm:","styles":{}}],"children":[]},{"id":"b044f3ed-6b90-4341-a436-81813b8acee7","type":"procode","props":{"code":"pnpm add react-router-dom\n","language":"bash","filename":"","files":"[{\"id\":\"9t91yzo5b\",\"name\":\"code\",\"code\":\"pnpm add react-router-dom\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cad2056c-8bc0-4737-91c6-dbe297322106","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"b3f6d51c-c331-4558-9740-a23fb97e57c5","type":"procode","props":{"code":"import { useState } from \"react\"\nimport { useNavigate } from \"react-router-dom\"\n\nexport default function LoginPage() {\n const navigate = useNavigate()\n\n const [email, setEmail] = useState(\"\")\n const [password, setPassword] = useState(\"\")\n const [loading, setLoading] = useState(false)\n const [error, setError] = useState(\"\")\n\n async function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n setLoading(true)\n setError(\"\")\n\n try {\n const response = await fetch(\"/api/auth/login\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n email,\n password,\n }),\n })\n\n if (!response.ok) {\n throw new Error(\"Login failed\")\n }\n\n const data = await response.json()\n\n localStorage.setItem(\"token\", data.token)\n\n navigate(\"/dashboard\")\n } catch {\n setError(\"Email or password is incorrect\")\n } finally {\n setLoading(false)\n }\n }\n\n return (\n

Login

\n\n {error &&

{error}

}\n\n setEmail(event.target.value)}\n placeholder=\"Email\"\n />\n\n setPassword(event.target.value)}\n placeholder=\"Password\"\n />\n\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"21ybv69da\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport { useNavigate } from \\\"react-router-dom\\\"\\n\\nexport default function LoginPage() {\\n const navigate = useNavigate()\\n\\n const [email, setEmail] = useState(\\\"\\\")\\n const [password, setPassword] = useState(\\\"\\\")\\n const [loading, setLoading] = useState(false)\\n const [error, setError] = useState(\\\"\\\")\\n\\n async function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n setLoading(true)\\n setError(\\\"\\\")\\n\\n try {\\n const response = await fetch(\\\"/api/auth/login\\\", {\\n method: \\\"POST\\\",\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n body: JSON.stringify({\\n email,\\n password,\\n }),\\n })\\n\\n if (!response.ok) {\\n throw new Error(\\\"Login failed\\\")\\n }\\n\\n const data = await response.json()\\n\\n localStorage.setItem(\\\"token\\\", data.token)\\n\\n navigate(\\\"/dashboard\\\")\\n } catch {\\n setError(\\\"Email or password is incorrect\\\")\\n } finally {\\n setLoading(false)\\n }\\n }\\n\\n return (\\n

\\n

Login

\\n\\n {error &&

{error}

}\\n\\n setEmail(event.target.value)}\\n placeholder=\\\"Email\\\"\\n />\\n\\n setPassword(event.target.value)}\\n placeholder=\\\"Password\\\"\\n />\\n\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"99c24a91-16e6-4fab-a67b-36e0b4274017","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"ace49106-9bb8-4def-a1bb-48b18d9cdf55","type":"procode","props":{"code":"Login success\n└── navigate to dashboard\n","language":"txt","filename":"","files":"[{\"id\":\"f3vrc1uqi\",\"name\":\"code\",\"code\":\"Login success\\n└── navigate to dashboard\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6abf12e9-abc1-4408-a5f6-9bdbe79f1b71","type":"divider","props":{},"children":[]},{"id":"0aeadb1c-cb9d-493e-8666-e4da57c42229","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Login Service File","styles":{}}],"children":[]},{"id":"821e50e5-f9b6-469a-b2cf-2c2b27db5bc8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For cleaner code, move login request to a service file.","styles":{}}],"children":[]},{"id":"181e6f0c-8376-4d01-8e0c-08f67de90a94","type":"procode","props":{"code":"src/\n├── services/\n│ └── auth-api.ts\n├── pages/\n│ └── login-page.tsx\n└── App.tsx\n","language":"txt","filename":"","files":"[{\"id\":\"9c0y0ayot\",\"name\":\"code\",\"code\":\"src/\\n├── services/\\n│ └── auth-api.ts\\n├── pages/\\n│ └── login-page.tsx\\n└── App.tsx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e62df22e-2b27-467e-a3a0-bb9b92d3f58d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/services/auth-api.ts","styles":{"code":true}}],"children":[]},{"id":"57f45d64-e9f1-4161-a6f9-7da7eaba825f","type":"procode","props":{"code":"type LoginPayload = {\n email: string\n password: string\n}\n\ntype LoginResponse = {\n token: string\n user: {\n id: number\n name: string\n email: string\n }\n}\n\nexport async function login(payload: LoginPayload): Promise {\n const response = await fetch(\"/api/auth/login\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(payload),\n })\n\n if (!response.ok) {\n throw new Error(\"Login failed\")\n }\n\n return response.json()\n}\n","language":"ts","filename":"","files":"[{\"id\":\"ri30g6lpo\",\"name\":\"code\",\"code\":\"type LoginPayload = {\\n email: string\\n password: string\\n}\\n\\ntype LoginResponse = {\\n token: string\\n user: {\\n id: number\\n name: string\\n email: string\\n }\\n}\\n\\nexport async function login(payload: LoginPayload): Promise {\\n const response = await fetch(\\\"/api/auth/login\\\", {\\n method: \\\"POST\\\",\\n headers: {\\n \\\"Content-Type\\\": \\\"application/json\\\",\\n },\\n body: JSON.stringify(payload),\\n })\\n\\n if (!response.ok) {\\n throw new Error(\\\"Login failed\\\")\\n }\\n\\n return response.json()\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5a279ea-16f9-4f36-8fa2-945f1b40255b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"e52f0994-14d2-41e8-b413-0ed0d814ea46","type":"procode","props":{"code":"import { login } from \"../services/auth-api\"\n\nconst data = await login({\n email,\n password,\n})\n","language":"tsx","filename":"","files":"[{\"id\":\"ebq1daprg\",\"name\":\"code\",\"code\":\"import { login } from \\\"../services/auth-api\\\"\\n\\nconst data = await login({\\n email,\\n password,\\n})\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c308052b-047c-4cc7-835a-837d01f91f46","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"38b98712-f039-4486-8510-c7187607c431","type":"procode","props":{"code":"Service file keeps API logic outside the UI.\n","language":"txt","filename":"","files":"[{\"id\":\"5tt8ktj8m\",\"name\":\"code\",\"code\":\"Service file keeps API logic outside the UI.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"489714e4-0c14-4cc0-bc6b-38498fdea97c","type":"divider","props":{},"children":[]},{"id":"e4bb097b-5bb1-4c20-a30e-e9f9fb15b65b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Complete Login Page Example","styles":{}}],"children":[]},{"id":"2b8198a9-1d5c-47b1-b0a3-bb1cabace948","type":"procode","props":{"code":"import { useState } from \"react\"\nimport { useNavigate } from \"react-router-dom\"\nimport { login } from \"../services/auth-api\"\n\nexport default function LoginPage() {\n const navigate = useNavigate()\n\n const [email, setEmail] = useState(\"\")\n const [password, setPassword] = useState(\"\")\n const [loading, setLoading] = useState(false)\n const [error, setError] = useState(\"\")\n\n async function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n\n if (!email) {\n setError(\"Email is required\")\n return\n }\n\n if (!password) {\n setError(\"Password is required\")\n return\n }\n\n setLoading(true)\n setError(\"\")\n\n try {\n const data = await login({\n email,\n password,\n })\n\n localStorage.setItem(\"token\", data.token)\n\n navigate(\"/dashboard\")\n } catch {\n setError(\"Email or password is incorrect\")\n } finally {\n setLoading(false)\n }\n }\n\n return (\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"lsqskdydx\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport { useNavigate } from \\\"react-router-dom\\\"\\nimport { login } from \\\"../services/auth-api\\\"\\n\\nexport default function LoginPage() {\\n const navigate = useNavigate()\\n\\n const [email, setEmail] = useState(\\\"\\\")\\n const [password, setPassword] = useState(\\\"\\\")\\n const [loading, setLoading] = useState(false)\\n const [error, setError] = useState(\\\"\\\")\\n\\n async function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n\\n if (!email) {\\n setError(\\\"Email is required\\\")\\n return\\n }\\n\\n if (!password) {\\n setError(\\\"Password is required\\\")\\n return\\n }\\n\\n setLoading(true)\\n setError(\\\"\\\")\\n\\n try {\\n const data = await login({\\n email,\\n password,\\n })\\n\\n localStorage.setItem(\\\"token\\\", data.token)\\n\\n navigate(\\\"/dashboard\\\")\\n } catch {\\n setError(\\\"Email or password is incorrect\\\")\\n } finally {\\n setLoading(false)\\n }\\n }\\n\\n return (\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c9cd29ba-6c34-42d9-b332-84102ec0c8b3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple flow:","styles":{}}],"children":[]},{"id":"b02dfb24-fa19-4394-9227-286eabacb89b","type":"procode","props":{"code":"User submits form\n├── validate email and password\n├── call login service\n├── save token\n├── redirect to dashboard\n└── show error if login fails\n","language":"txt","filename":"","files":"[{\"id\":\"1lxwm3u3w\",\"name\":\"code\",\"code\":\"User submits form\\n├── validate email and password\\n├── call login service\\n├── save token\\n├── redirect to dashboard\\n└── show error if login fails\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5467e32b-7121-43bc-8387-a136633f8b3b","type":"divider","props":{},"children":[]},{"id":"e90df4ee-babe-4f39-a176-bfd115ff2a93","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Login Page Styling Example","styles":{}}],"children":[]},{"id":"8333c193-fbcc-40d5-bc05-7cbb6fa580cd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Basic CSS:","styles":{}}],"children":[]},{"id":"1374c402-712a-42a0-a786-354974c5dae3","type":"procode","props":{"code":".login-page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n background: #f9fafb;\n padding: 24px;\n}\n\n.login-form {\n width: min(100%, 420px);\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n padding: 32px;\n}\n\n.login-form h1 {\n margin: 0 0 8px;\n font-size: 28px;\n}\n\n.login-form p {\n margin: 0 0 24px;\n color: #6b7280;\n}\n\n.login-field {\n display: grid;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.login-field label {\n font-size: 14px;\n font-weight: 600;\n}\n\n.login-field input {\n border: 1px solid #d1d5db;\n border-radius: 12px;\n padding: 12px 14px;\n font-size: 16px;\n outline: none;\n}\n\n.login-field input:focus {\n border-color: #111827;\n}\n\n.login-error {\n margin-bottom: 16px;\n color: #dc2626;\n font-size: 14px;\n}\n\n.login-button {\n width: 100%;\n border: none;\n border-radius: 12px;\n background: #111827;\n color: white;\n padding: 12px 16px;\n font-weight: 600;\n cursor: pointer;\n}\n\n.login-button:disabled {\n cursor: not-allowed;\n background: #9ca3af;\n}\n","language":"css","filename":"","files":"[{\"id\":\"12447lwuf\",\"name\":\"code\",\"code\":\".login-page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n background: #f9fafb;\\n padding: 24px;\\n}\\n\\n.login-form {\\n width: min(100%, 420px);\\n background: white;\\n border: 1px solid #e5e7eb;\\n border-radius: 20px;\\n padding: 32px;\\n}\\n\\n.login-form h1 {\\n margin: 0 0 8px;\\n font-size: 28px;\\n}\\n\\n.login-form p {\\n margin: 0 0 24px;\\n color: #6b7280;\\n}\\n\\n.login-field {\\n display: grid;\\n gap: 8px;\\n margin-bottom: 16px;\\n}\\n\\n.login-field label {\\n font-size: 14px;\\n font-weight: 600;\\n}\\n\\n.login-field input {\\n border: 1px solid #d1d5db;\\n border-radius: 12px;\\n padding: 12px 14px;\\n font-size: 16px;\\n outline: none;\\n}\\n\\n.login-field input:focus {\\n border-color: #111827;\\n}\\n\\n.login-error {\\n margin-bottom: 16px;\\n color: #dc2626;\\n font-size: 14px;\\n}\\n\\n.login-button {\\n width: 100%;\\n border: none;\\n border-radius: 12px;\\n background: #111827;\\n color: white;\\n padding: 12px 16px;\\n font-weight: 600;\\n cursor: pointer;\\n}\\n\\n.login-button:disabled {\\n cursor: not-allowed;\\n background: #9ca3af;\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bd21d0e0-6f75-4673-b29b-c729153b15fa","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JSX with className:","styles":{}}],"children":[]},{"id":"5a19bccf-7813-4410-b5b4-6c8ecb18145b","type":"procode","props":{"code":"return (\n

\n \n

\n)\n","language":"tsx","filename":"","files":"[{\"id\":\"xozggwue7\",\"name\":\"code\",\"code\":\"return (\\n

\\n \\n

\\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"94bc5641-4bad-40a3-af9e-52979875d8a8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7bf867b2-22bf-4fbf-8633-0e9f7a414527","type":"procode","props":{"code":"Login page should be simple, clear, and easy to use.\n","language":"txt","filename":"","files":"[{\"id\":\"udhr87x79\",\"name\":\"code\",\"code\":\"Login page should be simple, clear, and easy to use.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"822ebb99-6539-42f3-a874-4239a8348ee6","type":"divider","props":{},"children":[]},{"id":"b9944e24-7f1d-469b-9227-eb3ab2b22b90","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Login Page with Auth Context","styles":{}}],"children":[]},{"id":"7236762c-0386-4f11-8281-0bcae92c536c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For bigger apps, login state can be stored in context.","styles":{}}],"children":[]},{"id":"484af190-3c91-4e79-9e03-c26c494a59ef","type":"procode","props":{"code":"Auth Context\n├── Stores user\n├── Stores token\n├── Provides login function\n├── Provides logout function\n└── Shares auth state across app\n","language":"txt","filename":"","files":"[{\"id\":\"wbxryoq32\",\"name\":\"code\",\"code\":\"Auth Context\\n├── Stores user\\n├── Stores token\\n├── Provides login function\\n├── Provides logout function\\n└── Shares auth state across app\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3369043a-b38c-4bc3-b5da-eddb9709f4c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"2c791479-7ccc-4ba5-8e3b-2a2820c9a119","type":"procode","props":{"code":"import { createContext, useContext, useState } from \"react\"\n\ntype User = {\n id: number\n name: string\n email: string\n}\n\ntype AuthContextValue = {\n user: User | null\n token: string | null\n loginUser: (user: User, token: string) => void\n logoutUser: () => void\n}\n\nconst AuthContext = createContext(null)\n\nexport function AuthProvider({ children }: { children: React.ReactNode }) {\n const [user, setUser] = useState(null)\n const [token, setToken] = useState(\n localStorage.getItem(\"token\")\n )\n\n function loginUser(user: User, token: string) {\n setUser(user)\n setToken(token)\n localStorage.setItem(\"token\", token)\n }\n\n function logoutUser() {\n setUser(null)\n setToken(null)\n localStorage.removeItem(\"token\")\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport function useAuth() {\n const context = useContext(AuthContext)\n\n if (!context) {\n throw new Error(\"useAuth must be used inside AuthProvider\")\n }\n\n return context\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"idt5oi9q8\",\"name\":\"code\",\"code\":\"import { createContext, useContext, useState } from \\\"react\\\"\\n\\ntype User = {\\n id: number\\n name: string\\n email: string\\n}\\n\\ntype AuthContextValue = {\\n user: User | null\\n token: string | null\\n loginUser: (user: User, token: string) => void\\n logoutUser: () => void\\n}\\n\\nconst AuthContext = createContext(null)\\n\\nexport function AuthProvider({ children }: { children: React.ReactNode }) {\\n const [user, setUser] = useState(null)\\n const [token, setToken] = useState(\\n localStorage.getItem(\\\"token\\\")\\n )\\n\\n function loginUser(user: User, token: string) {\\n setUser(user)\\n setToken(token)\\n localStorage.setItem(\\\"token\\\", token)\\n }\\n\\n function logoutUser() {\\n setUser(null)\\n setToken(null)\\n localStorage.removeItem(\\\"token\\\")\\n }\\n\\n return (\\n \\n {children}\\n \\n )\\n}\\n\\nexport function useAuth() {\\n const context = useContext(AuthContext)\\n\\n if (!context) {\\n throw new Error(\\\"useAuth must be used inside AuthProvider\\\")\\n }\\n\\n return context\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dcb771d0-f670-4b55-bbce-1f6e0dad885c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage in login page:","styles":{}}],"children":[]},{"id":"5e6fcd8a-82b8-4365-9e0f-93bbae4cab30","type":"procode","props":{"code":"const { loginUser } = useAuth()\n\nloginUser(data.user, data.token)\n","language":"tsx","filename":"","files":"[{\"id\":\"yv4jkmogv\",\"name\":\"code\",\"code\":\"const { loginUser } = useAuth()\\n\\nloginUser(data.user, data.token)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f278bd57-7f24-4462-90d5-d14b00a63918","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"88ec6a46-7859-4054-b846-4ecedca71d9b","type":"procode","props":{"code":"Auth context shares login state across the React app.\n","language":"txt","filename":"","files":"[{\"id\":\"p11x8xeqz\",\"name\":\"code\",\"code\":\"Auth context shares login state across the React app.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"49888bb0-905b-4e67-8ab4-51801f6a54d3","type":"divider","props":{},"children":[]},{"id":"e784f1cd-a213-496b-a850-41de6be1d812","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Token Storage","styles":{}}],"children":[]},{"id":"953ec178-9277-4e28-87d9-20b6aa6fb1be","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Common token storage options:","styles":{}}],"children":[]},{"id":"6c8dbd3c-9109-4b08-82b7-491187c22363","type":"procode","props":{"code":"Token Storage\n├── localStorage\n├── sessionStorage\n├── memory state\n└── httpOnly cookie\n","language":"txt","filename":"","files":"[{\"id\":\"6jzluzpum\",\"name\":\"code\",\"code\":\"Token Storage\\n├── localStorage\\n├── sessionStorage\\n├── memory state\\n└── httpOnly cookie\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9fa06ae8-1c9e-453a-bbc8-5f29831b5d48","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple comparison:","styles":{}}],"children":[]},{"id":"7868828a-aa2e-42df-bfbd-9f56d3280479","type":"procode","props":{"code":"localStorage\n├── easy to use\n├── persists after refresh\n└── more exposed to XSS\n\nhttpOnly cookie\n├── safer from JavaScript access\n├── usually better for serious auth\n└── needs backend cookie setup\n","language":"txt","filename":"","files":"[{\"id\":\"dfmvdae49\",\"name\":\"code\",\"code\":\"localStorage\\n├── easy to use\\n├── persists after refresh\\n└── more exposed to XSS\\n\\nhttpOnly cookie\\n├── safer from JavaScript access\\n├── usually better for serious auth\\n└── needs backend cookie setup\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"82eae497-27e7-44d0-ac30-064af3cbb372","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"2055bb83-62f5-495e-8f42-da047db76d3b","type":"procode","props":{"code":"For learning, localStorage is simple.\nFor production, httpOnly cookie is often safer.\n","language":"txt","filename":"","files":"[{\"id\":\"33uyz4h8w\",\"name\":\"code\",\"code\":\"For learning, localStorage is simple.\\nFor production, httpOnly cookie is often safer.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"633b7e4d-a29b-426a-bb51-4696adabe738","type":"divider","props":{},"children":[]},{"id":"d89a200f-e588-467b-8aa6-4dcf8efc759a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Login Page and Protected Route","styles":{}}],"children":[]},{"id":"464ce1ad-b112-49e0-8e98-f05bc453c5e8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Login page is usually connected with protected routes.","styles":{}}],"children":[]},{"id":"a3e79e63-1de5-47b3-9b22-3cfcb343ef62","type":"procode","props":{"code":"Without login\n└── user cannot access dashboard\n\nAfter login\n└── user can access dashboard\n","language":"txt","filename":"","files":"[{\"id\":\"5hdisoen8\",\"name\":\"code\",\"code\":\"Without login\\n└── user cannot access dashboard\\n\\nAfter login\\n└── user can access dashboard\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f2b7930c-f624-4ee8-a12c-7ffad50bfcff","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example protected route:","styles":{}}],"children":[]},{"id":"af2c6756-07b5-4c61-9382-54b185b4ddf3","type":"procode","props":{"code":"import { Navigate } from \"react-router-dom\"\n\ntype ProtectedRouteProps = {\n children: React.ReactNode\n}\n\nexport function ProtectedRoute({ children }: ProtectedRouteProps) {\n const token = localStorage.getItem(\"token\")\n\n if (!token) {\n return \n }\n\n return children\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"zm4z3pph1\",\"name\":\"code\",\"code\":\"import { Navigate } from \\\"react-router-dom\\\"\\n\\ntype ProtectedRouteProps = {\\n children: React.ReactNode\\n}\\n\\nexport function ProtectedRoute({ children }: ProtectedRouteProps) {\\n const token = localStorage.getItem(\\\"token\\\")\\n\\n if (!token) {\\n return \\n }\\n\\n return children\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5aa54ad2-6f15-4ced-b534-be4a351de9f2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Usage:","styles":{}}],"children":[]},{"id":"27c34926-dd05-4023-9d3d-2a5adc323a7a","type":"procode","props":{"code":"\n \n \n }\n/>\n","language":"tsx","filename":"","files":"[{\"id\":\"4cfqta3zx\",\"name\":\"code\",\"code\":\"\\n \\n \\n }\\n/>\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"1f0efe8a-f6a5-4d01-910b-13b506ccf1fe","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"26051312-5e64-4547-b24f-9f97698797a4","type":"procode","props":{"code":"Login page gives access.\nProtected route checks access.\n","language":"txt","filename":"","files":"[{\"id\":\"ovwty2xnw\",\"name\":\"code\",\"code\":\"Login page gives access.\\nProtected route checks access.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9dcace60-44d4-4ffa-bbeb-0b3716e3d2d2","type":"divider","props":{},"children":[]},{"id":"3d0ff3cb-8167-435f-ba91-700a2a655bf7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Login API Errors","styles":{}}],"children":[]},{"id":"cb2198ab-0e35-4562-a001-c8dc930c605f","type":"procode","props":{"code":"Common Login Errors\n├── Email is required\n├── Password is required\n├── Email format is invalid\n├── Email or password is incorrect\n├── Account does not exist\n├── Account is disabled\n├── Server error\n└── Network error\n","language":"txt","filename":"","files":"[{\"id\":\"13ubtukq3\",\"name\":\"code\",\"code\":\"Common Login Errors\\n├── Email is required\\n├── Password is required\\n├── Email format is invalid\\n├── Email or password is incorrect\\n├── Account does not exist\\n├── Account is disabled\\n├── Server error\\n└── Network error\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9dfbed4f-f0e9-45fc-a687-93be5580640d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"a1447790-8e1e-4df7-8702-140d22c36bf4","type":"procode","props":{"code":"Login page should show clear error message.\n","language":"txt","filename":"","files":"[{\"id\":\"y7002dkxf\",\"name\":\"code\",\"code\":\"Login page should show clear error message.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b1104737-ebb7-4986-8277-0d1e80fec033","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Avoid showing too much security detail:","styles":{}}],"children":[]},{"id":"695c7ac1-ae20-4b88-a5c6-2f90298c4fca","type":"procode","props":{"code":"Avoid:\n\"Email exists but password is wrong\"\n\nBetter:\n\"Email or password is incorrect\"\n","language":"txt","filename":"","files":"[{\"id\":\"d7cnxbjx9\",\"name\":\"code\",\"code\":\"Avoid:\\n\\\"Email exists but password is wrong\\\"\\n\\nBetter:\\n\\\"Email or password is incorrect\\\"\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"36980d07-cbf6-4d0e-a7c7-878da0f7f7fd","type":"divider","props":{},"children":[]},{"id":"b2e56aac-0637-4282-bf6b-cf975725e96b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"1d19cf1b-b98e-4dc8-8523-bfea6c35fc72","type":"procode","props":{"code":"Mistake 1: Not using preventDefault\nMistake 2: Not handling loading state\nMistake 3: Not handling error state\nMistake 4: Not checking response.ok\nMistake 5: Saving password in localStorage\nMistake 6: Exposing secret API key in React\nMistake 7: Redirecting before login succeeds\nMistake 8: Not disabling button while loading\nMistake 9: Not validating empty inputs\nMistake 10: Showing too much login error detail\n","language":"txt","filename":"","files":"[{\"id\":\"g7sxk1d1o\",\"name\":\"code\",\"code\":\"Mistake 1: Not using preventDefault\\nMistake 2: Not handling loading state\\nMistake 3: Not handling error state\\nMistake 4: Not checking response.ok\\nMistake 5: Saving password in localStorage\\nMistake 6: Exposing secret API key in React\\nMistake 7: Redirecting before login succeeds\\nMistake 8: Not disabling button while loading\\nMistake 9: Not validating empty inputs\\nMistake 10: Showing too much login error detail\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9c6724d0-e6a4-415f-a0c8-4078c16af6ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"c2133026-e26a-4aff-9daa-7698e290ef6a","type":"procode","props":{"code":"Validate inputs.\nSend login request.\nHandle loading.\nHandle errors.\nSave only safe auth data.\nRedirect only after success.\n","language":"txt","filename":"","files":"[{\"id\":\"m0p101gr5\",\"name\":\"code\",\"code\":\"Validate inputs.\\nSend login request.\\nHandle loading.\\nHandle errors.\\nSave only safe auth data.\\nRedirect only after success.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e12112b4-9fcf-4bc9-914b-7d9d829b9806","type":"divider","props":{},"children":[]},{"id":"4df39936-a07a-4249-b297-a9d908fcc7ba","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"227daba5-ce14-4760-8b80-c70034111da3","type":"procode","props":{"code":"Professional Login Page Pattern\n├── Use controlled inputs\n├── Validate email and password\n├── Use loading state\n├── Use error state\n├── Disable submit button while loading\n├── Send POST request to login endpoint\n├── Check response.ok\n├── Store token/session safely\n├── Save user state in auth context if needed\n├── Redirect after successful login\n├── Protect private routes\n├── Keep API logic in service file\n├── Never store password\n├── Never expose backend secrets\n└── Show clear but safe error messages\n","language":"txt","filename":"","files":"[{\"id\":\"5qkf57oi0\",\"name\":\"code\",\"code\":\"Professional Login Page Pattern\\n├── Use controlled inputs\\n├── Validate email and password\\n├── Use loading state\\n├── Use error state\\n├── Disable submit button while loading\\n├── Send POST request to login endpoint\\n├── Check response.ok\\n├── Store token/session safely\\n├── Save user state in auth context if needed\\n├── Redirect after successful login\\n├── Protect private routes\\n├── Keep API logic in service file\\n├── Never store password\\n├── Never expose backend secrets\\n└── Show clear but safe error messages\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e74b09ec-d358-4662-889f-7c5126ef60d3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Recommended structure:","styles":{}}],"children":[]},{"id":"43d57d31-a71b-45b7-8cb2-9a67d529d57b","type":"procode","props":{"code":"src/\n├── features/\n│ └── auth/\n│ ├── pages/\n│ │ └── login-page.tsx\n│ ├── services/\n│ │ └── auth-api.ts\n│ ├── context/\n│ │ └── auth-context.tsx\n│ └── components/\n│ └── login-form.tsx\n├── routes/\n│ └── protected-route.tsx\n├── App.tsx\n└── main.tsx\n","language":"txt","filename":"","files":"[{\"id\":\"6uqako9ef\",\"name\":\"code\",\"code\":\"src/\\n├── features/\\n│ └── auth/\\n│ ├── pages/\\n│ │ └── login-page.tsx\\n│ ├── services/\\n│ │ └── auth-api.ts\\n│ ├── context/\\n│ │ └── auth-context.tsx\\n│ └── components/\\n│ └── login-form.tsx\\n├── routes/\\n│ └── protected-route.tsx\\n├── App.tsx\\n└── main.tsx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7d2d74b1-7d36-406b-aec6-a58a731277ad","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"183f0979-f4af-4775-92a8-c199d5ede0b6","type":"procode","props":{"code":"Small app can keep login simple.\nBigger app should separate page, form, API, and auth state.\n","language":"txt","filename":"","files":"[{\"id\":\"plnc4zcis\",\"name\":\"code\",\"code\":\"Small app can keep login simple.\\nBigger app should separate page, form, API, and auth state.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"de0c94db-64c0-435d-a10d-4bdd2d91b785","type":"divider","props":{},"children":[]},{"id":"256b8fcd-90fc-4e6b-a7e8-b943e04a22b1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"67e6a5cb-b878-4740-8864-d9e482806bab","type":"procode","props":{"code":"Login Page = door to private app area\n","language":"txt","filename":"","files":"[{\"id\":\"ayfrbe1hb\",\"name\":\"code\",\"code\":\"Login Page = door to private app area\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"24a509b4-0647-454c-aaae-366048580e78","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Another simple version:","styles":{}}],"children":[]},{"id":"3b170769-c641-422c-ba2d-8b01801bf3f1","type":"procode","props":{"code":"Login Page\n├── asks who you are\n├── sends identity to backend\n├── backend verifies identity\n├── app saves session\n└── user enters dashboard\n","language":"txt","filename":"","files":"[{\"id\":\"hfu9wkcfm\",\"name\":\"code\",\"code\":\"Login Page\\n├── asks who you are\\n├── sends identity to backend\\n├── backend verifies identity\\n├── app saves session\\n└── user enters dashboard\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69d49076-88da-499d-9e3b-6b0a924c2e17","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"f81446da-14eb-4e8c-9db0-3b01bb0d2600","type":"procode","props":{"code":"Email + password\n├── submit login form\n├── backend checks account\n├── success returns token/session\n├── frontend stores login state\n└── user goes to dashboard\n","language":"txt","filename":"","files":"[{\"id\":\"pzmxb1mqd\",\"name\":\"code\",\"code\":\"Email + password\\n├── submit login form\\n├── backend checks account\\n├── success returns token/session\\n├── frontend stores login state\\n└── user goes to dashboard\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"241c5a24-3f2a-4b3b-ad4c-950838543c5b","type":"divider","props":{},"children":[]},{"id":"999388b2-9abc-4ec3-a51d-ba3e8cd44b74","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"5caaef8b-983e-4118-9175-dbf69c27ac6e","type":"procode","props":{"code":"Login Page\n├── Collects email and password\n├── Uses controlled inputs\n├── Submits form with onSubmit\n├── Sends POST request to backend\n├── Uses loading state\n├── Uses error state\n├── Validates empty inputs\n├── Checks response.ok\n├── Saves token or session after success\n├── Redirects user after success\n├── Works with protected routes\n├── Should not store password\n├── Should not expose secret keys\n├── Should show safe error messages\n└── Should separate API logic when app grows\n","language":"txt","filename":"","files":"[{\"id\":\"mmxpfqkhr\",\"name\":\"code\",\"code\":\"Login Page\\n├── Collects email and password\\n├── Uses controlled inputs\\n├── Submits form with onSubmit\\n├── Sends POST request to backend\\n├── Uses loading state\\n├── Uses error state\\n├── Validates empty inputs\\n├── Checks response.ok\\n├── Saves token or session after success\\n├── Redirects user after success\\n├── Works with protected routes\\n├── Should not store password\\n├── Should not expose secret keys\\n├── Should show safe error messages\\n└── Should separate API logic when app grows\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"08187941-7132-4577-b9a0-507458880507","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Login Page","styles":{"code":true}},{"type":"text","text":" is important because it allows users to access protected parts of a React app. The professional rule is simple: ","styles":{}},{"type":"text","text":"validate the form, call the login API, handle loading and errors, store only safe auth data, then redirect after success.","styles":{"bold":true}}],"children":[]},{"id":"8b918d6b-e3e3-4ded-904e-e7b8d42e525c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]