barbercollie/tinyauth
1
0
Fork 1
mirror of https://github.com/steveiliop56/tinyauth.git synced 2025-10-28 04:35:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Stavros
2025-01-19 13:40:06 +02:00
commit c0e085ea10
34 changed files with 3195 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
site/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
site/.prettierignore Normal file
View File

@@ -0,0 +1,3 @@
# Ignore artifacts:
dist
node_modules

1
site/.prettierrc Normal file
View File

@@ -0,0 +1 @@
{}

BIN
site/bun.lockb Executable file
View File

Binary file not shown.

28
site/eslint.config.js Normal file
View File

@@ -0,0 +1,28 @@
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
export default tseslint.config(
{ ignores: ["dist"] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ["**/*.{ts,tsx}"],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
},
},
);

13
site/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tinyauth</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

2249
site/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

41
site/package.json Normal file
View File

@@ -0,0 +1,41 @@
{
"name": "site",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@mantine/core": "^7.16.0",
"@mantine/form": "^7.16.0",
"@mantine/hooks": "^7.16.0",
"@mantine/notifications": "^7.16.0",
"@tanstack/react-query": "4",
"axios": "^1.7.9",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^7.1.3",
"zod": "^3.24.1"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"postcss": "^8.5.1",
"postcss-preset-mantine": "^1.17.0",
"postcss-simple-vars": "^7.0.1",
"prettier": "3.4.2",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5"
}
}

14
site/postcss.config.cjs Normal file
View File

@@ -0,0 +1,14 @@
module.exports = {
plugins: {
"postcss-preset-mantine": {},
"postcss-simple-vars": {
variables: {
"mantine-breakpoint-xs": "36em",
"mantine-breakpoint-sm": "48em",
"mantine-breakpoint-md": "62em",
"mantine-breakpoint-lg": "75em",
"mantine-breakpoint-xl": "88em",
},
},
},
};

0
site/public/.gitkeep Normal file
View File

17
site/src/App.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Navigate } from "react-router";
import { useUserContext } from "./context/user-context";
import { LogoutPage } from "./pages/logout-page";
export const App = () => {
const queryString = window.location.search;
const params = new URLSearchParams(queryString);
const redirectUri = params.get("redirect_uri");
const { isLoggedIn } = useUserContext();
if (!isLoggedIn) {
return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
}
return <LogoutPage />;
};

12
site/src/components/layouts/layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Center, Flex } from "@mantine/core";
import { ReactNode } from "react";
export const Layout = ({ children }: { children: ReactNode }) => {
return (
<Center style={{ minHeight: "100vh" }}>
<Flex direction="column" flex="1" maw={350}>
{children}
</Flex>
</Center>
);
};

42
site/src/context/user-context.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { useQuery } from "@tanstack/react-query";
import React, { createContext, useContext } from "react";
import { UserContextSchemaType } from "../schemas/user-context-schema";
import axios from "axios";
const UserContext = createContext<UserContextSchemaType | null>(null);
export const UserContextProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const {
data: userContext,
isLoading,
error,
} = useQuery({
queryKey: ["isLoggedIn"],
queryFn: async () => {
const res = await axios.get("/api/status");
return res.data;
},
});
if (error && !isLoading) {
throw error;
}
return (
<UserContext.Provider value={userContext}>{children}</UserContext.Provider>
);
};
export const useUserContext = () => {
const context = useContext(UserContext);
if (context === null) {
throw new Error("useUserContext must be used within a UserContextProvider");
}
return context;
};

