FusionAuth · sixhobbits · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025
diff --git a/complete-application/README.md → 01_start/account.tsx b/complete-application/README.md → 01_start/account.tsx
diff --git a/01_start/home.tsx b/01_start/home.tsx
diff --git a/01_start/index.css b/01_start/index.css
diff --git a/01_start/index.html b/01_start/index.html
diff --git a/01_start/index.tsx b/01_start/index.tsx
diff --git a/01_start/package-lock.json b/01_start/package-lock.json
diff --git a/01_start/package.json b/01_start/package.json
@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "@fusionauth/react-sdk": "~2.5.1",
+    "react": "~19.1.1",
+    "react-dom": "~19.1.1",
+    "react-router-dom": "^6.7.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "~9.33.0",
+    "@types/react": "~19.1.10",
+    "eslint": "~9.33.0",
+    "parcel": "~2.15.4",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "~8.40.0"
+  }
+}
diff --git a/02_noAuthentication/account.tsx b/02_noAuthentication/account.tsx
@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useNavigate } from "react-router-dom";
+
+export default function Account() {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <div className="titlebar">
+        <button className='button' onClick={() => navigate("/")}>Log out</button>
+      </div>
+      <div className='centerContainer'>
+        <br />
+        <div className="userInfoGrid">
+          <div>Name:                     </div><div></div>
+          <div>Birthdate:                </div><div></div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/02_noAuthentication/home.tsx b/02_noAuthentication/home.tsx
@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useState } from 'react';
+import { useNavigate } from "react-router-dom";
+
+export default function Home() {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <div className="titlebar">
+        <button className='button' onClick={() => navigate("/account")}>Log in</button>
+      </div>
+      <div className='centerContainer'>
+        <div>Log in to request your information</div>
+      </div>
+    </div>
+  );
+};
diff --git a/02_noAuthentication/index.css b/02_noAuthentication/index.css
@@ -0,0 +1,50 @@
+* {
+    color: black;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+}
+
+.white { color: white}
+
+.centerContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.titlebar {
+    background-color: #1e293b;
+    margin: 0 0 36px 0;
+    min-height: 100px;
+    color: #f8fafc;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.button {
+    font-family: inherit;
+    border-radius: 4px;
+    padding: 10px 16px;
+    margin: 16px;
+    height: 40px;
+    background-color: #f58320;
+    border: none;
+    color: white;
+}
+.button:hover {
+    background-color: #ea580c;
+    color: white;
+}
+.button:disabled {
+    background-color: #1e293b;
+    color: #64748b;
+}
+
+.userInfoGrid {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  gap: 10px;
+}
diff --git a/02_noAuthentication/index.html b/02_noAuthentication/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/index.css">
+    <title>FusionAuth Quickstart React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- 1 -->
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
diff --git a/02_noAuthentication/index.tsx b/02_noAuthentication/index.tsx
@@ -0,0 +1,23 @@
+import React, { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import Home from './home';
+import Account from './account';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/account" element={<Account />} />
+      <Route path="*" element={<Navigate to="/" />} />
+    </Routes>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+  </StrictMode>
+);