44
site/src/main.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";
import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Route } from "react-router";
import { Routes } from "react-router";
import { UserContextProvider } from "./context/user-context.tsx";
import { LoginPage } from "./pages/login-page.tsx";
import { LogoutPage } from "./pages/logout-page.tsx";
import { ContinuePage } from "./pages/continue-page.tsx";
import { NotFoundPage } from "./pages/not-found-page.tsx";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
suspense: true,
},
},
});
createRoot(document.getElementById("root")!).render(
<StrictMode>
<MantineProvider forceColorScheme="dark">
<QueryClientProvider client={queryClient}>
<Notifications />
<UserContextProvider>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/logout" element={<LogoutPage />} />
<Route path="/continue" element={<ContinuePage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
</UserContextProvider>
</QueryClientProvider>
</MantineProvider>
</StrictMode>,
);

53
site/src/pages/continue-page.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { Button, Paper, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Navigate } from "react-router";
import { useUserContext } from "../context/user-context";
import { Layout } from "../components/layouts/layout";
export const ContinuePage = () => {
const queryString = window.location.search;
const params = new URLSearchParams(queryString);
const redirectUri = params.get("redirect_uri");
const { isLoggedIn } = useUserContext();
if (!isLoggedIn) {
return <Navigate to="/login" />;
}
const redirect = () => {
notifications.show({
title: "Redirecting",
message: "You should be redirected to the app soon",
color: "blue",
});
setTimeout(() => {
window.location.replace(redirectUri!);
}, 500);
};
return (
<Layout>
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
{redirectUri ? (
<>
<Text size="xl" fw={700}>
Continue
</Text>
<Text>Click the button to continue to your app.</Text>
<Button fullWidth mt="xl" onClick={redirect}>
Continue
</Button>
</>
) : (
<>
<Text size="xl" fw={700}>
Logged in
</Text>
<Text>You are now signed in and can use your apps.</Text>
</>
)}
</Paper>
</Layout>
);
};

99
site/src/pages/login-page.tsx Normal file
View File

@@ -0,0 +1,99 @@
import { Button, Paper, PasswordInput, TextInput, Title } from "@mantine/core";
import { useForm, zodResolver } from "@mantine/form";
import { notifications } from "@mantine/notifications";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { z } from "zod";
import { useUserContext } from "../context/user-context";
import { Navigate } from "react-router";
import { Layout } from "../components/layouts/layout";
export const LoginPage = () => {
const queryString = window.location.search;
const params = new URLSearchParams(queryString);
const redirectUri = params.get("redirect_uri");
const { isLoggedIn } = useUserContext();
if (isLoggedIn) {
return <Navigate to="/logout" />;
}
const schema = z.object({
email: z.string().email({ message: "Invalid email" }),
password: z.string(),
});
type FormValues = z.infer<typeof schema>;
const form = useForm({
mode: "uncontrolled",
initialValues: {
email: "",
password: "",
},
validate: zodResolver(schema),
});
const loginMutation = useMutation({
mutationFn: (login: FormValues) => {
return axios.post("/api/login", login);
},
onError: () => {
notifications.show({
title: "Failed to login",
message: "Check your email and password",
color: "red",
});
},
onSuccess: () => {
notifications.show({
title: "Logged in",
message: "Welcome back!",
color: "green",
});
setTimeout(() => {
window.location.replace(`/continue?redirect_uri=${redirectUri}`);
});
},
});
const handleSubmit = (values: FormValues) => {
loginMutation.mutate(values);
};
return (
<Layout>
<Title ta="center">Welcome back!</Title>
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
<form onSubmit={form.onSubmit(handleSubmit)}>
<TextInput
label="Email"
placeholder="you@example.com"
required
disabled={loginMutation.isLoading}
key={form.key("email")}
{...form.getInputProps("email")}
/>
<PasswordInput
label="Password"
placeholder="password"
required
mt="md"
disabled={loginMutation.isLoading}
key={form.key("password")}
{...form.getInputProps("password")}
/>
<Button
fullWidth
mt="xl"
type="submit"
loading={loginMutation.isLoading}
>
Sign in
</Button>
</form>
</Paper>
</Layout>
);
};

59
site/src/pages/logout-page.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { Button, Paper, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { useUserContext } from "../context/user-context";
import { Navigate } from "react-router";
import { Layout } from "../components/layouts/layout";
export const LogoutPage = () => {
const { isLoggedIn } = useUserContext();
if (!isLoggedIn) {
return <Navigate to="/login" />;
}
const logoutMutation = useMutation({
mutationFn: () => {
return axios.post("/api/logout");
},
onError: () => {
notifications.show({
title: "Failed to logout",
message: "Please try again",
color: "red",
});
},
onSuccess: () => {
notifications.show({
title: "Logged out",
message: "Goodbye!",
color: "green",
});
setTimeout(() => {
window.location.reload();
}, 500);
},
});
return (
<Layout>
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
<Text size="xl" fw={700}>
Logout
</Text>
<Text>
You are already logged in, click the button below to log out.
</Text>
<Button
fullWidth
mt="xl"
onClick={() => logoutMutation.mutate()}
loading={logoutMutation.isLoading}
>
Logout
</Button>
</Paper>
</Layout>
);
};

18
site/src/pages/not-found-page.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { Button, Paper, Text } from "@mantine/core";
import { Layout } from "../components/layouts/layout";
export const NotFoundPage = () => {
return (
<Layout>
<Paper shadow="md" p={30} mt={30} radius="md" withBorder>
<Text size="xl" fw={700}>
Not found
</Text>
<Text>The page you are looking for does not exist.</Text>
<Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
Go home
</Button>
</Paper>
</Layout>
);
};

7
site/src/schemas/user-context-schema.ts Normal file
View File

@@ -0,0 +1,7 @@
import { z } from "zod";
export const userContextSchema = z.object({
isLoggedIn: z.boolean(),
});
export type UserContextSchemaType = z.infer<typeof userContextSchema>;

1
site/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

26
site/tsconfig.app.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
site/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

24
site/tsconfig.node.json Normal file
View File

@@ -0,0 +1,24 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

7
site/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
});